14 thủ thuật tăng tốc Website

14 thủ thuật tăng tốc Website1. Hạn chế HTTP requests. 2. Sử dụng CDN (Content Delivery Network = Mạng giao dịch nội dung: Hệ thống các máy tính được kết nối với nhau qua Internet để truyền nội dung tới người sử dụng). 3. Đưa thêm Expires header. 4. Nén các thành phần (Gzip, hay GNU zip, là ứng dụng phần mềm miễn phí được dùng để nén file). 5. Đưa CSS lên đầu. 6. Chuyển JS (JavaScript) xuống cuối. 7. Tránh các biểu thức CSS. 8. Đặt CSS và JS ở bên ngoài (external files). 9. Giảm quá trình...
Nội dung trích xuất từ tài liệu:
14 thủ thuật tăng tốc Website 14 thủ thuật tăng tốc Website1. Hạn chế HTTP requests.2. Sử dụng CDN (Content Delivery Network = Mạnggiao dịch nội dung: Hệ thống các máy tính được kếtnối với nhau qua Internet để truyền nội dung tớingười sử dụng).3. Đưa thêm Expires header.4. Nén các thành phần (Gzip, hay GNU zip, là ứngdụng phần mềm miễn phí được dùng để nén file).5. Đưa CSS lên đầu.6. Chuyển JS (JavaScript) xuống cuối.7. Tránh các biểu thức CSS.8. Đặt CSS và JS ở bên ngoài (external files).9. Giảm quá trình tra cứu DNS.10. Thu nhỏ JS.11. Tránh chuyển hướng site (redirect).12. Loại bỏ các đoạn script trùng lặp (duplicatescripts).13. Tắt ETags.14. Làm cho AJAX nhỏ và có thể lưu trữ được(cacheable).Công cụ để hỗ trợ: YSLow Plugin for Firefox(Link: http://developer.yahoo.com/yslow/, nóichung công cụ đó không ổn định lắm, cùng mộtsite mà mỗi lúc kết luận 1 khác, tớ chưa biết cáchdùng)1. Minimize HTTP RequestsGiảm tối đa yêu cầu đến server là nguyên tắc đầu tiênmà Yahoo đưa ra. Một trang web chứa bao nhiêu đốitượng (CSS, HTML, hình ảnh…) thì khi người dùngtruy cập bấy nhiêu yêu cầu (request) được gửi đếnserver. Chúng ta đã biết, càng nhiều yêu cầu thì cànglâu đáp ứng, hãy thử những cách sau để giảm yêucầu đến server.* Nếu có thể, gộp những hình ảnh nền (background-image) để giảm số lần yêu cầu xuống.* Sử dụng background-image trong CSS tối đa có thểđể hiển thị hình ảnhViệc này rất có lợi cho lần đầu viếng thăm của ngườidùng bằng cách để lại ấn tượng tốt về tốc độ truycập.2. Use a Content Delivery NetworkThời gian đáp ứng hay hiểu một cách khác là tốc độtruy cập của website phụ thuộc vào khoảng cách địalí của người xem với server. Trong trường hợp nhấtđịnh bạn nên chọn một server gần với đối tượng bạnđọc nhất. Đó là lựa chọn đúng đắn đối với những cánhân hoặc công ty nhỏ.Nhưng với những mục đích lớn lao hơn, ở đây làlượng độc giả lớn và phủ khắp. Bạn nên sử dụngContent Delivery Network (CDN). CDN là một mạnglưới các server được bố trí rộng rãi. Mỗi đối tượngđộc giả sẽ được phục vụ bởi một server nhất định saocho đảm bảo thời gian đáp ứng là cao nhất. Nhiềucông ty lớn đều có CDN riêng, nhưng nếu bạn đặthiệu quả chi phí lên cao thì có thể lựa chọn nhữngnhà cung cấp sau: Akamai Technologies, MirrorImage Internet, or Limelight Networks.3. Add an Expires HeaderTrình duyệt nào cũng có bộ nhớ đệm cho mình. Điềunày giúp hạn chế yêu cầu đến Server như ở điều 1 đãnói. Cơ chế hoạt động cơ bản là những gì không thayđổi thì trình duyệt sẽ không yêu cầu server để lấyphiên bản mới nữa. Hãy dùng “Expires header” trongHTTP Respond để báo với trình đuyệt về thời gian tốiđa mà trình duyệt có thể cache thông tin đó.Với những đối tượng cố đinh như javascripts, hìnhảnh, bạn có thể để thời gian cache lâu hơn một chút.Bạn đừng lo về vấn đề update cache khi thay đổibằng cách thay đổi tên đối tượng. Trình duyệt sẽ tựđộng cập nhật.Ví dụ: Yahoo_2_1_3.js4. Gzip ComponentsĐa số trình duyệt đều hỗ trợ Gzip với HTTP Respond.Vì thế, sử dụng Gzip để nén dữ liệu trả lại ngườidùng là rất khả thi và hiệu quả. Gzip giúp tăng tốc độtruy cập website và giảm tối thiểu băng thông của cảngười dùng lẫn server.5. Put CSS at the TopTrong quá trình theo dõi, nghiên cứu tối ưu hóaYahoo!, những nhà phát triển đã phát hiện ra rằng đặtCSS ở trên cùng sẽ giúp website hiển thị nhanh và tốthơn đặc biệt trong trường hợp website của bạn lớnvà có nhiều đối tượng được đặt ở trên đó.Trường hợp nếu bạn đặt ở giữa hoặc ở cuối thì trìnhduyệt sẽ sử dụng giao diện mặc định sau đó đổichúng lại khi tải xong CSS của bạn. Như vậy việc xửlí sẽ gia tăng và dĩ nhiên là tốc độ sẽ giảm xuống rấtnhiều. Bên cạnh đó, người dùng sẽ cảm thấy khóchịu vì họ sẽ phải nhìn một trang web chưa có địnhdạng gì khi truy cập. Đặc biệt một số phiên bản trìnhduyệt còn cấm việc đặt CSS ở dưới cùng.6. Move Scripts to the BottomThông thường Scripts chỉ nên đặt trên dùng nếu ảnhhưởng của nó bao quát toàn trang mà thôi. Còn nếukhông Yahoo khuyên bạn nên để dưới cùng của trangđối với những mục đích không quan trọng lắm (thốngkê, hiệu ứng…).Trường hợp bạn dùng Scripts cho một đối tượng thìbạn nên đặt Scripts lên trên đối tượng đó (nếu có thể)thay vì bạn để nó vào thẻ như nhiều trang đã hướngdẫn.7. Make JavaScript and CSS ExternalCó khi mình tự đặt câu hỏi là việc chèn Javascripts vàCSS thẳng hay để liên kết bên ngoài tốt hơn? Câu trảlời của Yahoo ở đây là nên để liên kết bên ngoài. Vìmột lí do đơn giản những file đó sẽ được cache lại ởphía trình duyệt. Về phía người dùng họ sẽ khôngphải tải lại chúng lần nữa giảm được băng thông chocả họ và server. Đồng thời tăng tốc duyệt trang web. ...