“How to Reduce HTTP Requests to Speed Up Your WordPress Site”

Đây là keyword tìm kiếm nhiều khi bạn muốn tối ưu website. Và thực tế, những website bán hàng, kinh doanh thì việc tối ưu tốc độ web rất quan trọng. Việc giảm thiểu các request http khiến nhiều web design khá đau đầu. Nó ảnh hưởng không nhỏ đến thời gian tải web. Hôm nay mình sẽ chia sẻ chút ít kiến thức với anh em.

Mỗi khi bạn truy cập một trang web, có rất nhiều thứ kỹ thuật đang diễn ra đằng sau hậu trường. Trong khi các từ và hình ảnh đang tải trên màn hình của bạn, trong nền trình duyệt của bạn đang yêu cầu và nhận tệp.

Các yêu cầu HTTP này tác động đến tốc độ tải trang và cuối cùng, ảnh hưởng đến trải nghiệm người dùng, tỷ lệ thoát và SEO. Càng ít yêu cầu HTTP trang web của bạn gửi đến máy chủ, trang web của bạn sẽ tải càng nhanh.

Vậy yêu cầu HTTP là gì và bạn có thể làm gì để giảm chúng? Hãy xem cách các yêu cầu máy chủ hoạt động, các công cụ giúp tìm ra chính xác số lượng yêu cầu HTTP mà trang web của bạn đang gửi và mẹo về cách giảm yêu cầu trang web của bạn và làm cho nó nhanh hơn.

REQUEST HTTP LÀ GÌ?

Mỗi khi ai đó truy cập một trang trên trang web của bạn, trình duyệt của họ sẽ ping máy chủ web của bạn và yêu cầu các tệp chứa nội dung của trang. Các tệp này có thể bao gồm các tệp HTML, CSS và JavaScript, hình ảnh, biểu tượng và các tệp khác.

Yêu cầu được gọi là yêu cầu HTTP. HTTP là viết tắt của Hypertext Transfer Protocol và về cơ bản là tên cho một trình duyệt gửi yêu cầu cho một tệp và máy chủ gửi tệp đó tới trình duyệt.

Khi máy chủ nhận được yêu cầu HTTP từ trình duyệt của người dùng, máy chủ của bạn sẽ phản hồi bằng cách gửi các tệp được yêu cầu. Trình duyệt của người dùng sau đó kết xuất lại trang.

Tại sao việc theo dõi các yêu cầu HTTP lại quan trọng đến vậy? Bởi vì mỗi khi ai đó truy cập trang web của bạn, trình duyệt của họ cần tạo một yêu cầu HTTP riêng cho mỗi tệp cần thiết để hiển thị trang họ đang truy cập. Nếu bạn có một trang web tối giản không có nhiều tệp, sẽ không lâu để yêu cầu và tải xuống các tệp của bạn. Nhưng điều này không đúng với hầu hết các trang web, đặc biệt là những trang web sử dụng nhiều hình ảnh, hoạt hình và nội dung động khác.

Bằng cách giảm số lượng phần tử trong các trang của trang web của bạn, bạn có thể giảm thiểu số lượng yêu cầu HTTP được yêu cầu để hiển thị trang web. Điều này, đến lượt nó, sẽ giúp tăng tốc thời gian tải cho trang web của bạn.

Nhưng trước tiên, bạn cần biết có bao nhiêu yêu cầu HTTP mà trang web của bạn đang thực hiện.

KIỂM TRA SỐ LƯỢNG YÊU CẦU HTTP TRANG WEB CỦA BẠN TẠO RA

Nếu bạn là người dùng Chrome, bạn có thể sử dụng Công cụ dành cho nhà phát triển của trình duyệt để kiểm tra số lượng yêu cầu HTTP mà trang web của bạn thực hiện mỗi lần tải.

Để thực hiện việc này, nhấp chuột phải vào trang trên trang web của bạn mà bạn muốn kiểm tra và nhấp vào Insp Inspect. Sau đó nhấp vào tab Mạng Network.

Bảng điều khiển Mạng sẽ hiển thị hoạt động mạng của trang web của bạn. Để xem điều gì xảy ra khi tải của bạn tải, hãy làm mới trang khi bảng điều khiển mở và bạn sẽ thấy các yêu cầu HTTP của mình khi chúng diễn ra trong thời gian thực.

Đây là những gì bạn sẽ thấy khi bạn kiểm tra các yêu cầu HTTP cho blog Qnet88:

Chrome Developer Tools cung cấp thông tin mạng, bao gồm các yêu cầu HTTP.

Cột bên trái chứa tất cả các tệp mà trang cần hiển thị. Trong cột Kích thước của người dùng, bạn sẽ thấy kích thước của mỗi tệp. Cột Dòng Thời gian liệt kê liệt kê thời gian tải mỗi tệp trong bao lâu, trong khi cột Thác nước Thác nước hiển thị một thác nước trực quan của tất cả các yêu cầu mạng.

Nhưng số lượng bạn thực sự muốn biết nếu có bao nhiêu yêu cầu HTTP trang web của bạn thực hiện. Bạn sẽ thấy con số này ở góc dưới bên trái, trong trường hợp này là 51 yêu cầu.

Các công cụ như GTmetrix và Pingdom cũng có thể giúp bạn theo dõi các yêu cầu HTTP.

CÁCH GIẢM YÊU CẦU HTTP CỦA TRANG WEB CỦA BẠN

Tối ưu hóa trang web của bạn và giảm số lượng tệp mà trang web của bạn cần hiển thị có thể giúp tăng tốc nó – ít tệp hơn có nghĩa là ít yêu cầu HTTP hơn.

Giảm thiểu và kết hợp các tệp HTML, CSS và JavaScript

Mỗi tệp HTML, CSS và JavaScript trang web của bạn yêu cầu thêm vào số lượng yêu cầu HTTP cần thiết để tải trang web của bạn. Vì vậy, bằng cách kết hợp và thu nhỏ các tài sản này , bạn không chỉ giảm số lượng tệp cần tải mà còn giảm tổng kích thước tệp của trang web của bạn.

Tối thiểu hóa có nghĩa là loại bỏ các ký tự không cần thiết, như nhận xét, định dạng, khoảng trắng và các dòng mới khỏi các tệp HTML, CSS và JavaScript không cần thiết để mã thực thi.

Kết hợp các tập tin, trong khi đó, giống như âm thanh. Ví dụ: nếu trang web của bạn tải 5 tệp CSS bên ngoài và 5 tệp JavaScript bên ngoài, việc kết hợp CSS và JavaScript của bạn thành một tệp riêng biệt, mỗi tệp sẽ dẫn đến chỉ 2 yêu cầu thay vì 10. Tuy nhiên, điều quan trọng cần lưu ý là nếu bạn sử dụng HTTP / 2, điều đó có nghĩa là một số yêu cầu có thể xảy ra cùng một lúc và việc kết hợp các tệp sẽ ít ảnh hưởng đến thời gian tải.

Sử dụng WP Rocket, bạn có thể dễ dàng thu nhỏ và kết hợp các tệp của mình trong tab Tối ưu hóa tệp. Kiểm tra các tập tin bạn muốn thu nhỏ và kết hợp. Đừng quên nhấn vào Save Save Change Thay đổi khi bạn hoàn thành.

Sửa Render-Blocking CSS and JavaScript Files

Nếu bạn có CSS ​​và JavaScript trên trang web của bạn không đồng bộ, tốt nhất là làm cho nó không đồng bộ hoặc trì hoãn nó.

Tại sao? Khi trình duyệt của người dùng tải trang của bạn, nó sẽ tải tài sản của trang từ trên xuống dưới. Khi trình duyệt đạt đến tệp CSS hoặc JavaScript, nếu tệp đó không đồng bộ, trình duyệt sẽ ngừng tải mọi thứ khác trên trang cho đến khi nó tải đầy đủ tệp CSS hoặc JavaScript đó.

Khi bạn tải các tệp của mình không đồng bộ, trình duyệt của người dùng sẽ tải chúng cùng lúc khi nó tiếp tục tải các phần tử khác trên trang.

Trì hoãn các tệp có nghĩa là di chuyển chúng đến một phần khác trên trang của bạn để tải. Ví dụ: di chuyển JavaScript từ <head>phần trang web của bạn xuống cuối trang ngay trước </body>thẻ. Kỹ thuật này đảm bảo phần còn lại của trang sẽ tải mà không phải chờ JavaScript tải đầy đủ.

Với WP Rocket, bạn có thể khắc phục CSS và JavaScript chặn kết xuất đơn giản bằng cách kiểm tra các tùy chọn trong tab Tối ưu hóa tệp.

Lưu ý: Nếu bạn chọn sử dụng tính năng chặn kết xuất của WP Rocket, hãy thận trọng và làm theo các mẹo và tài liệu hướng dẫn của WP Rocket. Tính năng này dành cho người dùng nâng cao.

Nếu có bất kỳ CSS nào bạn muốn được tải trong màn hình đầu tiên , bạn có thể nhập các quy tắc CSS cụ thể trong vùng văn bản để đảm bảo tải các tệp của bạn không đồng bộ không ảnh hưởng đến cách trang web của bạn được hiển thị cho người dùng.

Xóa và tối ưu hóa hình ảnh

Hình ảnh thường là các tệp mất nhiều thời gian nhất để tải trên hầu hết các trang web. Mặc dù chúng thực sự cần thiết – xét cho cùng, các trang web trông nhàm chán nếu không có nội dung trực quan – bạn có thể có hình ảnh trên trang web của mình mà bạn không cần. Vì vậy, hãy dành thời gian để đánh giá hình ảnh của bạn và xóa bất kỳ khỏi thư viện phương tiện mà bạn không sử dụng.

Khi bạn đã xem qua hình ảnh của mình và quyết định những hình ảnh nào bạn muốn giữ, bạn nên tối ưu hóa và nén chúng . Tối ưu hóa hình ảnh của bạn sẽ loại bỏ thông tin tập tin không cần thiết. Tôi khuyên bạn nên sử dụng plugin Imagify .

CSS CSS có thể thêm hình ảnh số lượng tệp hình ảnh yêu cầu HTTP. Kỹ thuật này cho phép bạn chụp nhiều ảnh và thu nhỏ chúng thành một ảnh duy nhất. Sau đó, sử dụng các kỹ thuật CSS, bạn có thể thao tác sprite và chỉ hiển thị một phần cụ thể của nó. Có một số công cụ tuyệt vời có thể giúp tạo các CSS sprite, chẳng hạn như CSS Sprite Generator . Tạo các họa tiết CSS rất đáng nỗ lực, đặc biệt là đối với các tệp nhỏ hơn như biểu tượng phương tiện truyền thông xã hội – ít tệp biểu tượng riêng lẻ hơn có nghĩa là ít yêu cầu HTTP hơn, mặc dù điều này ít cần thiết hơn nếu bạn sử dụng HTTP / 2 và nhiều tệp từ trang web của bạn có thể được chuyển đồng thời.

Lười tải hình ảnh của bạn cũng có thể cải thiện thời gian tải trang của bạn. Kỹ thuật này hoạt động bằng cách sử dụng JavaScript để chỉ tải hình ảnh vào chế độ xem của người dùng khi họ cuộn qua trang của bạn.

Một cách khác để đảm bảo hình ảnh sẽ không khiến các trang của bạn tải chậm là sử dụng plugin tải lười biếng . Tải nhanh là một kỹ thuật trong đó một số JavaScript nhìn vào chế độ xem hiện tại của khách truy cập và chỉ tải hình ảnh (gần như) trong chế độ xem. Một plugin tốt cho việc này là plugin Lazy Load giúp trì hoãn việc tải hình ảnh cho đến khi người dùng bắt đầu cuộn xuống trang.

Đánh giá và giảm các tập lệnh bên ngoài

Tại thời điểm này, bạn nên quay lại bảng điều khiển Mạng trong Chrome và xem các tệp khác đang thêm yêu cầu.

Ví dụ: bạn có thể thấy rằng Gravatar đang thêm một giây vào thời gian tải của bạn khi nó truy xuất hình ảnh người dùng cho nhận xét blog của bạn. Tích hợp Twitter cũng có thể được thêm vào số lượng yêu cầu HTTP mà trang web của bạn đang thực hiện.

Biết được sự tích hợp của bên thứ ba nào đang làm chậm trang web của bạn (các mã tracking theo dõi của Google, facebook) sẽ giúp bạn đưa ra quyết định sáng suốt về việc giữ tài sản nào và tài sản nào không đáng để làm chậm tốc độ trang của bạn.

Sử dụng CDN Network (phổ biến nhất chắc chắn là Cloudflare miễn phí)

Sử dụng CDN có thể tăng tốc độ tải trang của bạn cho người dùng nhanh hơn. CDN là một mạng lưới các máy chủ, thường được đặt tại các trang web khác nhau trên thế giới. Các máy chủ này lưu trữ nội dung tĩnh của trang web của bạn, chẳng hạn như hình ảnh, tệp CSS và JavaScript. Khi ai đó hạ cánh trên trang web của bạn, nội dung tĩnh được cung cấp từ máy chủ nằm gần vị trí thực của người dùng. Khoảng cách ngắn hơn đến máy chủ có nghĩa là truy xuất dữ liệu nhanh hơn. Nhưng hãy nhớ rằng nếu phần lớn khách truy cập trang web của bạn là người địa phương, thì CDN không cần thiết – CDN phù hợp hơn với các trang web có lưu lượng truy cập quốc tế.

Với WP Rocket , bạn có thể tích hợp trang web của mình với CloudFlare, một CDN phổ biến. Chuyển đến tab CDNN của Nhật Bản trong WP Rocket để bật CloudFlare và sau đó thêm tài khoản của bạn. Để biết thêm, hãy xem tài liệu của WP Rocket về cách sử dụng CloudFlare với WP Rocket.

Mặc dù Cloudflare là một tùy chọn miễn phí hữu ích cho người dùng có trang web nhỏ, nhưng các trang web lớn hơn nên đầu tư vào một dịch vụ cao cấp, chẳng hạn như MaxCDN (nay là StackPath), KeyCDN hoặc thậm chí là tùy chọn nguồn mở như jsDelivr.

KẾT LUẬN

Biết chính xác có bao nhiêu yêu cầu HTTP mà trang web của bạn thực hiện là giảm chúng và tăng tốc trang web của bạn.

Mặc dù thực sự không có số lượng tệp hoặc kích thước tệp tối ưu mà trang web của bạn nên được giảm xuống, Hubspot đề nghị nhắm đến khoảng 10-30 tệp. Tuy nhiên, đây không phải là mục tiêu thực tế cho nhiều trang web lớn yêu cầu video, hình ảnh chất lượng cao và nội dung động khác.

Vì vậy, hãy nhớ rằng theo Steve Souder, một chuyên gia về hiệu suất internet trước đây tại Yahoo! và Google, số lượng yêu cầu trang trung bình thực sự là 99 trên mỗi trang – vì vậy hãy thử và nhắm đến ít hơn số này.

[related_posts_by_tax posts_per_page="6" title="Bài liên quan" taxonomies="category,post_tag"]