Hướng dẫn dùng firstpage trong PHP
Tại sao phải tối ưu hóa WebsiteTheo số liệu cung cấp bởi google Show
SPEED DOES MATTERLoad-time tăng 1 giây:
Ở Việt Nam, website của Thế giới di động được giao KPI hiển thị dưới 300ms, còn tiki và đặc biệt là sendo có vẻ không quan tâm đến việc này lắm. Các bạn có thể dễ dàng thấy trải nghiệm người dùng ở đâu tốt hơn, ở đâu mọi người mua đồ nhiều hơn. Dù sao thì trong tương lai, các website chắc chắn sẽ phải để ý đến việc optimize webservice. Đây vừa là cơ hội và cũng là thách thức với các lập trình viên. Liệu tất cả những lý do trên đã khiến các bạn phải ngồi vào bàn và bỏ thời gian ra làm một website chạy nhanh hơn 1-2 giây? Long story short:
Cùng nhìn lại một chút quá trình vào một trang web của người dùng theo một flow đơn giản:
Tin tốt là chúng ta có thể optimize trang web ở tất cả các bước còn tin xấu là ở mỗi bước, thời gian cải thiện có thể chỉ được tính bằng ms (1/100 giây 😅). Có nên thực sự quan tâm?
Làm thế nào?
Sau tất cả, google là công cụ tìm kiếm lớn nhất thế giới, làm mọi thứ theo chuẩn của họ chắc chắn không phải một lựa chọn tồi. Để đầy đủ hơn, mình sẽ thêm một số phương pháp và chia thành 4 loại tương ứng với từng giai đoạn khi người dùng truy cập website. Loại 1: User → InternetHoàn toàn nằm ngoài khả năng của chúng ta, tuy nhiên vẫn có thể đảm bảo việc khác hàng có được trải nghiệm đủ tốt với tốc độ mạng cực chậm bằng việc xây dựng progressive web app và sử dụng service-worker cho trang web của bạn. Loại 2: Internet → Server1. Sử dụng DNS serverPhân tích tốc độ của các DNS providerViệc chuyển từ URL sang địa chỉ IP server do DNS server đảm nhận, và nó cũng chỉ là một máy tính, nhanh chậm khác nhau. Các dịch vụ cung cấp host thường cũng sẽ có kèm theo dịch vụ cung cấp DNS, tuy nhiên tốc độ có thể khác nhau → tốc độ load trang cũng bị phụ thuộc. Cách khắc phục
2. Sử dụng CDNPhân tích tốc độ của các CDN providerContent Delivery Network (CDN) là hệ thống các edge servers được đặt tại các vị trí địa lý khác nhau để có thể truyền tải nội dung từ một origin ở khoảng cách xa nhanh chóng hơn nhờ cơ chế cache. Thay vì đến tận server (origin, ở xa) để lấy các tài nguyên thì người dùng có thể lấy ngay tại CDN (distribution, ở gần), chính vì thế load-time sẽ được giảm đáng kể. Để hiểu rõ hơn những lợi ích của việc sử dụng CDN bạn có thể đọc bài viết vô cùng có tâm của sempai Đinh Hoàng Long về CDN. Theo cdnperf.com, tính đến thời điểm này JSDELIVR đang dẫn đầu trong việc cung cấp dịch vụ CDN trên toàn cầu. Ở châu Á, vị trí quán quân thuộc về CDNetworks. Cloudflare CDN, Azure và CloudFront của AWS cũng lọp top 10. Cloud CDN (của google) mà mình đang dùng ở vị trí nào đó không xuất hiện trong bảng xếp hạng 😭 Loại 3: Server3. HostingThời đại của cloud computing, các service hầu hết được đưa lên mây. Việc chọn một hosting service phù hợp với nhu cầu của trang web cũng là một yếu tố quan trọng ảnh hưởng đến tốc độ của trang web.
Nếu có thể, hãy tham khảo ý kiến từ một lập trình viên, nhân viên quản trị hệ thống hoặc sử dụng dịch vụ của một số nhà cung cấp lớn như Amazon web service, Microsoft Azure, Google cloud,… qmau.me đang được host với 300$ free của Google cloud VPS, CPU trung bình khoảng 1% 😅 4. Cải thiện tốc độ phản hồi của serverGoogle rất khó tính, họ cho rằng phản hồi của server nên dưới 200ms. Việc server phản hồi chậm có thể do một trong những lý do sau:
Cách khắc phục
5. Tối giản hoá các tài nguyênKhi load trang web, các file Cách khắc phục
6. Tối ưu hiển thị ảnhẢnh có thể coi là tài nguyên chiếm nhiều load-time nhất của một trang web, việc tối ưu được hiển thị ảnh đóng vai trò quan trọng trong việc cải thiện load-time của một trang web. Ngày nay người dùng sử dụng rất nhiều các thiết bị khác nhau để có thể truy cập vào trang web của bạn. Với layout bạn có thể giải quyết bằng responsive design, còn với ảnh câu chuyện sẽ rắc rối hơn một chút. Cách khắc phục
7. Tối ưu hoá việc load CSSMột trang web sẽ được hiển thị khi load đầy đủ html, css, js. Nếu file css, js có kích thước quá lớn sẽ khiến trang web bị render-blocking, khiến tốc độ load trang tăng đáng kể. Cách khắc phục
8. Tổ chức thứ tự loadTrong Lighthouse audits của Chrome, tốc độ hiển thị first page của trang web là một trong nhưng tiêu chí được đánh giá rất cao trong mục Performance. Để người dùng có trải nghiệm tốt nhất thì việc ưu tiên hiển thị những nội dung cơ bản (above-the-fold – ATF) của trang web là rất quan trọng. Cách khắc phục
9. Xoá bỏ các Javascript gây ra render-blockingTrong khi browser tạo ra các DOM tree, nếu gặp một script, nó sẽ dừng lại và thực hiện xong script đó rồi mới tiếp tục tạo ra các DOM. Chính vì thế javascript có thể coi là một nguyên nhân khiến tốc độ tải trang bị chậm đi rất nhiều. Cách khắc phục
10. Hạn chế redirect tại landing pageViệc redirect người dùng tại landing page sẽ đem lại trải nghiệm xấu và tăng thời gian load time của trang/ Ví dụ:
Các khắc phục
Loại 4: Server → User11. Sử dụng nén dữ liệuHầu hết các browser hiệnt tại đều hỗ trợ và sử dụng gzip cho việc nén dữ liệu, nhờ lượng dữ liệu truyền tải qua network ít đi → tăng tốc độ tải trang. Cách khắc phục
12. Tận dụng bộ nhớ cache của browserMỗi lần người dùng truy cập một trang nào đó, toàn bộ tài nguyên của trang sẽ được load. Điều đó có nghĩa là nếu trang web của bạn không sử dụng cache, mỗi lần load trang sẽ load lại toàn bộ các file css, script dù nó có thể giống y hệt trang trước đó → tăng load-time. Các browser đều có bộ nhớ cache nên hãy tận dụng nó để tăng tốc độ load trang của bạn, nhưng tuyệt đối không dùng máy của khách để đào bitcoin. Cách khắc phục
Challenge
TL;DR
|