YSlow, những đề xuất để tối ưu tải trang

  • JavaScript
  • 05 tháng 09 2015
  • bởi Văn Khương
  • 0 Comments

Minimize HTTP Requests

Giảm số số lượng request trên trang của bạn, người ta nói rằng 80% thời gian trả về từ phía người dùng cuối được thực hiện khi bắt đầu trả về trình duyệt, đó là thời gian để tải tất cả các thành phần trên web, vậy thì hãy gom chúng lại nếu có thể

  • Combined files: chẳng hạn như gom thành 1 file script và css duy nhất
  • CSS Sprites: trong css background chỉ nên sử dụng 1 hình
  • Image maps: kết hợp những file ảnh thành 1 file sử dụng kỹ thuật image maps
  • Inline images: sử dụng data-URL cho hình ảnh tuy nhiên chỉ nên dùng cho stylesheets

Use a Content Delivery Network

Đặt những files cho người dùng cuối của bạn ở server CDN giúp tải nhanh hơn bởi CDN dựa vào vị trí người dùng cuối để trả về, giúp tối ưu tải các tài nguyên static, giảm giới hạn kết nối đồng thời từ trình duyệt theo domain...

Avoid empty src or href

Bởi một số trình duyệt vẫn sẽ gửi request

Add an Expires or a Cache-Control Header

Được cung cấp sẵn HTTP header sử dụng các thông tin như status code, Cache-Control, Etag, If-None-Match, có thể hiểu đơn giản như 1 token có thời hạn từ client tới server, server sẽ quyết định trả về gì sau khi kiểm tra token và client sẽ quyết định sử dụng gì từ thông tin HTTP header mà server trả về, chẳng hạn khi response content không thay đổi thì server sẽ gửi về Etag với giá trị giữ nguyên cùng với status code là 304 Not Modified lúc này trình duyệt sẽ lấy response content đã tải lần trước ngược lại khi response content có thay đổi server sẽ gửi về Etag mới với status code là 200 OK cùng với content lúc này trình Browser biết là phải hiển thị response content đã trả về và tạo If-None-Match mới cho lần request tiếp theo

Gzip Components

Giảm kích thước HTTP response thông qua việc gửi request có thông báo đến server nén dữ liệu trả về theo dạng gzip, cần đảm bảo server được cấu hình để thực hiện điều này, việc gửi request với gzip thường là mặc định của trình duyệt

Put StyleSheets at the Top

Put Scripts at the Bottom

Avoid CSS Expressions

Nên thay thế bằng javaScript

Make JavaScript and CSS External

Để javaScript và CSS được cache trên trình duyệt

Reduce DNS Lookups

DNS phân giải từ hostname thành địa chỉ IP việc này cũng mất một khoảng thời gian nào đó thường khoảng 20-120 miliseconds. Tuy nhiên thường mặc định đã có cơ chế cache nó trên hệ điều hành hoặc từ nhà cung cấp dịch vụ giúp tăng thời gian phân giải địa chỉ ip, tuy nhiên có thể làm tốt hơn nữa bằng việc giảm thiểu số lần phân giải địa chỉ bằng việc thực hiện giảm thiểu lượng sử dụng các request với các hostname khác nhau

Minify JavaScript and CSS

Giảm kích thước file giúp tăng thời gian tải nó, loại bỏ những thứ không cần thiết giúp tăng thời gian trình duyệt đọc nó

Avoid Redirects

Remove Duplicate Scripts

Reduce the Number of DOM Elements

Reduce Cookie Size

Use Cookie-free Domains for Components

Với những thành phần tĩnh việc request phải bao gồm cả cookie là lãng phí vậy nên những thành phần tĩnh tốt nhất nên được request từ một tên miền khác

Tham Khảo Developer.yahoo.com

  • Chia sẻ
comments powered by Disqus