JavaScript tải CSS sau khi tải trang
Là trang web của bạn quá chậm? . Thậm chí nó không phải là trường hợp; Show
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
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
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 HTTPYê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
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
2. Không có CDNNế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ẽ 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ồnTuy 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?
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ển3. Kích thước tệp và kích thước trang lớnTruy 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
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
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úcTả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
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ẻ |