Các cách tăng tốc độ website (site speed)

Các cách tăng tốc độ website (site speed) Google thừa nhận site speed tức tốc độ website là một trong những yếu tố ảnh hưởng kết quả xếp hạng. Nhưng không phải chỉ thế, site speed còn ảnh hưởng lớn đến người dùng (tính khả dụng tức Usability). Dĩ nhiên nếu tốc độ tải site nhanh thì website của bạn sẽ được nhiều lượt xem (pageviews) hơn – một trong những yếu tố ảnh hưởng đến chiến dịch bán quảng cáo của bạn. Bài viết rất hữu ích dưới đây do Anh Khoa (PC World VN) dịch từ Yahoo! Developer Network...
Nội dung trích xuất từ tài liệu:
Các cách tăng tốc độ website (site speed) Các cách tăng tốc độ website (site speed) Google thừa nhận site speed tức tốc độ website là một trong những yếu tố ảnh hưởng kết quả xếp hạng. Nhưng không phải chỉ thế, site speed còn ảnh hưởng lớn đến người dùng (tính khả dụng tức Usability). Dĩ nhiên nếu tốc độ tải site nhanh thì website của bạn sẽ được nhiều lượt xem (pageviews) hơn – một trong những yếu tố ảnh hưởng đến chiến dịch bán quảng cáo của bạn. Bài viết rất hữu ích dưới đây do Anh Khoa (PC World VN) dịch từ Yahoo! Developer Network giới thiệu 9/35 phương pháp tăng tốc website. Các lập trình viên trên Yahoo! Developer Network cho biết hiện có khoảng 35 phương pháp, kỹ thuật thường được sử dụng ngay trong khâu thiết kế để trang web “hiện hình” nhanh hơn. Các lập trình viên trên Yahoo! Developer Network cho biết hiện có khoảng 35 phương pháp, kỹ thuật thường được sử dụng ngay trong khâu thiết kế để trang web “hiện hình” nhanh hơn. Về cơ bản, các “chiêu “ này được phân vào 7 nhóm, gồm Content (nội dung), Server (máy chủ), Cookie, CSS, Java Script, Image (hình ảnh), Mobile (di động), và người thiết kế website sẽ tùy thực tế mà khai thác, kết hợp các kỹ thuật này với nhau sao cho đạt kết quả tốt nhất. Trong bài này, chúng ta hãy cùng điểm qua 9 phương pháp thuộc nhóm Content và 21 phương pháp còn lại xin được gửi đến các bạn ở kỳ sau. 1) Hạn chế yêu cầu HTTP Thực tế cho thấy, với mọi trang web hay website, khi nhận được yêu cầu hiển thị thì khoảng 80% quãng thời gian mà người dùng phải chờ đợi thường dành cho công tác truyền nhận dữ liệu giữa máy chủ dịch vụ (hay nói rõ hơn là nơi lưu trữ trang web) với trình duyệt. Trong khi đó, hầu hết thời gian “chết” này lại bị “cột chặt” với việc tải về tất cả thành phần trong một trang web như hình ảnh, định dạng (stylesheet), mã lệnh kịch bản (script), nội dung Flash,… để trình duyệt có thể dựng lại trang web trên màn hình (máy tính hay thiết bị di động) của người dùng. Do đó, giảm số lượng thành phần các nội dung dạng này đồng nghĩa với việc giảm số lượng yêu cầu HTTP (HTTP request) từ trình duyệt. Một cách để giảm số lượng các thành phần trong một trang web là cố gắng làm đơn giản thiết kế của chính trang web đó. Tuy nhiên, câu hỏi mà nhiều nhà thiết kế web thường đặt ra ở đây là “có cách nào xây dựng một trang web có nội dung phong phú trong khi vẫn đảm bảo tốc độ đáp ứng /hiển thị nhanh hay không?”. Hiện có vài kỹ thuật giúp giảm số lượng yêu cầu HTTP nhưng vẫn hỗ trợ thiết kế trang web phong phú, chẳng hạn: “Gom” các tập tin (Combined files) là giải pháp cơ bản để giảm số lượng yêu cầu HTTP, bằng cách kết nối tất cả script có trên trang web vào một tập tin script duy nhất, và tương tự là kết hợp tất cả CSS vào một tập tin stylesheet. Các tập tin được nối lại với nhau gây khó khăn hơn cho người lập trình (và cả website nữa) vì script và stylesheet thường khác nhau ở mỗi trang web. Trong khi đó, CSS Sprites là phương thức được nhiều lập trình viên thích sử dụng để giảm số lượng yêu cầu HTTP, bằng cách giảm số lần yêu cầu truy xuất hình ảnh. Cụ thể, người lập trình và thiết kế trang web cần kết hợp các hình nền vào một hình duy nhất và sau đó sử dụng công cụ lập trình (như CSS background-image và background-position) để yêu cầu hiển thị đúng phần ảnh cần thiết. Tương tự, phương pháp Image maps cũng kết hợp nhiều ảnh vào một ảnh duy nhất. Với phương pháp này, dung lượng nội dung hình ảnh cần hiển thị sẽ không đổi (bởi bằng tổng các tập tin hình ảnh thành phần trước đó), tuy nhiên phương pháp “góp gạo” này làm cho số lần yêu cầu HTTP giảm đến mức tối thiểu, do đó cũng giúp trang web đáp ứng nhanh hơn rất nhiều. Lưu ý, phương pháp Image maps chỉ có thể áp dụng khi các ảnh xuất hiện cạnh nhau trên trang web. Ngoài ra, còn có phương pháp Inline Image, sử dụng cú pháp data: URL để nhúng dữ liệu dạng hình ảnh vào ngay trong trang web và dĩ nhiên việc này sẽ làm tăng kích thước của tập tin HTML. Tuy nhiên, kết hợp các ảnh nhúng trong stylesheet (được lưu đệm) là cách để giảm số lần yêu cầu HTTP, đồng thời tránh hiện tượng tăng dung lượng của trang web. Đáng tiếc, phương pháp này hiện chưa được hỗ trợ trên tất cả trình duyệt phổ biến. Nhìn chung, giảm số lượng yêu cầu HTTP là phương pháp đầu tiên bạn cần nghĩ đến khi muốn cải thiện tốc độ hiển thị cũng như thời gian đáp ứng của trang web. 2) Giảm truy vấn DNS Về cơ bản, hệ thống phân giải tên miền (Domain Name System) có nhiệm vụ “ánh xạ” tên máy chủ (hay trang web) với địa chỉ IP, giống như là danh bạ điện thoại. Thông thường, cần từ 20 đến 120 miligiây để DNS tìm kiếm địa chỉ IP của một tên máychủ (hostname) và trình duyệt sẽ không thể tải về bất kỳ nội dung gì từ hostname cho đến khi tác vụ tìm kiếm DNS hoàn tất. Các tìm kiếm DNS thường được lưu lại để trình duyệt chạy nhanh hơn. Thông tin này có thể lưu trên máy chủ chuyên dụng của ISP hay máy chủ trong mạng nội bộ, tuy nhiên đôi khi cũng có thể lưu trên máy tính của người dùng cá nhân. Thông tin về DNS nằm trong vùng nhớ riêng của HĐH (như “DNS Client service” trên Microsoft Windows). Hầu hết trình duyệt có vùng nhớ lưu trữ riêng, độc lập với vùng nhớ DNS của HĐH. Khi trình duyệt còn lưu thông tin DNS, nó sẽ không không làm phiền HĐH tiến hành truy vấn. Mặc định, Internet Explorer lưu thông tin DNS trong thời hạn 30 phút, được xác định bởi thông số DnsCachTimeOut trong Registry, trong khi đó Firefox chỉ lưu thông tin này trong vòng 1 phút, được kiểm soát bởi thông số cấu hình network.dnsCacheExpiration. Khi vùng nhớ DNS trống (với cả trình duyệt và HĐH), số lượng truy vấn DNS bằng đúng số lượng hostname được đề cập trong trang web. Chúng bao gồm các hostname được sử dụng trong địa chỉ URL, hình ảnh cũng như các tập tin script, stylesheet, đối tượng ...