Khi bạn đã có một website , nhưng bạn lại chưa quan tâm là tốc độ hiển thị của website đó ra sao, nó có lý tưởng cho người dùng hay không? Thời gian tải website càng lâu, càng làm người dùng mất niềm tin và nhanh chóng thoát khỏi website đó. Bạn sẽ làm gì nếu 1 website tải mãi vẫn chưa hiển thị được  ? Chắc bạn cũng như tôi là thoát khỏi website đó và tìm 1 website cùng chủ đề nhưng có hiệu suất cao hơn đúng không ? 

Chúng ta cùng nghiên cứu công cụ tối ưu hóa fontend website khá hiệu quả mà yahoo cung cấp cho các webmaster cũng như designer. Một addon của Firefox giúp bạn xác định những yếu tố cần chỉnh sửa để tăng tốc độ tải trang của mình: YSlow. Nó dựa trên các tiêu chí đánh giá chất lượng của Yahoo!  Sau đây mình  xin điểm qua một số chức năng cơ bản của YSlow và hướng dẫn các bạn tối ưu hóa website từng phần.

Make fewer HTTP requests - Hạn chế các yêu cầu xử lý

80% thời gian mà máy chủ làm việc phần lớn là để xử lý frontend. Trong đó hầu hết là để xử lý các yêu cầu liên quan đến việc download các hình ảnh, flash, stylesheets, scripts... Đây là yếu tố quan trọng nhất ảnh hưởng đến thời gian tải trang. Bạn cần xem xét lại các yếu tố hình ảnh, flash, css... trên website và giảm thiểu chúng ở mức tốt nhất có thể. Một số phương án bạn có thể sử dụng như :

-Kết hợp file:bạn có thể gộp nhiều script lại thành 1 (như với javascript, stylesheet... chẳng hạn). Thay vì cần nhiều HTTP request để gọi từng file, chúng ta chỉ cần gọi 1 lần.
- CSS Sprites: cái này khá hay nhưng hơi khó đối với các bạn không rành CSS . Nói nôm na, nó là việc bạn sử dụng 1 hình ảnh bao gồm nhiều hình ảnh khác nhau và sử dụng thuộc tính background-image và background-position của CSS để lựa chọn hình ảnh thích hợp (theo vị trí) làm background tại một vị trí. Bạn có thể xem thêm ví dụ tại đây.
-Image maps: kết hợp nhiều hình ảnh lại thành 1 hình.

Use a Content Delivery Network - Phân tán tài nguyên

Nhắc lại một lần nữa là 80-90% thời gian tải trang là để giành cho việc download hình ảnh, flash, stylesheets, scripts... và việc xử lý nhiều reuquest sẽ làm cho máy chủ web của bạn gặp nhiều bất lợi trong việc xử lý nội dung chính. Thay vì để máy chủ đảm đương quá nhiều công việc, chúng ta nên phân tán những luồng xử lý đi những nơi khác để giảm tải cho máy chủ bằng cách thiết lập một hệ thống phân tán tài nguyên. Nói đơn giản là: chứa những tài nguyên khác nhau ở những hosting, máy chủ khác nhau và chuyên biệt cho việc xử lý tài nguyên đó.

Add Expires headers

Đơn giản là thêm thời gian cache cho các trang đã tải. Giúp cho lần sau quay lại của người dùng sẽ nhanh hơn. Expires là gì thì chắc mọi người nắm rồi nên thôi tôi không nói nữa nhé.

Đây là đoạn tôi sẽ thêm vào .htaccess của mình: 
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

Còn nếu trong php thì bạn có thể sử dụng cái này:
<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>
Compress components with gzip - Nén dữ liệu trước khi chuyển đi

Ở đây mình bổ sung thêm 1 đoạn code .htaccess
# Enable gzip (deflate) compression
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

Dòng đầu là ghi chú thôi . dòng thứ 2 là enable tính năng gzip compression. AddOutputFilterByType là các loại file sẽ được nén lại. Các loại file:

       text/html - đây là định dạng xuất ra trước khi trả về người dùng của webpage rồi. Không có gì bàn cãi.

       text/css - Giành cho các file stylesheet.

       application/x-javascript - Giành cho các ứng dụng javascript các phiên bản.

Put CSS at top - Đặt CSS lên đầu trang

Chuyển các stylesheets tới documents HEAD sẽ làm trang web load nhanh hơn. Bởi khi chuyển các stylesheets vào HEAD cho phép trang trả lại nhanh hơn.Người dùng cuối quan tâm tới về năng lực trang web dựa vào thời gian load trang web nhanh. Và  mình  thấy các trình duyệt hiển thị bất cứ nội dung nào có thể. Nó là vấn đề cụ thể và quan trọng cho những trang với nhiều nội dung và người dùng sử dụng Internet với kết nối tốc độ thấp. Theo nghiên cứu thì khi các trình duyệt web load một trang thì nhanh nhất là các header, rồi đến các thanh công cụ, logo của trang web.....Vấn đề xảy ra khi các stylesheets gần phần dưới của các văn bản nó sẽ cấm quá trình trả lời của hầu hết các trình duyệt, bao gồm cả IE. Các trình duyệt block quá trình trả lại nhằm hạn chế việc hiển thị lại các thành phần của trang. 

Put JavaScript at bottom - Javaascript đặt cuối trang.

Các master thì không phải nói thêm về cái này. Chỉ giải thích thêm 1 tí cho các newbie thôi  . Điều này là cần thiết vì các Javascript sẽ làm ảnh hưởng không nhỏ đến thời gian tải trang. Đặt javascript bên dưới để javascript load sau cùng và không ảnh hưởng nhiều đến việc hiển thị nội dung (người dùng có thể đọc nội dung trong lúc đợi javascript load).

Tag: kiến thức thiết kế web, tư vấn thiết kế web, quảng bá website, website VN, chuyên gia seo, tạo liên kết, dịch vụ seo, seo và quảng cáo, google ăn tạp, quảng cáo online

Highlandsoft.com.vn  _SEO Zinaki ( Nguồn Vnwebmaster )