Các kỹ thuật kiểm tra và khắc phục lỗi Google PageSpeed Insight

Link test: https://developers.google.com/speed/pagespeed/insights/

Tối ưu trong source code

Khu vực hiển thị first screen

Màn hình đầu tiên của người dùng luôn cần hạn chế tối đa lazyload. Các đối tượng hiển thị trong màn hình đầu tiên (khi chưa scroll hay tương tác) cần đảm bảo hiện ra.

Với element là ảnh

  • Không có class .lazyload
  • Không có thuộc tính loading="lazy"

Cách sử dụng phổ biến dễ nhất là:

the_block('image', array(
  'lazyload' => false
));

Load font chữ bằng inline CSS và ngay trong <head>

Các font chữ cần load bằng CSS inline. Thao tác thực hiện:

// Get file content, ví dụ: assets/fonts.css
$file_path = CODETOT_CHILD_DIR . '/assets/fonts.css';
$file_content = file_exists($file_path) ? file_get_content($file_path) : '';

if ( !empty($file_content) ) :
  wp_register_style('child-font', false);
  wp_enqueue_style('child-font', false);
  wp_add_inline_style('child-font', $css_file_content);
endif;

Các block hay element nằm ngoài đều cần lazyload

Lazyload block default-section

the_block('default-section', array(
  'lazyload' => true
));

Lazyload image

the_block('image', array(
  'lazyload' => true // Có thể không truyền thì vẫn nhận default = true rồi
));

Nếu có các custom block pass vao block default-section và load JS riêng của nó, vẫn triển khai lazyload dễ dàng thông qua JS

the_block('default-section', array(
  'lazyload' => true,
  'attributes' => 'data-child-block="project-slider"'
));
import { select, loadNoscriptContent } from 'lib/dom'
import { throttle } from 'lib/utils'
import Carousel from 'lib/carousel'

export default el => {
  const contentEl = select('.js-content', el)
  let slider = null
  let sliderEl = null
  let sliderOptions = null

  const init = () => {
     if (inViewPort(el) && hasClass('is-not-loaded', contentEl) {
       loadNoscriptContent(contentEl)
     }

    // Chuyển tất cả select + selectAll + các event + các phương thức cần cho vào đây
    if (!slider) {
        sliderEl = select('.js-slider', el)
        sliderOption = sliderEl ? getData('slider-options', sliderEl) : null
        sliderOptions = sliderOptions ? JSON.parse(sliderOptions) : {}
        
        slider = new Carousel(sliderEl, sliderOptions)
     }
  }
  
  on('load', throttle(init, 300), window)
  on('scroll', throttle(init, 300, window)
}

Xử lý file ảnh

Nén ảnh trong thư mục /themes/ child theme

Các ảnh dùng làm decor, ảnh nền trang trí trong theme, child theme, plugin đều cần được tối ưu trước khi upload lên.

  • https://tinyjpg.com
  • https://tinypng.com

Các ảnh khi cho lên cần resize sát khung hiển thị lớn nhất có thể, ví dụ 30x30px thì resize lại cho khớp, tránh upload ảnh 300x300px gây tốn tài nguyên.

Nén ảnh trên website

Sử dụng plugin tùy theo từng khách hàng, có thể xin công ty API key bản premium để nén ảnh tốt hơn.

Chế độ nén đề xuất: Lossless (ít mất chất lượng)

Kích thước ảnh

Nếu xác định sai kích thước ảnh sẽ rất dễ bị tính điểm trừ.

the_block('image', array(
  'size' => 'thumbnail'
));

Các size này chỉ là ước tính size gốc, thực tế WordPress sử dụng srcset để xác định kích thước màn hình/file ảnh và load file tỷ lệ tương ứng. Tuy vậy, để đáp ứng ảnh mobile hiển thị, nên set size mặc đinh về thumbnail hoặc medium.

<img width="1024" height="683" 
src="https://dieuho.codetot.work/wp-content/uploads/2021/08/post-1-1-1024x683.jpg" 
class="wp-post-image image__img" 
alt="" 
srcset="https://dieuho.codetot.work/wp-content/uploads/2021/08/post-1-1-1024x683.jpg 1024w, https://dieuho.codetot.work/wp-content/uploads/2021/08/post-1-1-300x200.jpg 300w, https://dieuho.codetot.work/wp-content/uploads/2021/08/post-1-1-768x512.jpg 768w, https://dieuho.codetot.work/wp-content/uploads/2021/08/post-1-1-1536x1024.jpg 1536w, https://dieuho.codetot.work/wp-content/uploads/2021/08/post-1-1-2048x1366.jpg 2048w" 
sizes="(max-width: 1024px) 100vw, 1024px"
>