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.

Đầ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ậphttp://gtmetrix.com/  và điền vào tên site của bạn.

 Sau đây là yêu cầu để chúng ta tối ưu tốc độ load website.

 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

 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ụ

1
2
3
4
<imgsrc="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

 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ế.

 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ụ

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

 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.

 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
 // Add a script element as a child of the body
 functiondownloadJSAtOnload() {
 varelement = 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);
 elseif(window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 elsewindow.onload = downloadJSAtOnload;
</script>

 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.