Đây là một trong những vấn đề đau đầu của nhiều bạn khi làm onpage website. Việc tối ưu hóa tốc độ tải trang không những giúp bạn có ưu thế hơn trên SERP, ngoài ra – nếu bạn chưa biết: tốc độ tải trang cũng ảnh hưởng trực tiếp đến tỉ lệ đơn hàng. Bài này tôi tiếp tục chia sẻ với bạn một số vấn đề mà tôi phải giải quyết khi tối ưu hóa tốc độ tải trang web.
Ảnh hưởng của tốc độ tải trang đến quá trình chuyển đổi đơn hàng
Trước đây tôi có biên dịch một Infographic về vấn đề này, để thuận tiện cho bạn tôi lôi lại Infographic này ra để bạn tiện xem.
Tốc độ tải trang ảnh hưởng đến số lượng đơn hàng của bạn như thế nào ?Tối ưu hóa tốc độ tải trang
Mỗi người có một quan điểm về việc tối ưu hóa tốc độ tải trang, tuy nhiên nhiều người thích sử dụng PageSpeed Insight để làm thước đo đồng thời có những lời khuyên hợp lý khi tối ưu từ Google. Riêng tôi, bên cạnh những yếu tố kĩ thuật mà Google đề nghị, tôi sử dụng thêm công cụ Pingdom Website Speed Test để đo tốc độ truy cập thực tế của website.
Đối với vấn đề tối hóa trang web trên Google PageSpeed Insight, một trong những đặc điểm lớn nhất và thường gặp nhất đối với nhiều người đó là thư viện jQuery thường ngăn chặn quá trình tải trang và gây khó khăn vì bạn không thể không tải JQuery lên trước vì các cấu hình liên quan đến jQuery sẽ không hoạt động và gây lỗi vỡ layout trên giao diện. Tôi không có giải pháp nào khác nên vẫn đặt jQuery lên phía trên để nó tải trước, không nhất thiết phải tối ưu đến 100/100 điểm phải không.
Bên cạnh đó, nếu bạn sử dụng Bootstrap cho phiên bản design thì tiếp tục phát sinh một vấn đề mới là stylesheet của bootstrap (và cả javascript của bootstrap) sẽ ngăn chặn quá trình tải trang. Đối với vấn đề này, do đường truyền internet hiện nay đã được cải thiện rất nhiều nên tôi có thể đẩy phần stylesheet và javascript của bootstrap xuống dưới chân trang. Khi đó, sau khi nội dung ở phần fold-content được tải lên (chưa được định dạng) sẽ đến phần nội dung chân trang tải (với stylesheet) gây ra hiện tượng dữ liệu tải trước, định dạng dữ liệu thực hiện sau. Nhưng do thời gian tải khá nhanh nên người dùng không mất quá nhiều thời gian đợi (khoảng 1s) cũng không gây khó chịu gì lớn cho người dùng.
Một vấn đề nữa khi tối ưu hóa đó là hình ảnh. Khi tiến hành tối ưu, tôi gặp rât nhiều vấn đề đối với việc tối ưu hình ảnh mà theo yêu cầu của PageSpeed Insight là cần phải tối ưu hóa hình ảnh để giảm đáng kể khối lượng tải xuống. Bằng cách sử dụng jquery Lazyload, tôi ngăn chặn hình ảnh tải xuống khi nội dung được tải lên mà hình ảnh chỉ được tải khi người dùng scroll chuột đến. Giải pháp này có vẻ không khả quan cho SEO hình ảnh nhưng lại đem lại một tốc độ tải trang nhanh hơn, tốt hơn. Cân đối giải pháp, tôi quyết định sử dụng Lazyload cho trang chủ, còn các trang danh mục tôi không sử dụng công cụ này.
Bên cạnh đó, sử dụng công cụ Pingdom Website Speed Test mà tôi đã nói ở trên tôi dễ dàng tìm ra các nguồn tài nguyên tốn nhiều thời gian tải trang nhất và tiến hành giải phóng tài nguyên, sử dụng hệ thống CDN để tăng tốc độ tải trang và giảm lượng request từ server chính. Việc giảm số lương request từ server chính sẽ giúp cho máy chủ của tôi xử lý nhẹ nhàng hơn và nhanh chóng hơn.
Kết quả đạt được rất khả quan: khi người dùng tải trang chủ, họ chỉ thực hiện tải khoảng 14Kb dữ liệu (text) từ máy chủ của tôi. Còn lại đã được phân tải ra các hệ thống khác và tốc độ truy cập tăng lên một cách đáng kinh ngạc.