Chào các bạn, trong bài viết này An chia sẻ một số plugin tăng tốc website wordpress khá hay, đây là một chuỗi plugin của cùng tác giả trẻ người Ấn (hình như sinh năm 1995).
#1. Fly Images – nén ảnh, load nhanh
Lazy load ảnh, dùng cả 2 phương pháp là JavaScript (trên tất cả các trình duyệt) và Native lazy loading (chỉ trên Chrome, không cần JS), bạn có thể dùng một trong hai hoặc bật đồng thời. Ngoài ra có kèm CDN miễn phí của statically.io có chất lượng khá (được hỗ trợ bởi CDN77, BunnyCDN, CloudFlare, Fastly), tích hợp luôn định dạng ảnh webp khi cần (dù vậy tôi không khuyến khích webp lắm trên hầu hết website, vì bạn vẫn phải cần dự phòng bằng JPG và PNG- tin mừng là trình duyệt Safari mới hỗ trợ webp, vậy là hầu hết các trình duyệt lớn đã hỗ trợ định dạng ảnh này).
Cái hay của Flying Images là cơ chế tải lười ảnh bằng JS của nó còn có thêm phần thiết lập ngưỡng tải trước để hạn chế ảnh hưởng đến trải nghiệm người dùng, ảnh sẽ tải trước khi đi vào khung nhìn trình duyệt khi nó cách đáy view port từ 500px đến 3000px, lựa chọn cụ thể tùy vào mốc bạn chọn. Ngoài ra là tính năng loại trừ không lazy load các ảnh quan trọng, chẳng hạn như logo web luôn nằm trong màn hình đầu tiên.
#2 Flying Pages – tối ưu trang
Tải trước trang khi nó đi vào khung nhìn trình duyệt hoặc/và được hover. Nhược điểm của phương pháp này là nó làm tăng sử dụng máy chủ đặc biệt là trên các trang có lưu lượng truy cập lớn và các liên kết nội bộ dày đặc. Trong phần tùy chỉnh của plugin nó cho phép bạn thiết đặt mức độ tải trước (mặc định là 3 trang/s) để hạn chế các ảnh hưởng tiêu cực có thể xảy ra.
Nếu dùng plugin LiteSpeed cache thì ở tab Cache, mục Instant Click là tính năng tương tự với Flying Pages ở khía cạnh tải trước khi hover link. Cải tiến thêm của Flying Pages là nó cho phép tải thêm cả các liên kết trong khung nhìn trình duyệt (viewport) nếu bạn muốn.
Nó chỉ tải trước HTML của trang và không làm ảnh hưởng đến các thông số thống kê (ví dụ lưu lượng truy cập). Có lần tôi hỏi tác giả plugin sao anh ấy không tích hợp Google Analytics vào để phân tích và tải trước các link dựa trên mẫu của người dùng trước đó nhằm hạn chế tải trước các link có xác suất click thấp, Gijo trả lời đại khái rằng cơ chế đó khá phức tạp để triển khai hoàn chỉnh, ngoài ra tôi nghĩ rằng nó có thể gặp trở ngại cả về vấn đề thỏa thuận người dùng về khai thác dữ liệu.
#3 Flying Javascrips – tối ưu Javascript
Trì hoãn thực thi JavaScript nặng của bên thứ ba cho đến khi có tương tác của người dùng. Rất tốt khi áp dụng trên các JS của bên thứ ba không quan trọng trong lần tải đầu tiên hoặc không nằm trong màn hình đầu tiên. Các ứng dụng tốt có thể áp dụng là chat Facebook, Google maps, vân vân.
Với các mã phân tích (ví dụ Google Analytics) nên áp dụng thận trọng vì chắc chắn nó làm sai lệch dữ liệu ít nhiều (với GA có lẽ cách hay hơn là localhost nó bằng plugin kiểu như
Flying Analytics để giúp giảm thời gian tìm kiếm DNS cũng như tránh bị đánh fail ở phần thời gian cache trình duyệt chỉ 2 tiếng).
Điểm hay của plugin này là nó sẽ vẫn tải các mã sau thời gian chỉ định (mặc định 5s) kể cả khi không có tương tác của người dùng, điều này giúp hạn chế ảnh hưởng tiêu cực nếu có của việc trì hoãn thực thi JS. Tin phụ hơi liên quan: mặc dù Safari tuyên bố là sẽ block Google Analytics nhưng có vẻ bản Safari 14 vẫn chưa block.
