4 cách hiệu quả tối ưu tốc độ tải trang theo tiêu chuẩn Google Pagespeed

 

Hiện nay, PageSpeed Insights của Google là một trong những công cụ đo lường khả năng làm việc, tốc độ website đáng tin cậy. Có một câu hỏi điên đầu mà các nhân viên lập trình hay gặp nhất là “Làm sao đạt được 100/100 điểm với PageSpeed Insights? Để làm rõ hơn vấn đề này cũng như tìm được cách tối ưu tốc độ tải trang, mời các bạn tham khảo bài viết dưới đây nhé: 

A/ Một số nguyên nhân chính khiến website có tốc độ tải trang chậm

- Hình ảnh chất lượng cao và nặng: Do kích thước hình ảnh quá lớn so với kích thước người dùng xem. Làm tăng thời gian tải trang web
- Dịch vụ hosting kém chất lượng: Khách hàng lớn nhưng cấu hình server thấp, bảo mật kém, khoản cách địa lý...
- Chưa tối ưu HTML, CSS, js..:​ Dư thừa mã css và js, viết mã tạo nhiều file css và js. Css dùng nhiều hình ảnh làm hình nền. Mã nguồn cồng kềnh, bừa bộn, cài đặt quá nhiều plugin
- Cài quá nhiều plugin: Cài đặt quá nhiều ứng dụng của bên thứ 3 không kiểm soát sẽ gia tăng gánh nặng cho web khiến cho tốc độ tải trang trở lên chậm chạp

B/ Cách tối ưu tốc độ tải trang

​​​​​​​1/ Về hình ảnh

  • Chứa hình ảnh của website ở các domain khác nhau: trình duyệt web có thể load từ nhiều domain cùng một lúc, tạo cảm giác rằng website của bạn load nhanh hơn. Hơn nữa, bạn sẽ sử dụng ít CPU và bandwidth của server chính hơn
  • Nén các file hình ảnh theo đúng loại file nén: ​Sử dụng loại nén “lossy” – JPEG cho các hình ảnh nhiều màu sắc. Sử dụng loại nén “lossless – PNG và GIF – cho các hình ảnh ít màu sắc.
  • Thay đổi kích thước hình ảnh cho phù hợp: Đừng resize hình ảnh theo chiều rộng và cao. Resize chúng bằng Photoshop, Fireworks hoặc các chương trình xử lí ảnh chuyên nghiệp với đúng kích cỡ cần hiển thị.
  • Sử dụng các định dạng video cho nội dung động: Các ảnh GIF lớn không hiệu quả trong việc phân phối nội dung động. Hãy xem xét sử dụng video MPEG4/WebM cho ảnh động và PNG/WebP cho ảnh tĩnh thay vì ảnh GIF để tiết kiệm dữ liệu mạng (số byte mạng)
  • Trì hoãn tải các hình ảnh ngoài màn hình: trì hoãn tải các hình ảnh ẩn và ngoài màn hình sau khi tất cả tài nguyên quan trọng tải xong để giảm thời gian tương tác (lazy load) . Hiện tại công cụ SlimWeb.vn đã tự động tối ưu hình ảnh theo cơ chế lazy load.
  • Phân phối hình ảnh ở định dạng mới và hiệu quả hơn: Các định dạng hình ảnh như JPEG 2000, JPEG XR và WebP thường nén tốt hơn so với các định dạng PNG hoặc JPEG. Điều này có nghĩa là tốc độ tải xuống nhanh hơn và tiêu tốn ít dữ liệu hơn
tối ưu tốc độ tải trang

2/ Tối ưu hoá mã nguồn của website

- Viết code thật rõ ràng, súc tích: xóa bỏ code dư thừa, làm gọn code, không cmt quá nhiều
- Đưa các cấu hình CSS và JS vào các file riêng biệt : không nên nhúng thẳng vào mỗi trang. Nếu bạn nhúng javascript hay css vào thì cứ mỗi lượt viếng thăm trang web, đều phải download code đó mỗi lần tại mỗi
trang. Nếu tách riêng ra thì sẽ bỏ qua code và các browser sẽ cache nó lại được.
- Chia rõ các cấu hình CSS ra:​ Tạo 1 stylesheet chứa duy nhất cấu hình sử dụng chung cho tất cả các trang. Sau đó, tạo các stylesheet riêng biệt cho mỗi layout của từng trang như: trang chủ, trang sản phẩm, trang tin tức,...Chỉ load những gì cần thiết trên mỗi trang.

- Tách riêng các file javascript ra: ​giống như các file CSS vậy.
- Hoãn lại việc load các javascript khi có thể: kỹ thuật này sẽ cho các web browser biết nó sẽ load các javascript có thuộc tính “defer” cuối cùng, sau khi đã load hết các thành phần các của trang web. Điều này sẽ làm
giảm nguy cơ bị chậm, bị lỗi hoặc bị đứng đang web khi các file javascript bị lỗi. <script type=’text/javascript’ src=’common.js’ defer=’defer’></script>
- Loại bỏ các tài nguyên chặn hiển thị: các file .js hay css không thực sự quan trọng trong việc hiển thị nội dung chính có thể đưa xuống cuối trang để tránh làm mất thời gian tải trang
- Không đặt file quá sâu: Các file js, css, html liên quan trực tiếp tới hiển thị trang không nên đặt quá sâu (chứa trong nhiều sub folder)
- Không tạo các dom html quá sâu: Tức là trong một thẻ cha chỉ nên có thẻ con thẻ cháu, chắt, chút chít chứ không nên có cả cháu của cháu của cháu ..

3/ Khắc phục hosting

- Đầu tư vào hosting có chất lượng tốt, uy tín.
- Sử dụng chuẩn nén GZIP trên web server
- Thiết lập caching trên server.
- Đặt database ở một server khác.
- Sử dụng JOIN để viết các câu truy vấn SQL lấy dữ liệu ở nhiều bảng khác
nhau

4/ Khắc phục plugin

- Chỉ sử dụng plugin thực sự cần thiết
- Tự code chức năng thay vì sử dụng plugin để tránh dư thừa code không cần thiết.

Nguồn: SlimCRM.vn 

Bình luận