Cách giảm yêu cầu HTTP của trang web của bạn

Mỗi khi bạn lướt web, một loạt các công cụ kỹ thuật xảy ra đằng sau hậu trường để đưa nội dung đến màn hình của bạn.

Các kỹ sư thường là những người quản lý các hoạt động này. Các nhà tiếp thị, ngay cả những người có kỹ thuật, có xu hướng né tránh nó. Một trong những hoạt động này là một yêu cầu HTTP và nó thực sự không phức tạp như bạn nghĩ. Trong thực tế, các nhà tiếp thị nhu cầu để có ít nhất một sự hiểu biết chung về các hành động mà trang web của chính họ thực hiện mỗi khi một người truy cập nó.

Các nhà tiếp thị số liệu có xu hướng chịu trách nhiệm có thể phụ thuộc rất nhiều vào cách thức phụ trợ của trang web được phát triển. Ví dụ: một số lượng lớn yêu cầu HTTP của trang web của bạn có thể làm chậm thời gian tải của trang, điều này cuối cùng làm hỏng trải nghiệm người dùng. Điều này có thể khiến khách truy cập của bạn rời khỏi trang nhanh hơn nếu nó không tải đủ nhanh (làm tăng
"tỷ lệ thoát").

Các yêu cầu HTTP có thể ảnh hưởng đến nhiều số liệu chính xác định mức độ tương tác của đối tượng với doanh nghiệp của bạn.

Vậy, chính xác yêu cầu HTTP là gì? Nó ảnh hưởng đến trải nghiệm người dùng như thế nào? Và một nhà tiếp thị có thể làm gì để giảm yêu cầu HTTP của trang web của họ? Chúng ta hãy đi qua từng câu hỏi một. Cuối cùng, bạn sẽ hiểu rõ hơn về lý do tại sao các giao thức phản hồi này quan trọng và bạn có thể làm gì để cung cấp cho khách truy cập trang web của bạn trải nghiệm tốt hơn, nhanh hơn.

Mỗi khi ai đó truy cập một trang trên trang web của bạn, đây là những gì thường xảy ra:

1. Trình duyệt web của người đó (các trình duyệt phổ biến bao gồm Chrome, Firefox và Safari) gửi yêu cầu đến máy chủ web của bạn. Máy chủ của bạn lưu trữ trang web họ đang cố gắng truy cập trên trang web của bạn.
2. Trình duyệt yêu cầu máy chủ của bạn gửi qua một tệp chứa nội dung được liên kết với trang đó. Tệp này có thể chứa văn bản, hình ảnh hoặc đa phương tiện tồn tại trên trang web của bạn.
3. Khi trình duyệt của người đó nhận được tệp này, nó sẽ bắt đầu hiển thị trang web của bạn trên màn hình máy tính hoặc thiết bị di động của người đó.
4. Nếu có nhiều nội dung trên trang web của bạn mà trình duyệt chưa nhận được, trình duyệt sẽ gửi một yêu cầu HTTP khác.

Các bước trên mô tả một yêu cầu HTTP, từ hỏi đến trả lời. HTTP là viết tắt của "Hypertext Transfer Protocol", đây chỉ là một cái tên ưa thích cho trình duyệt web gửi yêu cầu cho một tệp và máy chủ gửi (hoặc "chuyển") tệp đó đến trình duyệt.

Tại sao các yêu cầu HTTP ảnh hưởng đến trải nghiệm người dùng

Có hai lý do yêu cầu HTTP có thể ảnh hưởng đến trải nghiệm người dùng trên trang web của bạn: con số các tập tin đang được yêu cầu và kích thước của các tập tin được chuyển.

Thêm tệp = Yêu cầu HTTP khác

Trình duyệt web cần tạo một yêu cầu HTTP riêng cho mỗi tệp trên trang web của bạn. Nếu trang web của bạn không có nhiều tệp, sẽ không mất nhiều thời gian để yêu cầu và tải xuống nội dung trên trang web của bạn. Nhưng hầu hết các trang web tốt làm có rất nhiều tập tin

Càng nhiều tệp trên trang web của bạn, càng nhiều yêu cầu HTTP trình duyệt của bạn sẽ cần thực hiện. Trình duyệt càng tạo ra nhiều yêu cầu, trang web của bạn sẽ tải càng lâu.

Tệp lớn hơn = Yêu cầu HTTP dài hơn

Kích thước của tệp được chuyển cũng là một yếu tố trong thời gian tải trang trên màn hình của người dùng. Và cũng giống như các tệp trên máy tính của bạn có các kích thước tệp khác nhau – được đo bằng byte (B), kilobyte (KB), megabyte (MB), v.v. – các tệp được nhúng trên trang web của bạn cũng vậy. Hình ảnh lớn, độ phân giải cao là thủ phạm phổ biến của kích thước tệp lớn.

Nói cách khác, nội dung trên trang web của bạn càng lớn hoặc càng cao thì kích thước tệp của nó càng lớn. Kích thước tệp càng lớn, sẽ mất nhiều thời gian hơn để chuyển nó từ máy chủ của bạn sang trình duyệt của người dùng.

Tập tin này càng dài, trình duyệt của người dùng phải chờ càng lâu trước khi nó hiển thị nội dung này trên màn hình của anh ấy / cô ấy.

Yêu cầu HTTP ảnh hưởng đến trải nghiệm người dùng như thế nào

Thời gian tải lâu có thể là một trải nghiệm gây rối và bực bội cho người dùng của bạn. Người dùng di động sẽ có trải nghiệm đặc biệt tồi tệ, vì hầu hết trong số họ sẽ phải đợi cho đến khi mọi tài sản trên trang web được tải xuống trước khi trang thậm chí bắt đầu xuất hiện trong trình duyệt di động của họ.

Và nghiên cứu cho thấy vấn đề thời gian tải khi nói đến hiệu suất trang web. Theo dữ liệu từ Pingdom, một giám sát hiệu suất trang web, tỷ lệ thoát của một trang có thể tăng vọt từ 9% lên đến 38% nếu thời gian tải trang của nó tăng từ 2 giây lên 5 giây. Điều này là do nhiều người "thoát" khỏi trang web của bạn trong thời gian trì hoãn ba giây đó.

Vậy, số lượng yêu cầu HTTP mà một trang web nên nhắm đến là gì? Câu trả lời là không phải "một." Một số người nghĩ rằng họ có thể giải quyết vấn đề bằng cách chỉ sử dụng một tệp JavaScript để kiểm soát toàn bộ trang web của họ. Nhưng hãy nhớ rằng: Tập tin kích thước ảnh hưởng đến thời gian tải, quá. Đối với các trang web phức tạp, một tệp đó có thể là một chuyến đi dài vô cùng từ máy chủ của bạn đến trình duyệt của khán giả.

Mặc dù không nhất thiết phải giảm số lượng tệp tối ưu mà trang web của bạn nên giảm xuống, giám đốc tiếp thị sản phẩm chính của HubSpot, Jeffrey Vocell đề nghị nhắm đến giữa 10 tập tin3030.

Đối với hầu hết các trang web hoạt động hàng đầu, việc đi đến đó rất khó khăn và thường đòi hỏi các nguồn lực kỹ thuật chuyên dụng. Kể từ tháng 3 năm 2019, số lượng yêu cầu trang HTTP trung bình để tải trang web trên thiết bị di động hoặc máy tính để bàn là từ 69 đến 75 yêu cầu.

Cách thực hiện ít yêu cầu HTTP hơn đến trang web của bạn

1. Xếp hạng hiệu suất trang web của bạn để tìm ra vấn đề gốc.

Nếu bạn bắt đầu từ đầu, không biết trang web của bạn hoạt động như thế nào, trước tiên bạn sẽ muốn báo cáo chi tiết về sức khỏe tổng thể của trang web. Để nhận báo cáo này, hãy xem Trình duyệt trang web của HubSpot.

Sử dụng Website Grader, chỉ cần nhập địa chỉ email của bạn và URL của trang web bạn muốn kiểm toán. Bạn sẽ nhận được một báo cáo được cá nhân hóa miễn phí, xếp hạng trang web của bạn theo các số liệu chính bao gồm mức độ sẵn sàng cho thiết bị di động, SEO, tổng kích thước tệp của trang của bạn và tất nhiên, có bao nhiêu yêu cầu HTTP mà trang đang nhận được.

Học sinh này có thể giúp bạn chẩn đoán vấn đề chính xác mà bạn nghi ngờ trang web của bạn đang gặp phải. Ví dụ: nếu bạn có số lượng yêu cầu trang ít, nhưng kích thước trang cao, mục tiêu của bạn sẽ là giảm kích thước của phương tiện truyền thông trên trang web của bạn – không phải nhất thiết phải giảm số lượng yêu cầu HTTP mà bạn yêu cầu trình duyệt thực hiện.

2. Kiểm tra số lượng yêu cầu HTTP mà trang web của bạn hiện đang thực hiện.

Khi bạn có ý tưởng về mức độ "lớn" của trang web của mình và số lượng yêu cầu trang mà nó yêu cầu, hãy sử dụng bảng điều khiển Mạng của Google Chrome để đi sâu vào những con số này. Công cụ này giúp mọi người dễ dàng kiểm tra những gì trên trang của bạn, số lượng yêu cầu HTTP mà trang tạo ra và tệp nào mất nhiều thời gian nhất để tải.

Để tìm thời lượng yêu cầu …

Đầu tiên, công cụ này hiển thị cho bạn tất cả các tệp mà trình duyệt phải yêu cầu và chuyển để tải xuống trang – và nó cũng hiển thị dòng thời gian là khi nào điều này đã xảy ra. Ví dụ: API của Google Chrome có thể cho bạn biết chính xác khi nào yêu cầu HTTP cho hình ảnh bắt đầu và khi nào nhận được byte cuối cùng của hình ảnh. Đó là một cách thực sự hữu ích để xem những gì trên trang của bạn và những gì mất nhiều thời gian để tải.

Để xem bảng điều khiển Mạng cho một trang web nhất định, hãy mở trang web trong Google Chrome. Trong menu Chrome chính ở đầu màn hình của bạn, hãy đi tới Lượt xem > Nhà phát triển > Những công cụ phát triển.

Bảng điều khiển mạng sẽ mở trong trình duyệt của bạn. Vì nó ghi lại tất cả hoạt động mạng trong khi DevTools đang mở, bảng điều khiển có thể trống khi bạn mở lần đầu tiên. Tải lại trang để bắt đầu ghi hoặc chỉ chờ hoạt động mạng xảy ra trong ứng dụng của bạn.

Dưới đây là tổng quan về ý nghĩa của mọi thứ trong bảng điều khiển Mạng:

Để đếm các yêu cầu HTTP …

Tò mò có bao nhiêu yêu cầu trang web của bạn yêu cầu? Bảng điều khiển Mạng cũng sẽ cho bạn biết điều đó. Hãy nhìn vào góc dưới bên trái của ảnh chụp màn hình ở trên và bạn sẽ thấy tổng số yêu cầu; trong trường hợp này, đó là 25 yêu cầu.

Để tìm hiểu cách đọc bảng điều khiển và đánh giá hiệu suất mạng của bạn chi tiết hơn, hãy đọc qua tài nguyên Google Chrome này.

3. Loại bỏ những hình ảnh không cần thiết.

Tại thời điểm này, bạn nên có ý tưởng về việc các tệp nào mất nhiều thời gian nhất để tải, bao gồm các tệp hình ảnh. Cách dễ nhất để giảm số lượng tập tin được yêu cầu? Loại bỏ những hình ảnh không cần thiết.

Hình ảnh là một tài sản trang web có giá trị vì chúng tạo ra trải nghiệm hình ảnh mạnh mẽ trên các trang web của bạn. Tuy nhiên, nếu bạn có hình ảnh trên trang của mình mà không đóng góp nhiều giá trị, tốt nhất là chỉ nên cắt chúng ra hoàn toàn – đặc biệt là những hình ảnh thực sự lớn.

4. Giảm kích thước tập tin cho các hình ảnh còn lại.

Đối với những hình ảnh bạn làm giữ, sử dụng ảnh chất lượng cao có kích thước tệp nén. Điều này sẽ giúp giảm thời gian thực hiện yêu cầu HTTP, do đó giảm thời gian tải.

Nếu bạn là người dùng HubSpot, bạn không phải lo lắng quá nhiều về việc thay đổi kích thước và nén hình ảnh – HubSpot COS sẽ tự động thay đổi kích thước và nén hình ảnh của bạn khi bạn tải chúng lên trình quản lý tệp HubSpot. Để thay đổi kích thước hình ảnh hơn nữa, khi bạn đã tải nó lên trình quản lý tệp của mình, nhấp vào "Sao chép và chỉnh sửa", như hiển thị bên dưới:

Hãy nhớ rằng bạn luôn có thể giảm kích thước tệp hình ảnh của mình hơn nữa trước khi tải chúng lên trang web của bạn. Ví dụ: nếu bạn có một trang web có nhiều hình ảnh riêng biệt, nó sẽ cho phép bạn giảm kích thước tệp của họ nhiều nhất có thể trước khi xuất bản trang.

Nếu có thể, chúng tôi khuyên bạn nên giảm kích thước tệp của mỗi hình ảnh xuống dưới 100 KB. Tùy thuộc vào hình ảnh, bạn có thể cần phải thỏa hiệp ở mức tối thiểu này, và điều đó không sao. Chỉ cần cố gắng hết sức để giữ các tệp riêng lẻ của bạn không xâm nhập vào lãnh thổ megabyte ("MB").

Để nén hình ảnh của bạn đến mức tối thiểu, hãy sử dụng một công cụ như Squoosh, một công cụ do Google phát triển để thu nhỏ kích thước tệp hình ảnh với chi phí không đáng kể về chất lượng hình ảnh. Bạn càng thu nhỏ kích thước tệp, chất lượng hình ảnh có thể nhận được càng thấp – sử dụng đồng hồ máy nén trượt của Squoosh để cân bằng giữa chất lượng và kích thước phù hợp với bạn.

Tuy nhiên, thời gian của bạn là quý giá và việc nén từng bức ảnh có thể là một công việc tẻ nhạt. Để nén nhiều hình ảnh cùng một lúc, hãy xem xét sử dụng TinyPNG.

5. Đặt trang web của bạn để tải các tệp JavaScript không đồng bộ.

Theo mặc định, nhiều trang web tải nội dung được viết bằng JavaScript từ trên xuống dưới trên trang web. Vì vậy, ngay cả khi trình duyệt web của người dùng thực hiện nhiều yêu cầu HTTP cùng một lúc, nội dung mà nó nhận được sẽ tải từng mảnh một. Điều này còn được gọi là "chặn chặn kết xuất" và nó có thể khiến toàn bộ trang web của bạn tải chậm hơn vì mỗi tệp đang chờ đến lượt tải trong trình duyệt web của người dùng.

Đặt trang web của bạn để tải JavaScript "không đồng bộ" có thể ghi đè quy tắc này và làm cho trải nghiệm người dùng tốt hơn.

Tải không đồng bộ cho phép nội dung trang web hiển thị nhiều yếu tố trang cùng một lúc, bất kể chúng ngồi ở đâu trên trang. Trên WordPress, có rất nhiều plugin có thể giúp bạn làm điều này. HubSpot cũng cho phép bạn thay đổi nơi một phần tử JavaScript phổ biến được gọi là "jQuery" hiển thị trên một trang web để bạn không bị kẹt chờ đợi nó tải. Xem ảnh chụp màn hình bên dưới để xem tùy chọn này và đọc thêm về nó ở đây.

Để tìm hiểu thêm về cách tạo mã JavaScript không đồng bộ, hãy xem bản trình bày này của Steve Souder và bài đăng trên blog này của Visual Website Tối ưu hóa.

6. Đánh giá các phần khác của trang đang góp phần vào thời gian tải trang.

Cắt và nén hình ảnh là bước đầu tiên tuyệt vời để giảm yêu cầu HTTP và thời gian tải trang. Nhưng bạn còn thấy gì nữa trên bảng điều khiển Mạng đang thêm yêu cầu? Ví dụ: bạn có thể thấy rằng tích hợp video hoặc Twitter thêm toàn bộ một hoặc hai giây vào thời gian tải của bạn. Đó là điều tốt để biết. Từ đó, bạn và nhóm của bạn có thể quyết định xem những tài sản đó có đáng để giữ hay không.

7. Kết hợp các tệp CSS lại với nhau.

Mỗi tệp CSS bạn sử dụng cho trang web của bạn sẽ thêm vào số lượng yêu cầu HTTP mà trang web của bạn yêu cầu, do đó thêm thời gian vào tốc độ tải trang của bạn. Mặc dù điều này đôi khi không thể tránh khỏi, nhưng trong hầu hết các trường hợp, bạn thực sự có thể kết hợp hai hoặc nhiều tệp CSS lại với nhau. (Bạn có thể phải nhận trợ giúp từ nhà phát triển cho việc này.)

Điều đó có nghĩa là gì? Mỗi khi bạn xác định nhiều tệp CSS trông giống nhau, được liệt kê trong mã HTML của trang web, bạn có cơ hội kết hợp các tệp này thành một tệp để trình duyệt của người dùng không phải thực hiện nhiều yêu cầu HTTP để tạo các tệp này. Dưới đây là ví dụ về một nhóm các tệp CSS riêng biệt trước khi kết hợp chúng:

Bây giờ, hãy xem cách bạn có thể kết hợp tất cả các tệp này thành một dòng hoặc tệp:

Nếu bạn sử dụng HubSpot, bạn có thể tự động kết hợp nhiều tệp CSS.

Mã CSS có thể ở bất cứ đâu trên trang web của bạn hoặc trong bất kỳ số lượng tệp nào và nó vẫn sẽ hoạt động tốt như vậy. Trên thực tế, thường thì lý do duy nhất một trang web có nhiều tệp CSS ở vị trí đầu tiên là do người thiết kế trang web thấy việc làm việc với các tệp riêng biệt dễ dàng hơn. Để tìm hiểu thêm về cách kết hợp các tệp CSS, hãy xem hướng dẫn hiệu suất trang web mặt trước này.