Là trang web của bạn quá chậm? . Thậm chí nó không phải là trường hợp;
Tại sao thời gian tải trang lại quan trọng?Thời gian tải của một trang có liên quan trực tiếp đến hiệu suất cảm nhận của trang web
Khi nói đến các trang web, nếu mất hơn 3 giây để tải, bạn sẽ mất một nửa số khách truy cập trước khi họ đến trang web của bạn
- Khả năng hiển thị — Google xem xét thời gian tải trang khi xếp hạng trang web của bạn trong kết quả tìm kiếm. Do đó, thời gian tải trang web của bạn ảnh hưởng đến mức độ dễ dàng mà người dùng có thể tìm thấy nó trên web
- Chuyển đổi — Trang của bạn tải càng nhanh, bạn càng có nhiều tương tác từ người dùng. Trang web chậm, giết chuyển đổi. Người dùng sẽ miễn cưỡng sử dụng trang web của bạn và thực hiện Kêu gọi hành động [CTA] nếu trang web của bạn mất quá nhiều thời gian để tải. Nó dẫn đến sự thất vọng của người dùng và kết quả là họ sẽ rời khỏi trang web của bạn mà không mua sản phẩm hoặc sử dụng dịch vụ của bạn
- Khả năng sử dụng — Thời gian tải trang web của bạn càng tốt thì người dùng sẽ càng hài lòng. Do đó, tỷ lệ giữ chân khách hàng sẽ cao hơn
Hãy xem xét một vài ví dụ dựa trên nghiên cứu được thực hiện bởi HubSpot
- Nếu Yahoo giảm thời gian tải trang bằng 0. 4 giây, lưu lượng truy cập có thể tăng 9%
- Trang bị chậm 1 giây có thể khiến Amazon mất 1 đô la. Doanh thu 6 tỷ mỗi năm
- Độ trễ 2 giây của tìm kiếm Bing sẽ dẫn đến, 4. Mất 3% doanh thu trên mỗi khách truy cập, 3. Giảm 75% số lần nhấp và 1. Giảm 8% trong các truy vấn
Theo các sự kiện trên, bạn có thể thấy thời gian tải trang quan trọng như thế nào đối với trang web của bạn
Các yếu tố ảnh hưởng đến thời gian tải trang và mẹo, thủ thuật để tối ưu hóaNhiều yếu tố ảnh hưởng đến thời gian tải trang. Trong số đó, tôi đã liệt kê năm lỗi hàng đầu mà tôi gặp phải khi xây dựng trang web
1. Một số lượng lớn các yêu cầu HTTP
Yêu cầu HTTP được thực hiện bất cứ khi nào trình duyệt cần tìm nạp tệp, trang hoặc hình ảnh từ máy chủ web. Bạn có thể theo dõi cách ứng dụng của mình thực hiện nhiều yêu cầu mạng thông qua tab Network trong Công cụ dành cho nhà phát triển
Trình duyệt thường giới hạn số lượng yêu cầu đồng thời trong khoảng 4–8. Do đó, bạn cũng không thể thực hiện song song một số lượng lớn yêu cầu
Nghiên cứu được thực hiện bởi Yahoo nói rằng 80% thời gian tải ứng dụng của bạn phụ thuộc vào các yêu cầu HTTP. Giảm số lượng yêu cầu HTTP sẽ tăng thời gian tải trang của bạn
Bạn có thể làm như sau để giảm số lượng yêu cầu HTTP
- Kết hợp các tệp CSS/JS — Các tệp CSS của bạn, cũng như các tệp JS, có thể được kết hợp thành một tệp thay vì truy xuất một số tệp từ máy chủ. Vì tất cả các tệp CSS đều chặn hiển thị nên việc giảm các tệp CSS sẽ cải thiện đáng kể thời gian tải trang
- Chỉ tải những gì cần thiết — Thay vì tải tất cả hình ảnh của ứng dụng cùng một lúc, chỉ tải chúng khi cần thiết. Phương pháp này gọi là Lazy Loading hay On-demand loading. Thay vì tải một hình ảnh ở cuối trang, khi người dùng đến trang web, bạn có thể tải nó khi người dùng cuộn đến vị trí cụ thể đó
- Kích hoạt bộ nhớ đệm của trình duyệt — Bạn có thể cho phép lưu vào bộ nhớ đệm hình ảnh hoặc nội dung tĩnh của trang web của mình, điều này sẽ không thay đổi thường xuyên. Khi người dùng truy cập trang web lần thứ hai, bộ đệm có thể tải nội dung này mà không phải gửi yêu cầu HTTP mới đến máy chủ. Điều này làm cho việc tải nội dung nhanh hơn
- Hỗ trợ HTTP/2 trong máy chủ của bạn — Với HTTP/2, chỉ một kết nối được tạo từ trình duyệt đến máy chủ để tải trang web và cho phép nhiều yêu cầu cùng lúc. Đó là cách hiệu quả hơn so với việc tạo một kết nối mới cho từng tài nguyên
2. Không có CDN
Nếu không có CDN cho trang web của bạn, thời gian tải sẽ tăng lên khi vị trí thực của người dùng cách xa máy chủ. Các độ trễ này hiển thị vì nó ảnh hưởng đến tất cả các yêu cầu HTTP đến máy chủ
Sử dụng CDN sẽ cải thiện thời gian tải trang
Sử dụng CDN sẽ cho phép người dùng tìm nạp các tài nguyên cần thiết cho trang web từ máy chủ gần vị trí của họ nhất. Máy chủ trong CDN được phân phối trên nhiều vị trí địa lý khác nhau. Phương pháp này có thể hơi tốn kém, nhưng nó là một cách hiệu quả để cải thiện thời gian tải ứng dụng của bạn
Ví dụ: nếu máy chủ ban đầu của bạn ở California, thì Mạng phân phối nội dung của bạn có thể trông như thế này
Nguồn
Tuy nhiên, điều quan trọng là phải định cấu hình đúng CDN để lưu nội dung vào bộ nhớ cache với các giá trị Thời gian tồn tại [TTL] phù hợp để sử dụng hiệu quả
Nhưng điều gì sẽ xảy ra với yêu cầu đầu tiên hoặc khi bộ đệm CDN hết hạn, vì nó có thể di chuyển đến điểm gốc để tìm nạp dữ liệu?
Đây là nơi mà mọi thứ trở nên thú vị. Nếu bạn đang hoạt động ở quy mô có tác động tải dữ liệu từ nguồn gốc cao, thỉnh thoảng bạn có thể cân nhắc khởi động lại CDN của mình để khôi phục lại bộ đệm
Ngoài ra, hãy nhớ rằng, hầu hết các dịch vụ CDN đều sở hữu đường trục mạng của họ, nơi họ có thể cung cấp Chất lượng dịch vụ cao hơn so với internet. Điều này sẽ giảm mất gói dẫn đến thời gian tải nhanh hơn
Mẹo. Chia sẻ các thành phần có thể tái sử dụng của bạn giữa các dự án bằng Bit [Github]
Bit giúp dễ dàng chia sẻ, lập tài liệu và sử dụng lại các thành phần độc lập giữa các dự án. Sử dụng nó để tối đa hóa khả năng tái sử dụng mã, duy trì thiết kế nhất quán, cộng tác theo nhóm, tăng tốc độ phân phối và xây dựng các ứng dụng mở rộng quy mô
Bit hỗ trợ Node, TypeScript, React, Vue, Angular, v.v.
Thí dụ. khám phá các thành phần React có thể tái sử dụng được chia sẻ trên Bit. nhà phát triển
3. Kích thước tệp và kích thước trang lớn
Truy xuất một tệp lớn hoặc một trang từ máy chủ web sẽ tiêu tốn rất nhiều thời gian. Tìm nạp một vài tệp lớn như vậy làm cho kích thước trang lớn và khiến thời gian tải trang lâu hơn
Kích thước tệp JS trung bình. com
Giảm kích thước tệp bằng cách cho phép nén có thể cải thiện thời gian tải trang
Nén tệp là cách tốt nhất để giảm kích thước tệp và cải thiện thời gian tải. Gzip thường được sử dụng để kích hoạt tính năng nén. Gzip định vị mã tương tự trong tệp của bạn và tạm thời thay thế chúng để làm cho tệp nhỏ hơn. Hầu hết các máy chủ web đều hỗ trợ nén Gzip
Một sơ đồ nén khác có sẵn được gọi là nén Brotli, bạn cũng có thể xem xét sơ đồ nén này tùy thuộc vào loại tệp của mình
Kích hoạt tính năng nén cho các tệp HTML hoặc CSS của bạn thường tiết kiệm khoảng 50% hoặc 70% kích thước tệp, dẫn đến thời gian tải trang ít hơn và sử dụng ít băng thông hơn
Bạn có thể giảm thêm thời gian tải trang bằng cách giảm kích thước của hình ảnh được sử dụng trong ứng dụng của mình
4. Tải tất cả các tài nguyên cùng một lúc
Tải tất cả các tệp HTML, CSS và JS của bạn cùng một lúc sẽ tăng thời gian tải trang vì kết xuất sẽ bị chặn cho đến khi tất cả các tài nguyên này được tải
Tải tệp JS sau các phần tử khác sẽ cải thiện thời gian tải trang
Trì hoãn tải JavaScript là một cơ chế để tải các tệp JS lớn của bạn sau khi các phần tử khác đã được tải xong. Phương pháp này đảm bảo rằng phần còn lại của nội dung của bạn được tải mà không bị chặn bởi các tệp JS lớn
Nếu bạn có một trang web HTML, bạn cần thực hiện lệnh gọi tới tệp JS bên ngoài [hoãn. js] trước thẻ của bạn
function downloadJSAtOnload[] {
var element = document.createElement["script"];
element.src = "defer.js";
document.body.appendChild[element];
}
if [window.addEventListener]
window.addEventListener["load", downloadJSAtOnload, false];
else if [window.attachEvent]
window.attachEvent["onload", downloadJSAtOnload];
else window.onload = downloadJSAtOnload;
Đoạn mã trên cho biết, “Đợi toàn bộ tài liệu tải, sau đó tải bộ trì hoãn bên ngoài. tập tin js. ”
5. Một số lượng lớn các chuyển hướng
Hầu hết thời gian, chúng tôi sử dụng chuyển hướng để xử lý các trang đã di chuyển hoặc bị xóa để tránh các liên kết bị hỏng. Tuy nhiên, nhiều chuyển hướng hơn có nghĩa là nhiều yêu cầu HTTP hơn. Điều này làm tăng đáng kể thời gian tải trang. Google khuyên chủ sở hữu trang web loại bỏ các chuyển hướng để cải thiện thời gian tải, đặc biệt là trên các trang web ưu tiên thiết bị di động
Bạn có thể sử dụng một công cụ như Screaming Frog để xác định tất cả các chuyển hướng trong ứng dụng của mình. Bằng cách phân tích điều này, bạn có thể xóa mọi chuyển hướng không cần thiết
Khi nói đến chuyển hướng, có hai loại
- Chuyển hướng phía máy chủ — Nhanh chóng và có thể lưu vào bộ nhớ cache
- Chuyển hướng phía máy khách — Chậm và không thể lưu vào bộ nhớ cache
Sự kết luậnTốt nhất là tránh chuyển hướng phía máy khách và giữ chuyển hướng phía máy chủ ở mức tối thiểu để tối ưu hóa thời gian tải trang web của bạn
Ai không thích một trang web tải nhanh hơn?
Nếu bạn đang nghĩ đến việc đánh giá hiệu suất trang web của mình, có nhiều công cụ mà bạn có thể sử dụng, chẳng hạn như Google Pagespeed Insights, Pingdom, YSlow, v.v. Những điều này sẽ cung cấp một số thông tin chi tiết về nơi trang web của bạn tụt lại phía sau
Điểm quan trọng ở đây là giải quyết các mối quan tâm hàng đầu thay vì tìm cách khắc phục tất cả các vấn đề được đề xuất bởi các công cụ đánh giá
Sau khi xác định các khu vực có tác động cao, bạn nên thực hiện các biện pháp phù hợp để cải thiện thời gian tải trang nhằm mang lại trải nghiệm người dùng tốt hơn