Case study #1: tối ưu hóa tốc độ website của bạn Giang Hải Sơn

Website của bạn Sơn có cấu trúc đơn giản, dạng blog nên việc tối ưu diễn ra khá nhanh.

Các lý do gây chậm trang cũng phổ biến:

• Mã JS bên thứ ba nhiều và nặng
• Tải nhiều font của Google fonts
• Thời gian cache trình duyệt ngắn
• Không lazy load các ảnh ngoài màn hình
• JS và CSS không gộp và minify
• CSS chặn hiển thị do chưa có critical CSS

Vì web của bạn Sơn (nội dung chuyên về Analytics web) dùng OpenLiteSpeed web server nên tôi tối ưu luôn bằng plugin LiteSpeed cache– vốn có chất lượng rất cao, lại miễn phí.

Thao tác tối ưu không quá khó khăn, ở đây có vài điểm thú vị tôi muốn chia sẻ.

• Critical CSS: trang tạo critical CSS tương đối vất vả vì bố cục của trang chủ, trang chuyên mục và trang post, page khác nhau. Tôi dùng https://pegasaas.com/critical-path-css-generator/ để tạo critical CSS, rồi vào từng trang kiểm tra class của nó để lấy CSS, và tổng hợp lại thành critical CSS chung. Nếu không làm thế bố cục trang sẽ bị giật cục khi chuyển qua lại giữa các kiểu trang.
• Trì hoãn JS nặng của bên thứ ba: trang của Sơn tải nhiều JS nặng. Tôi sử dụng plugin Flying Scripts để trì hoãn các tài nguyên này, nó có tác dụng rất tốt, chỉ tải JS khi có tương tác của người dùng (user interaction). Để xác định nhanh các mã JS cần trì hoãn tôi sử dụng cấp độ tên miền thay vì tên file JS cụ thể.
• Trang tải quá nhiều fonts của bên thứ ba: thiết kế hiện tại trang đang sử dụng quá nhiều font của Google, tôi sử dụng plugin OMGF, để local host nó, font có tải về nhưng giao diện không nhận, nên tôi thay thế bằng cách sử dụng tính năng tải font không đồng bộ (Asynchronous) trong LiteSpeed cache để hạn chế ảnh hưởng thời gian của font.
• Nâng cao thời gian cache trình duyệt: Với OpenLiteSpeed thì phải vào phần config của nó mới chỉnh được thời gian cache trình duyệt, hiện chỉnh qua plugin không thành công, tôi có viết bài hướng dẫn chi tiết cách làm ở đây.
• Tôi lazy load ảnh trong post/page nhưng trang thư mục thì không vì với thiết kế 3 cột có thể gây ra độ trễ tải.

PS: thiết kế trang chuyên mục với ảnh kèm bài viết là thiết kế rất ổn, phổ biến. Thiết kế của bạn Sơn cũng OK. Nếu bạn nào muốn tối ưu hơn nữa tốc độ tải thì có thể tham khảo thiết kế trang chuyên mục chỉ cần tiêu đề.

Ngoài ra tôi cũng tư vấn bạn Sơn nên đổi Contactform7 sang Google forms hoặc WPforms để cải tiến tốc độ, vì Contactform7 chèn CSS và JS trên tất cả các trang dù trang đó có form hay không.

Sau khi tối ưu trang của Sơn có tốc độ rất tốt với trang post/page, trang chuyên mục và trang chủ cũng có cải tiến nhưng không nhiều được như trang blog do vần đề về font chưa khắc phục được (thiết kế ban đầu yêu cầu tải khoảng 15 font Google).

Kết quả trước sau

Với trang post/page

Kiểm tra trên tool pingdom cũng cho thấy các cải thiện đáng kể:

Thời gian tải trang, số lượng kết nối, kích cỡ trang đều được cải thiện.

Xin chào và hẹn gặp lại các bạn trong case study tiếp theo.