Ngôn ngữ lập trình javascript giúp các trang web hiển thị nội dung động. Ví dụ:trên các trang web WordPress, Javascript được sử dụng để nhúng âm thanh và video. Nó cũng được sử dụng để hiển thị các thư viện hình ảnh, menu tương tác, đồng hồ đếm ngược và hơn thế nữa.
Các tệp Javascript sử dụng phần mở rộng tệp .js và trên một trang web WordPress điển hình, các tệp Javascript được chèn vào các trang bằng chủ đề WordPress và các plugin WordPress đã được kích hoạt. Ví dụ:thanh trượt trang chủ của chủ đề của bạn có thể yêu cầu tệp có tên slider.js để hoạt động chính xác, trong khi trang biểu mẫu liên hệ của bạn có thể yêu cầu tệp có tên là form.js.
Tôi tin rằng Javascript rất cần thiết cho các trang web WordPress hiện đại. Thật không may, nó cũng có thể làm cho trang web chạy chậm nếu nó không được tối ưu hóa đúng cách.
Trong các phiên bản đầu tiên của Giao thức truyền siêu văn bản, Javascript có thể làm chậm các trang web vì mỗi tệp Javascript phải được tải xuống và thực thi để trang được hiển thị chính xác. Một kỹ thuật tối ưu hóa phổ biến để giải quyết vấn đề này là kết hợp nhiều tệp Javascript để giảm số lượng yêu cầu HTTP mà trình duyệt phải thực hiện. Kỹ thuật này đôi khi được gọi là tổng hợp Javascript.
Trong bài viết này, tôi sẽ giải thích lý do tại sao nhiều chủ sở hữu trang web kết hợp Javascript bên ngoài trong WordPress và chia sẻ một số plugin WordPress hữu ích có thể được sử dụng để thực hiện tác vụ này. Tôi cũng sẽ nói về lý do tại sao việc kết hợp các tệp Javascript bên ngoài không còn cần thiết đối với hầu hết các chủ sở hữu trang web.
Tại sao nên kết hợp các tệp Javascript bên ngoài trong WordPress?
Mặc dù các chức năng Javascript có thể được thêm trực tiếp vào HTML bằng thẻ SCRIPT, thay vào đó, thông lệ là lưu mã Javascript trong một tệp bên ngoài. Thực tế hơn là làm điều này vì nó tách mã và cho phép nhiều trang gọi các hàm Javascript.
Mỗi tệp Javascript được yêu cầu bởi một trang web phải được trình duyệt tải xuống trong quá trình hiển thị trang.
| Kết xuất trang | Khi ai đó xem một trang web, trình duyệt sẽ xây dựng trang đó bằng cách xử lý từng dòng mã theo thứ tự. Đây được gọi là kết xuất trang. |
| Yêu cầu HTTP | Yêu cầu truy cập tệp trên máy chủ được gọi là yêu cầu HTTP. Do đó, trình duyệt phải thực hiện một yêu cầu HTTP cho mỗi tệp Javascript được yêu cầu cho trang. |
Khi các tệp được tải xuống theo thứ tự tuần tự, số lượng yêu cầu HTTP cao có thể làm tăng thời gian tải một trang web. Vì vậy, bằng cách kết hợp các tệp Javascript bên ngoài trong WordPress, bạn có thể giảm đáng kể số lượng yêu cầu HTTP được thực hiện trong quá trình hiển thị trang.
Một số công cụ tìm kiếm khuyên bạn nên kết hợp Javascript bên ngoài thành hai tệp.
| Các hàm Javascript quan trọng (Tệp 1) | Tệp Javascript đầu tiên chứa các chức năng quan trọng cần thiết để hiển thị tải trang ban đầu một cách chính xác. |
| Các hàm Javascript ít quan trọng hơn (Tệp 2) | Tệp Javascript thứ hai chứa các hàm ít quan trọng hơn có thể được gọi khi trang đã được tải. |
Nếu một trang web yêu cầu chín tệp Javascript để hiển thị chính xác, việc kết hợp các tệp JS bên ngoài trong WordPress có thể giúp bạn giảm tổng số yêu cầu HTTP cho mã Javascript từ chín xuống chỉ còn hai. Các tệp CSS bên ngoài cũng có thể được kết hợp, giảm số lượng yêu cầu HTTP của một trang hơn nữa.
Trang web WordPress của tôi có nhanh hơn nếu tôi kết hợp các tệp Javascript bên ngoài không?
Do những cải tiến trong Giao thức truyền siêu văn bản, việc kết hợp tệp Javascript và tệp CSS không còn cần thiết nữa trừ khi công ty lưu trữ web của bạn không hỗ trợ HTTP / 2.
Trong HTTP / 1.0 và HTTP / 1.1, mỗi tệp Javascript và CSS phải được tải xuống theo thứ tự tuần tự. Điều này có nghĩa là một tệp phải được tải xuống hoàn toàn trước khi tệp tiếp theo có thể bắt đầu tải xuống. Giao thức HTTP / 2, được ra mắt vào năm 2015, đã giải quyết vấn đề này bằng cách cho phép tải xuống song song. Vì tất cả các tài nguyên bên ngoài có thể được tải xuống cùng một lúc, không còn bất kỳ lợi ích nào khi kết hợp các tệp nếu HTTP / 2 khả dụng.
HTTP / 2 hiện được hỗ trợ bởi 95,6% trình duyệt internet. Kể từ ngày 6 tháng 1 năm 2022, HTTP / 2 được 46,9% tất cả các trang web trực tuyến sử dụng, mặc dù bạn có thể thấy từ biểu đồ bên dưới rằng con số này cao hơn đáng kể trong số các trang web phổ biến nhất trên internet.
Nếu máy chủ lưu trữ web của bạn có hỗ trợ HTTP / 2, việc kết hợp các tệp có thể làm chậm trang web của bạn vì các tệp Javascript kết hợp lớn hơn các tệp mà chúng đã tổng hợp. Điều này là do trình duyệt mất nhiều thời gian hơn để tải xuống hai tệp Javascript lớn hơn nhiều tệp Javascript nhỏ được tải xuống cùng một lúc.
Hai kỹ thuật tôi khuyên bạn nên sử dụng với Javascript là rút gọn và hoãn phân tích cú pháp.
| Minify | Sự tăng trưởng liên quan đến việc loại bỏ các ký tự không cần thiết như khoảng trắng và nhận xét. Điều này dẫn đến tệp Javascript nhỏ hơn. |
| Trì hoãn phân tích cú pháp | Mã Javascript làm chậm quá trình hiển thị trang. Hai kỹ thuật được gọi là Trì hoãn và Không đồng bộ có thể được sử dụng để giải quyết vấn đề này. |
Vui lòng đọc bài viết của tôi về việc trì hoãn phân tích cú pháp Javascript trong WordPress để hiểu rõ hơn về lý do tại sao Javascript làm chậm quá trình hiển thị trang.
Cách kết hợp Javascript bên ngoài trong WordPress
Nếu công ty lưu trữ web của bạn vẫn sử dụng HTTP 1.1, bạn vẫn nên kết hợp tệp Javascript bên ngoài và tệp CSS trong WordPress.
Đảm bảo chạy kiểm tra hiệu suất trước và sau khi kết hợp các tệp để bạn biết thời gian tải trang đã bị ảnh hưởng như thế nào. Bạn có thể thực hiện việc này bằng cách sử dụng GTmetrix, Google PageSpeed Insights và Kiểm tra tốc độ trang web Pingdom.
Tự động tối ưu hóa
Autoptimize là một trong những plugin tối ưu hóa hiệu quả nhất dành cho người dùng WordPress. Nó hỗ trợ rút gọn cho HTML và tổ hợp tệp và rút gọn cho Javascript và CSS. Các tệp Javascript cũng có thể được hoãn lại thay vì được tổng hợp để ngăn chặn hiển thị và cũng có các tùy chọn tối ưu hóa cho Google Fonts.
Tôi đã sử dụng Autoptimize trên nhiều trang web WordPress vì nó luôn cải thiện thời gian tải trang.
Asset CleanUp
Asset CleanUp là một plugin WordPress tối ưu hóa có cấu hình cao, hỗ trợ rút gọn, kết hợp và trì hoãn Javascript và CSS. Nó cũng cho phép bạn dọn dẹp HTML và cung cấp nhiều công cụ để quản lý phông chữ và giảm ảnh hưởng của chúng đến thời gian tải trang.
Một tính năng của Asset Cleanup nổi bật là trình quản lý Javascript và CSS. Điều này cho phép bạn chỉ định chính xác các trang mà tệp Javascript và CSS được tải trên trang web của bạn.
WP Super Minify
WP Super Minify làm mọi thứ hơi khác một chút bằng cách chỉ cung cấp cho bạn tùy chọn nén Javascript và nén CSS. Khi được chọn, WP Super Minify sẽ kết hợp, thu nhỏ và lưu vào bộ nhớ cache các tệp của bạn.
Nếu bạn đang tìm kiếm một giải pháp tối ưu hóa đơn giản mà hiệu quả, đây có thể là plugin dành cho bạn.
Kết hợp các tệp Javascript bên ngoài bằng plugin WordPress Cache
Các plugin bộ nhớ đệm WordPress tốt nhất bao gồm nhiều công cụ tối ưu hóa bổ sung để giúp bạn cải thiện hiệu suất trang web. Do đó, có nhiều khả năng giải pháp bộ nhớ đệm WordPress hiện tại của bạn cho phép bạn kết hợp các tệp Javascript và CSS bên ngoài.
Ví dụ, trong WP Rocket, có các tùy chọn để rút gọn và kết hợp các tệp Javascript và CSS. Các tệp Javascript cũng có thể được hoãn lại để ngăn chặn hiển thị.
Đề xuất của tôi là kiểm tra thời gian tải trang bằng cách sử dụng kết hợp tệp sử dụng plugin bộ nhớ đệm WordPress ưa thích của bạn và sau đó so sánh kết quả với các giải pháp tối ưu hóa Javascript độc lập như Autoptimize và Asset CleanUp.
Kết luận
Tôi hy vọng bạn thích cái nhìn này về việc kết hợp các tệp Javascript bên ngoài. Như bạn đã thấy, không còn cần thiết phải tổng hợp các tệp Javascript nếu máy chủ web của bạn hỗ trợ HTTP / 2 vì việc tải xuống các tệp song song sẽ hiệu quả hơn.
Nếu máy chủ web của bạn chỉ cung cấp hỗ trợ cho HTTP / 1.1, bạn có thể kết hợp javascript bên ngoài trong WordPress để giảm thời gian tải trang.
Khuyến nghị đọc:Xóa CSS không sử dụng trong WordPress
Cảm ơn vì đã đọc.
Kevin