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:

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.
website của Sơn với thiết kế ba cột

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

Trang trước và sau tối ưu, chấm với Google PageSpeed Insights
Tôi tối ưu trên trang demo (staging site) trước khi chuyển các cài đặt sang trang chính thức. Điểm số thực tế khi bạn kiểm tra lại có thể thay đổi do điều kiện mạng hoặc do chủ website có các thay đổi trên trang.

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

kiểm tra trên tool pingdom

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.

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

  1. Đầu tiên cho mình gửi lời cảm ơn đến bạn Đức Anh.
    Còn về cảm nhận thì mình thấy website nhanh hơn một cách rõ rệt. Mình không biết về việc cải thiện tốc độ này cho lắm, nhưng khi giao website cho bạn Đức Anh mình hoàn toàn yên tâm. Và khi vào đọc case study này của bạn thì mình thấy khối lượng công việc quả là rất nhiều (toàn là những công việc mình không biết, không hiểu gì luôn).
    Sau khi Đức Anh bàn giao lại website, mình đã làm theo hướng dẫn của bạn ấy. Bao gồm:
    1. Thay Contact Form 7 bằng WPForms;
    2. Chuyển đổi hết Google font về font chữ hệ thống (cụ thể là Arial);
    3. Chỉnh sửa thời gian lưu Cache theo hướng dẫn của bạn ấy – do mình sử dụng OpenLiteSpeed (cũng được chính Đức Anh đưa ra lời khuyên ngay từ lúc khởi tạo server chạy Cyberpanel), nên bài hướng dẫn này như viết riêng cho mình vậy.
    Một lần nữa xin cảm ơn bạn Đức Anh đã giúp đỡ mình rất nhiều, nhiệt tình hướng dẫn từng việc nhỏ nhất để mình có thể hoàn thành việc tăng tốc website. Chúc bạn luôn duy trì động lực và gặt hái nhiều thành công!!!

    Reply
    • Cảm ơn review tâm huyết của bạn Sơn. Học được nhiều điều mới khi tối ưu website của bạn, nhất là về khoản critical CSS và cách dùng font.

      Reply
      • Còn quên chưa kịp cám ơn về Plugin tăng tốc Prefmatters + Giao diện Generate Press bản quyền được bạn Đức Anh tặng nữa. Lộc lá quá trời đất luôn.
        Mình cảm thấy rất may mắn khi được biết đến Chimcat và Kiencang. Nhờ tham khảo website của bạn mà mình có thêm nhiều động lực để tiếp tục viết blog của mình.
        Many thanks!!!

        Reply

Leave a Comment