Thủ thuật tăng tốc cho website

[nguyensinhhung]

Trong bài này mình chủ yếu viết về optimize on page (Tối ưu hóa websie) . Ta có một câu hỏi đặt ra là tại sao phải giảm thời gian chờ của một trang Web. Ví dụ vào một nhà hàng đông khách, việc có thời gian chờ là tất nhiên, vậy giữa việc bạn vừa vào nhân viên đến để bạn order luôn với việc bạn phải ngồi chờ một lúc lâu mới được order, bạn thích cảm giác nào hơn. Tất nhiên là muốn luôn và ngay rồi, đúng không. Tương tự với một trang web có hàng triệu người truy cập hàng ngày, việc hiển thị nhanh sẽ tạo cho người dùng cảm giác trang web này chạy nhanh, họ chẳng quan tâm dưới server chúng ta đã optimize những gì. Vì quan trọng nhất vẫn là cảm nhận ban đầu.
Nếu một trang web đã optimize đầy đủ hết ở trên server nhưng trang web vẫn chậm. Vậy liệu trang đó có bị lỗi hay là có vẫn đề gì không? Mặc dù hệ thống server tối ưu rất tốt nhưng tốc độ hiển thị rất chậm. Bạn có thể tưởng tượng nếu bạn vào một trang web, mỗi lần nhấp vào nội dung nào đó mà cứ phải đợi 10s đến 15s mới hiển thị. Đây là một vấn đề lớn trong việc phát triển một trang web. Một vấn đề khác nữa là ngay cả trên giao diện mobile được tinh giảm nhiều và nhẹ hơn so với bản PC mà vẫn xảy ra hiện tượng load chậm. Trong trường hợp bạn không có tài khoản admin để vào xem thử server được setup như thế nào và đã optimize phù hợp cho việc load trang,bạn có thể dùng thử The WebPageTest để xem tình trạng load trang như thế nào.
Đặt vấn đề là một trang web đã optimize đầy đủ hết ở trên server nhưng trang web vẫn chậm. Vậy liệu có do trang web bị lỗi hay là những vấn đề gì không?
Mặc dù hệ thống server tối ưu rất tốt nhưng tốc độ hiển thị vẫn chậm. Bạn có thể tưởng tượng khi bạn vào một trang web thì cái chỗ icon cứ quay vòng trong 10s đến 15s thì mới hiển thị và mỗi lần nhấp vào một nội dung khác thì cũng chờ tương tự. Đây là một vấn đề lớn trong việc phát triển một trang web.
Một vấn đề khác là ngay cả trên giao diện mobile là được tinh giản và nhẹ hơn nhiều so với bản PC mà vẫn xảy ra hiện tượng load chậm. Thì trong trường hợp bạn không có tài khoản admin để vào xem thử server được setup như thế nào và đã optimize phù hợp cho việc load trang, bạn có thể thử dùng The WebPageTest để xem thử tình trạng load trang như thế nào.



Đây là giao diện của tool WebPageTest.org

Khi sử dụng công cụ này bạn sẽ biết được tình trạng load nhanh hay chậm của từng trang. Trước tiên mình xin chia sẻ cách mà browser truyền tải các tệp tin giữa browser và server web, một request từ browser lên server thì mình thể chia thành các giai đoạn nhỏ như sau:
Đầu tiên là Queueing (đưa request vô hàng đợi)
Thứ 2 là DNS Lookup + Init Connection + Request sent (gửi request từ browser tới server)
Thứ 3 là Waiting (đợi server xử lý request cho đến khi trả về dữ liệu đầu tiên)
Cuối cùng là Content Download (tải nội dung trả ra từ server về browser).
Những giai đoạn này chúng ta hoàn toàn có thể optimize được, tuy nhiên các bước xử lý tệp tin và giảm thiểu dung lượng tệp cũng như các cơ chế cache thì chỉ có thể xử lý trên server, chúng ta chỉ có thể optimize thời gian chờ gửi request lên server.




Như các bạn thấy trong hình trên thì nó thể hiện thời gian Stalled (thời gian chờ từ lúc request trong hàng đợi tới lúc mở connection)




Hiện tại các browser, mỗi lần gửi request đi thì chỉ gửi được tối đa khoảng 6 request từ browser lên một server, có nghĩa là mỗi server có thể gửi trung bình 6 request để lấy dữ liệu về. Thì một website hiện tại có thể lên đến hàng chục thậm chí cả trăm request chỉ để hiển thị một trang web. Chúng ta có nhiều cách để tối ưu việc này, bằng cách giảm lượng request xuống. Có nhiều tài liệu khuyên nên gộm chung các CSS hay là các javascript để giảm bớt số lượng request cũng như là nén các file đó để giảm dung lượng nhỏ hơn nữa khi load về, thì nó sẽ giảm được thời gian load dữ liệu về làm cho page chạy nhanh hơn.
Theo kinh nghiệm cá nhân mình thì điều đó không sai, tuy nhiên nếu mình lạm dụng điều đó quá, ví dụ mình gom hết CSS làm một file thì chưa chắc nó tốt hơn khi mình chia thành nhiều file và tối ưu thứ tự sắp xếp. Giả sử trang của chúng ta có 10 file CSS và gom 10 file lại download 1 lần thì tốn 10 giây. Trong khi nếu biết cách chia nhỏ các file CSS đó ra và mình cho browser tải đồng thời 10 file đó trên nhiều thread khác nhau, thì trong 10 file đó file nặng nhất có thể tốn 3 giây để download, vậy nếu để 10 file đó download song song cùng lúc thì để tải hết tất cả sẽ tốn khoảng 3 giây. Thay vì gom 10 file lại down một lúc thì hết 10 giây. Rõ ràng việc tách ra sẽ tối ưu về load time hơn.




Còn về gom javascript thì theo kinh nghiệm của mình thì đây là công việc khó nhằn cho nhiều bạn newbie mới làm về front-end, đó là việc debug các lỗi javascript không thấy được, có nghĩa khi run thử thì rất là ok nhưng khi gom lại thì báo lỗi javascript và sẽ không biết bắt đầu từ đâu. Việc đó mất rất nhiều thời gian để dò lỗi. Còn về bản chất, khi một trang web được tải về thì nó phải tải hết file HTML về, sau đó nó sẽ tách các request của page đó và bỏ vào hàng chờ. Và các request được browser lần lượt push lên server và để nhận lại dữ liệu. Điều đó không có nghĩa là website phải down hết toàn bộ content trên trang rồi mới bắt đầu render.
Có một điều quan trọng các bạn cần chú ý là một trang web bắt đầu render khi file CSS cuối cùng trên trang đó được tải xong, nghĩa là page của bạn sẽ chỉ là màn hình trắng hoàn toàn cho đến khi nó load file CSS cuối cùng, rồi sau đó mới là các file javascript, hình ảnh mới load theo. Nên nếu mình có thể giảm thời gian render thì trang web sẽ hiển thị lên liền để user thấy, mặc dù trong khi đó javascript và các hình ảnh chưa hoàn toàn load xong. Đó là lý do một số hướng dẫn lập trình Front-end trên mạng có nói đến tại sao bạn phải đưa các file CSS lên đầu trang, tốt nhất là để trong thẻ header và toàn bộ file javascript để cuối trang. Vì phải ưu tiên load trước các file CSS trên page và khi load nhanh nhất có thể thì nó sẽ render ngay page mà không phải chờ các dữ liệu khác download xong. Có một vấn đề phát sinh ở đây là hiện tại rất nhiều trang web sử dụng nhiều file CSS khác nhau cùng với nhiều thư viện linh tinh khác, nhiều trường hợp nguyên một framework lên đến cả 100Kb mà chỉ sử dụng một vài chức năng trong đó, một vài component trình bày. Thật sự nếu được các bạn hãy làm cho file CSS nhỏ nhất mức có thể, phục vụ đủ cho các element trên page. Thì nó sẽ cải thiện rất nhanh phần page load.
Trong trường hợp bạn không thể bỏ hết các element, thì có một mẹo nhỏ đó là ưu tiên các CSS cho các element cần thiết nhất trong page đầu tiên hiển thị trên browser cho user xem, mẹo này có thuật ngữ trên mạng là Above The Fold (các thành phần hiển thị đầu tiên trong view của browser), mình chỉ cần ưu tiên hiển thị cái CSS này trước. Có một thuật thủ nhó ưu tiên cho load các file CSS cần thiết trước và các CSS không cần thiết sẽ load sau, cùng với các hình ảnh, javascript. Đó là gần đây các browser bổ sung thêm thuộc tính media trong các thẻ link chứa đường dẫn tới các CSS, các thuộc tính media này có chức năng thông báo cho browser biết file CSS đó dùng để định dạng cho layout nào. Có một số layout cơ bản như: print dành cho hiện thị nội dung in, screen để hiển thị trên cả màn hình máy tính, điện thoại và một số media khác áp dụng responsive cho trang web. Cần lưu ý chỉ ưu tiên file CSS nào cần thiết cho Above The Fold, các bạn có thể tối giản các file CSS để cải thiện load page nhanh hơn.
Chúc các bạn thành công trong việc cải thiện time-load nhé.

[laptopcugiare.com.vn]

tks bạn đã chia sẻ . trình bay hơi khó đọc 1 chút

[lachongtech]

Bên em dùng Host của VPS trên server công ty, phải nói là rất chậm. Giờ em muốn web có thể tải trang nhanh hơn thì nên khắc phục những điều gì ạ? chẳng hạn như ram, chia server riêng hay mở rộng băng thông,... Trước giờ em toàn dùng hosting web của các bên mua tên miền nên giờ công ty sử dụng trên VPS mà em không phải IT nên chẳng biết khắc phục sao