Web Performance

https://viblo.asia/p/web-performance-E375zBxd5GW

Web Performance

Web Performance

Web performance là một bài toán mà bất kỳ developer nào cũng phải quan tâm. Rõ ràng, việc tốc độ tải trang của bạn quá chậm sẽ ảnh hưởng rất lớn đến người dùng cũng như việc người dùng có thể rời website của bạn để đến một trang web khác có trải nghiệm tốt hơn. Bài viết này mình xin tổng hợp lại những quy tắc về performance đã được đúc kết bởi nhóm phát triển Exceptional Performance của Yahoo, được chia làm một số nhóm chính: content, server, cookie, CSS, JavaScript, images.

I. Content

Về nội dung, để tăng performance cho web site, chúng ta có một số quy tắc sau:

1. Tối thiểu số lượng HTTP Request 80% lượng thời gian phản hồi của người dùng được dành cho front-end. Hầu hết khoảng thời gian này là download các thành phần trong trang web: ảnh, stylesheet, script, flash,... Giảm đi số lượng các thành phần này sẽ giúp giảm số lượng request cần để render trang web. Đây chính là chìa khóa để website tải nhanh hơn.

Gộp các đoạn mã script vào 1 file chung, tương tự gộp tất cả CSS vào một file chung. CSS sprite cũng là một phương pháp được ưa chuộng nhằm giảm số lần request ảnh. Gộp các ảnh background vào một ảnh chung và sử dụng thuộc tính background-image và background-position của CSS để hiển thị vùng ảnh mong muốn.

Giảm số lượng HTTP request trong trang web chính là phần quan trọng nhất để cải thiện performance cho những người dùng ghé thăm website lần đầu tiên. Trong một bài viết được giới thiệu bởi Tenni Theurer (Browser Cache Usage - Exposed!), 40-60% lượng visit đến website của bạn mỗi ngày đều là lượt ghé thăm đầu tiên. Cải thiện để website của bạn tải nhanh hơn cho lần ghé thăm đầu tiên là chìa khóa để cải thiện trải nghiệm người dùng.

1. Giảm tra cứu DNS Tra cứu DNS khiến việc khởi tạo request đến server bị trễ. Trường hợp chúng ta cần gửi request đến nhiều hostname khác nhau thì rõ ràng web performance sẽ bị ảnh hưởng không nhỏ. Tuy nhiên nếu giảm số hostname có thể sẽ giảm số lượt download song song trên website, dẫn đến việc tăng thời gian phản hồi. Theo Yslow thì tốt nhất là sử dụng ít nhất 2 hostname (nhằm tận dụng việc tải song song từ nhiều hostname) nhưng không quá 4 hostname.

2. Tránh redirect Rõ ràng khi chưa redirect đến địa chỉ mới thì nội dung website sẽ chưa được tải về, thế nên tốt nhất là tránh redirect nếu có thể.

3. Phân tán component trên nhiều domain Chia nhỏ các thành phần cho phép bạn tối đa hóa việc tải song song. Như đã nói ở phần giảm tra cứu DNS, tốt nhất là chỉ sử dụng tự 2-4 domains. Chẳng hạn, bạn có thể lưu HTML và nội dung động trên www.example.org và chia nhỏ các thành phần tĩnh giữa 2 site là static1.example.org và static2.example.org

4. Giảm số lượng DOM element Quá nhiều DOM element khiến việc truy xuất DOM bởi JavaScript trở nên chậm hơn, đồng thời làm tăng kích thước nội dung HTML của website. Lặp giữa 50 element và 5000 element rõ ràng là 2 trải nghiệm hoàn toàn khác biệt. Tốt nhất là cải thiện trình độ CSS nhằm giảm thiểu số lượng DOM element thừa thãi không cần thiết.

II. Server

1. Sử dụng Content Delivery Network

Ở Viblo đã có một bài viết về CDN, mọi người có thể tham khảo ở đây: Sử dụng CDN để giảm tải cho Server

1. Thêm Expires hoặc Cache-Control Header Quy tắc này có 2 khía cạnh: Với thành phần tĩnh: thiết lập Expires header Với thành phần động: sử dùng Cache-Controler header

Người dùng ghé thăm trang web trong lần đầu tiên sẽ phải gửi rất nhiều HTTP request, những bằng cách sử dụng Expires header bạn có thể lưu trong bộ nhớ những thành phần này, tránh những HTTP request không cần thiết. Expires header thường được dùng với ảnh, những chúng cũng nên được dùng với script, stylesheet và flash. Trình duyệt sử dụng bộ nhớ đệm để giảm số lượng và kích thước của HTTP request, giúp website load nhanh hơn. Một web server sử dụng Expires header trong HTTP response để thông báo với client thời gian lưu trữ trong bộ nhớ của một thành phần nào đó. Dưới đây là một Expires header thông báo cho trình duyệt rằng dữ liệu trả về sẽ được lưu trữ cho đến ngày 15/04/2010.

  Expires: Thu, 15 Apr 2010 20:00:00 GMT

1. Gzip Components Với HTTP/1.1, web client hỗ trợ kiểu nén dữ liệu với header Accept-Encoding trong HTTP request.

   Accept-Encoding: gzip, deflate

Nếu web server nhìn thấy header này, nó sẽ nén dữ liệu trả về bằng phương thức được chỉ thị bởi client. Web server sẽ thông báo với web client bằng Content-Encoding header trong response.

  Content-Encoding: gzip

Gzip là phương thức nén dữ liệu phổ biến và hiệu quả nhất hiện tại. Nó giúp giảm kích thước dữ liệu trả về khoảng 70%, đương nhiên sẽ giúp trang tải nhanh hơn.

1. Tránh sử dụng thuộc tính src hoặc href rỗng Ảnh có thuộc tính src là rỗng thường xuất hiện dưới 2 hình thức: 1 là HTML thuần

Image with empty string src attribute occurs more than one will expect. It appears in two form:

<img src="">

2 là JavaScript

var img = new Image();
img.src = "";

Cả 2 hình thức này đều yêu cầu browser tạo gửi request đến server.

IE gửi 1 request đến đường dẫn mà trang web được định vị. Safari và Chrome gửi 1 request đến chính trang web. Firefox và Opera sẽ không gửi request.

Tại sao đây là một thói quen xấu?

Hành vi này làm tê liệt server bằng cách gửi một lượng traffic lớn bất ngờ, đặc biệt với những trang web có hàng triệu lượt view mỗi ngày. Lãng phí server phải tính toán để sinh ra một trang web không bao giờ được đọc. Có thể làm hỏng dữ liệu người dùng. Giả sử nếu bạn đang theo dõi trạng thái của request, bằng cookie hoặc bằng cách nào đó, bạn có nguy cơ sẽ thiêu hủy toàn bộ dữ liệu. Thậm chí dù request không trả về 1 bức ảnh thì header vẫn được đọc và được chấp nhận bởi trình duyệt, bao gồm cookie. Tóm lại là cứ theo chuẩn, các thuộc tính src và href nên được chèn URL hợp lệ.

III. Cookie

1. Giảm kích thước cookie HTTP cookie được dùng bởi nhiều lý do, chẳng hạn để xác thực người dùng. Thông tin về cookie được trao đổi trong HTTP header giữa web server và trình duyệt. Tối thiểu kích thước cookie là cách để giảm tối đa ảnh hưởng của nó đến thời gian trả về của dữ liệu: lọc những cookie dư thừa, thiết lập cookie đúng với cấp độ domain (chẳng hạn chỉ thiết lập cookie cho domain chính, subdomain sẽ không bị ảnh hưởng), thiết lập ngày hết hạn của cookie...

2. Use Cookie-free Domains for Components Khi trình duyệt khởi tạo request cho ảnh tĩnh và gửi cookie kèm theo, server không sử dụng những cookie này, bởi thế một lượng traffic tạo ra mà không có lý do hợp lý. Tốt nhất là nên để các thành phần tĩnh được request với cookie-free, nhằm giải phóng cookie, tạo một subdomain và lưu tất cả thành phần tĩnh trên đó.

IV. CSS và JavaScript

1. Đặt CSS ở header, JavaScript ở trước thẻ </body>

2. Dùng CSS và JavaScript external

3. Minify CSS và JavaScript file

4. Tối ưu truy xuất đến DOM

V. Images

1. Tối ưu ảnh Sử dụng định dạng ảnh (jpg, png,...) có kích thước và chất lượng tối ưu. Tốt nhất là bạn nên sử dụng một tool nào đấy để check trước khi upload lên server.

2. Tối ưu CSS Sprites Sắp xếp ảnh trong sprite sao cho kích thước nhỏ nhất có thể.

3. Favicon nên nhỏ và lưu được vào bộ nhớ đệm

4. Sử dụng kích thước ảnh đủ dùng, nếu trang web của bạn chỉ cần bức ảnh 200 x 200 px thì chẳng có lý do gì bạn lại dùng bức ảnh 500 x 500 px và set width, height cho nó về 200 x 200px thay vì dùng luôn bức ảnh 200 x 200px.

Trên đây chỉ là một số quy tắc đơn giản nhằm cải thiện web performance, chủ yếu tập trung về front-end. Rõ ràng, những nhân tố ở phía back-end như cấu hình server, ngôn ngữ sử dụng, câu lệnh truy vấn đến cơ sở dữ liệu cũng ảnh hưởng không hề nhỏ đến tốc độ tải trang. Một trang web với performance tốt là một trang web mà thời gian của mỗi request tính từ lúc khởi tạo cho đến lúc dữ liệu được trả về phải không vượt quá 150ms, với chỉ những quy tắc đơn giản trên thì bạn khó mà đạt được điều này, do hạn chế về kiến thức nên mình cũng chưa thể trình bày được phương pháp trong bài viết này. Hẹn gặp lại trong một ngày gần nhất có thể.

Tham khảo: http://yslow.org/user-guide/