Hướng dẫn tối ưu Flatsome tăng điểm tối đa Google Insight

Hướng dẫn tối ưu Flatsome tăng điểm tối đa Google Insight
0

Chào cả nhà, hai hôm nay mình ngồi tối ưu tốc độ load website, sau khi tối ưu điểm desktop được khoảng 99, mobile được khoảng 70~77, mới update lên flatsome mới nên thỉnh thoảng tụt 1~2 điểm không đáng kể

Demo: https://homy.vn/

Chia sẻ nhanh lại cho các anh em dùng flatsome có hướng đi, vì tốc độ web cũng khá quan trọng.

Web này được làm bằng opensource wordpress, sử dụng flatsome theme và mình không sử dụng amp

  1. Bật Lazy load (img, background) trong flatsome theme

  2. Cài Litespeed Cache:

  • Bật nén, tải không đồng bộ css, js.
  • CDN: mình không sử dụng CDN nhưng tách toàn bộ file js, css, jpeg,… (static file) qua sub domain (vd: static.domain.com) để giảm tải cho domain chính.
  • Sử dụng Object Cache: Sử dụng Memcached để tạo các bản sao session, query để giảm tải sever
  • Bật Cache Browser

(Ai làm web global thì có thể kết hợp thêm CDN của cloudflare - Bản miễn phí/ trả phí - về phía mình thấy không cần lắm vì mình tiếp cận user trong nước, và mình không thích dùng bản miễn phí cho lắm vì thỉnh thoảng hay lỗi vặt)

  1. Cài Hummingbird
  • Active toàn bộ chức năng loại trừ Page Caching đã sử dụng Litespeed cache rồi.
  • Nén toàn bộ JS, html, combine file và tống qua CDN hoặc subdomain (Lưu ý một số chức năng khi combine sẽ không hoạt động tốt, VD như với flatsome theme thì lazy load sẽ không chạy ổn nên loại ra)
  1. Cài ShortPixel
    Cái này chức năng để nén ảnh (trả phí) có đâu đó $10/10.000 ảnh thì phải.
  • Convert file ảnh từ png qua jpeg, nén ảnh ở glossy (thường sẽ giảm được khoảng 50% dung lượng ảnh.
  • Bật định dạng ảnh webp cho website
  • Resize toàn bộ file ảnh xuống mức vừa phải (960px hoặc 1200px là đẹp)
  1. Bớt cài mấy cái linh tinh, hiệu ứng banner lòe loẹt

  2. Sử dụng giao diện mobile riêng, ở web này sử dụng responsible tối ưu điểm mobile chỉ được vào khoảng 77 điểm (Hi sinh tốc độ để đổi lấy ảnh chất lượng), nếu muốn tốt hơn có thể thiết kế giao diện mobile riêng. Tuy nhiên so sánh vs các đối thủ thấy tốc độ của mình vẫn tốt hơn nên để sau (Cũng có thể sử dụng amp nhưng bị hạn chế về trải nghiệm người dùng).

Những bước trên đây đều khá dễ làm, đặc biệt cho những người low tech như mình.

Nguồn FB: Trần Văn Vũ