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

Thủ thuật WordPress
1

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ể

image
image2048×1365 255 KB

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ũ

2

Mình cũng sử dụng theme Flatsome với plugin litespeedcache. Không biết như thế nào mà bị vụ load ảnh sản phẩm. Mình bấm vào sản phẩm bị trắng ảnh sản phẩm. Refresh lại thì hiện ảnh sản phẩm ra bình thường. Nhưng bấm vào sản phẩm khác lại vẫn bị trắng ảnh sản phẩm. Nếu tắt plugin cache thì ảnh sản phẩm cũng bình thường. Nén CSS với JS trong plugin mình đã tắt hết mà vẫn bị. Bạn có gặp tình trạng giống mình. Và có hướng giải quyết xin hãy giúp đỡ.

3

Chào bạn, do bạn nén quá mức qua định thường sẽ bị lỗi ở css và js

4

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.

Đoạn này làm thế nào bác, bác chỉ rõ hơn được không?