Phương pháp tối ưu tốc độ truy cập website

How to optimize speed of a website
Người dùng truy cập vào website mất từ 60-90% thời gian trong việc download các nội dung trên trang web như: hình ảnh, scripts, stylesheets, flash. Thời gian truy cập vào trang web nhanh sẽ giúp website đó thân thiện với người dùng hơn vì thế trong bài viết này blogIT trình bày vài phương pháp cơ bản để nâng cao tốc độ truy cập website.

#bl1 Đầu tiên hãy kiểm tra xem website chúng ta đã được mấy điểm trên bảng điểm tối ưu, cộng cụ này cũng đưa ra những hướng cho chúng ta giải quyết. Hãy truy cập http://gtmetrix.com/ #bllink và điền vào tên site của bạn.
#bl1 Sau đây là yêu cầu để chúng ta tối ưu tốc độ load website.

#bl0 Minimize HTTP Requests
Giảm thiểu tối đa các yêu cầu (request) gửi đến server. Để làm được điều này chúng ta có thể áp dụng vài phương pháp sau
#bl2 Inline images với data: URL Scheme để nhúng hình ảnh trực tiếp trên trang web không cần thông qua các url hình ảnh. Nó có thể làm tăng kích thước của tài liệu HTML nhưng giảm được một lượng lớn các request tải về hình ảnh. Ví dụ

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
width="16" height="14" alt="embedded folder icon">

- Hãy kết hợp data:URL Scheme với CSS để ta dễ dàng quản lý. Đừng lạm dụng nó với những file ảnh kích thước lớn nhé. Bạn có thể tạo data:URL Scheme tại đây http://dataurl.net/#dataurlmaker
#bl2 CSS Sprites: tích hợp toàn bộ các hình ảnh trên trang của bạn thành một hình ảnh duy nhất và sử dụng các thuộc tính của CSS background-image và background-position để hiển thị các hình ảnh rời rạc. Hầu như tất cả các trang web ngày nay đều ứng dụng phương pháp này. Ví dụ đây là file ảnh của Youtube

- Để thực hiện, yêu cầu các web designer phải hoạch định cụ thể và kết hợp photoshop để tạo các file ảnh như thế.
#bl2 Combined file: Nếu 2 giải pháp trên dùng tối ưu cho các request về hình ảnh thì đây là giải pháp dành cho script và stylesheet. Tích hợp các file có nhiều cách, khi các scripts và các stylesheet thay đổi theo từng trang trên website, nhưng một phần của quá trình đó vẫn không thay đổi và đó là lý do tại sao họ không tích hợp toàn bộ vào một sripts hay một stylesheet, bởi khi đó khi người dùng chuyển trang vẫn có một số các scripts sẽ không cần phải load lại nữa. Ví dụ

<script src='http://abc.com/a.js' type='text/javascript'></script>
<script src='http://abc.com/b.js' type='text/javascript'></script>
<!-- Tích hợp 2 file thành 1 -->
<script src='http://abc.com/ab.js' type='text/javascript'></script>

#bl0 Put CSS at the Top
Theo nhiều thực nghiệp thấy rằng việc chuyển các stylesheets (css) tới HEAD sẽ làm trang web load nhanh hơn. Vì phần HEAD là phần được load đầu tiên nên CSS cũng sẽ không bị block bởi các quá trình load ảnh hoặc các file js.
- Vấn đề xảy ra khi đặt các đoạn CSS bên dưới nó sẽ ngăn cản đến rendering trong nhiều trình duyệt. Các trình duyệt làm điều đó vì không muốn phải thể hiện lại một element nếu style của chúng thay đổi. Vì thế, ngoài những trường hợp bất khả kháng còn lại chúng ta nên đặt các stylesheet trong phần Head của site.

#bl0 Put Scripts at the Bottom
Ngược lại với stylesheet, chúng ta nên đặt các đoạn script bên dưới, ngoài HEAD vì biết rằng khi load các đoạn script thì trình duyệt sẽ block tất cả các request lại cho đến khi hoàn tất quá trình load Script.
- Ngoài những đoạn script bắt buộc thực thi lúc load trang, còn lại chúng ta nên đặt chúng ở phía dưới cùng như những đoạn: jquery, hiệu ứng rê chuột...
- Đây là đoạn code đề xuất cho vấn đề load script

<script type="text/javascript">
 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
</script>

#bl0 Minimize size of files
- Nén nội dung là một cách tốt nhất để giảm dung lượng các file được request. Hãy chắc rằng bạn luôn có một bản sao cho trước khi nén chúng vì khi nén việc edit các file sẽ trở nên khó khăn. Chúng ta có thể nén các file *.js, *.html, *.css ... bằng những Công cụ trên SaliproIT Blog mà s đã rebuild.


#blsrc Tham khảo Yahoo! Developer

SHARE