Các trang web WordPress tải nhanh mang lại những lợi ích nghiêm trọng khi nói đến việc nâng cao trải nghiệm người dùng cho khách truy cập, cải thiện khả năng hiển thị trang web của bạn trên các công cụ tìm kiếm và tăng lưu lượng truy cập tự nhiên cho trang web của bạn.
Một trang web chứa HTML, CSS, Javascript và hình ảnh và mỗi thứ này phải được tối ưu hóa để giảm thời gian tải trang. Hình ảnh có một trong những ảnh hưởng lớn nhất đến kích thước trang, vì vậy điều quan trọng là phải giảm kích thước tệp hình ảnh bằng cách sử dụng plugin tối ưu hóa hình ảnh WordPress.
| Loại mã | Cách sử dụng |
|---|---|
| HTML | Được sử dụng cho nội dung và cấu trúc của trang |
| CSS | Được sử dụng cho phông chữ, màu sắc, khoảng cách và các kiểu khác |
| Javascript | Được sử dụng cho các nút, biểu mẫu, video, thanh trượt và hơn thế nữa |
Để cải thiện hiệu suất trang hơn nữa, bạn có thể hoãn phân tích cú pháp javascript trong WordPress có nghĩa là bạn có thể khuyên các trình duyệt tải nội dung trang và hình ảnh trước khi Javascript được tải. Thực hiện biện pháp này có nghĩa là các phần tử Javascript như biểu mẫu và thanh trượt có thể mất thêm vài giây để tải, nhưng đây là một cái giá nhỏ phải trả vì thời gian tải trang được cải thiện đáng kể.
Mã Javascript có thể được thực thi sau đó bằng cách sử dụng hai kỹ thuật được gọi là Trì hoãn và Không đồng bộ . Cả hai phương pháp đều được hỗ trợ bởi các plugin bộ nhớ đệm phổ biến của WordPress, mặc dù các giải pháp chuyên dụng sẽ cung cấp cho bạn nhiều quyền kiểm soát hơn đối với những tệp Javascript nào được tải sau này.
Trong bài viết này, tôi sẽ giải thích những lợi ích của việc trì hoãn tải các tệp Javascript và chỉ cho bạn năm plugin WordPress hữu ích sẽ đơn giản hóa quy trình cho bạn.
Tôi khuyến khích bạn đọc toàn bộ bài viết để hiểu đầy đủ về chủ đề này, nhưng nếu bạn là người mới bắt đầu, một điều bạn nên bỏ qua bài viết này là Trì hoãn và Không đồng bộ có thể cải thiện đáng kể thời gian tải trang của trang web của bạn.
Các cách khác nhau để trì hoãn phân tích cú pháp Javascript trong WordPress (Với Defer &Async)
Javascript đã tự khẳng định mình là một khối xây dựng quan trọng của các trang web WordPress, được sử dụng để hiển thị các nút, biểu mẫu, thư viện phương tiện, âm thanh, video, bộ đếm thời gian đếm ngược, dòng thời gian trên mạng xã hội và hơn thế nữa.
Thật không may, Javascript cũng là một trong những lý do chính khiến các trang web tải chậm do trình duyệt phải dừng, tải xuống và thực thi từng tập lệnh trước khi có thể tiếp tục phân tích cú pháp đánh dấu HTML của trang.
Phân tích cú pháp là quá trình trình duyệt phân tích và chuyển đổi mã của trang sang định dạng mà nó có thể thực thi. Bất kỳ mã nào dừng quá trình này được gọi là “Chặn hiển thị” vì nó đang trì hoãn quá trình hiển thị trang cho khách truy cập.
Tài nguyên chặn hiển thị là một lý do phổ biến khiến trang web WordPress tải chậm. CSS quan trọng có thể được hiển thị nội tuyến để ngăn chặn hiển thị, nhưng tốt hơn nên hoãn tải Javascript sau bằng cách sử dụng Trì hoãn hoặc Không đồng bộ để ngăn mã Javascript chặn hiển thị trang.
Nó cũng là một thực tiễn tốt để loại bỏ mã Javascript không sử dụng và giảm thời gian thực thi Javascript. Một cách bạn có thể làm là giảm kích thước của các tệp Javascript lớn thông qua một quá trình có tên là Minification , loại bỏ khoảng trắng và mã không cần thiết khỏi mỗi tệp Javascript.
Một trong những số liệu quan trọng nhất mà các dịch vụ đo điểm chuẩn của trang web như Google PageSpeed Insights và GTmetrix xem xét là First Contentful Paint, đó là thời gian để nội dung đầu tiên hiển thị cho khách truy cập. Google tuyên bố rằng thời gian FCP từ 0 đến 1,8 giây là tốt và 1,8 đến 3 giây là vừa phải. Mọi thứ trên 3 giây đều bị coi là chậm.
Tất cả những gì bạn phải làm là nhập URL của một trang vào dịch vụ đo điểm chuẩn của trang web để xem các tệp Javascript và CSS đang chặn hiển thị trang. Như bạn có thể thấy từ ảnh chụp màn hình bên dưới, các tệp CSS và Javascript chặn hiển thị có thể mất vài giây để tải xuống vì vậy nếu bạn có thể loại bỏ các tài nguyên này, các trang của bạn sẽ tải nhanh hơn đáng kể.
Cách hiệu quả nhất để loại bỏ các tệp Javascript chặn hiển thị là sử dụng defer và không đồng bộ thuộc tính. Các thuộc tính boolean này chỉ có thể được sử dụng với phần tử HTML script khi thuộc tính SRC được sử dụng để gọi các tệp bên ngoài.
<script src="javascript.js"></script>Tệp Javascript
<script defer src="javascript.js"></script>Tệp Javascript bị hoãn
<script async src="javascript.js"></script>J tệp avascript có không đồng bộ
Khi bạn thêm thuộc tính defer or async vào phần tử tập lệnh HTML, bạn đang khuyên trình duyệt tải xuống tệp cùng lúc trang được phân tích cú pháp. Với việc trì hoãn, tệp sẽ được thực thi sau khi trang đã được phân tích cú pháp hoàn toàn.
Ngược lại, thuộc tính async là một hoạt động không đồng bộ thực thi tệp ngay sau khi nó được tải xuống. Như vậy, tổng thời gian để phân tích cú pháp một trang không đồng bộ sẽ cao hơn một chút vì trình duyệt sẽ ngừng phân tích cú pháp HTML để thực thi tệp trong thời gian ngắn.
Nếu bạn chỉ định cả hoãn và không đồng bộ, các trình duyệt sẽ sử dụng không đồng bộ.
| Trì hoãn | Không đồng bộ |
|---|---|
| Tải xuống tệp cùng lúc trang được phân tích cú pháp | Tải xuống tệp cùng lúc trang được phân tích cú pháp |
| Thực thi tệp khi trang đã phân tích xong | Thực thi tệp ngay khi có sẵn |
| Các tệp được thực thi theo thứ tự tuần tự | Tạm dừng phân tích cú pháp HTML để thực thi tệp |
Một tiêu chuẩn quan trọng cần hiểu là Mô hình Đối tượng Tài liệu, thường được gọi là DOM. DOM đại diện cho toàn bộ tài liệu, chẳng hạn như tệp XML hoặc trang HTML, dưới dạng một đối tượng duy nhất. Các phần tử quan trọng như phần đầu, phần thân và phần đầu, có thể được coi là các nhánh của DOM.
Nếu tệp Javascript không yêu cầu thông tin từ tệp khác hoặc từ chính DOM, thì có thể đáng giá bằng cách sử dụng phương pháp không đồng bộ vì các yếu tố quan trọng của trang của bạn sẽ được hiển thị nhanh hơn. Chỉ cần lưu ý rằng không đồng bộ có thể gây ra lỗi với trang web của bạn nếu tệp đang yêu cầu thông tin chưa được tải.
Nếu tệp Javascript yêu cầu thông tin, hãy trì hoãn là tùy chọn ưu tiên vì nó đảm bảo tất cả nội dung được truy xuất chính xác trước khi tệp được thực thi.
Mục tiêu của trì hoãn và không đồng bộ là giảm việc chặn hiển thị trang và bạn sẽ thấy sự cải thiện lớn về thời gian tải trang cho dù bạn sử dụng phương pháp nào.
Tôi khuyên bạn nên đọc bài viết của Zell Liew “Sử dụng thuộc tính Async và Defer” như thế nào và khi nào để có giải thích toàn diện hơn về thời điểm sử dụng defer và async.
Cách Trì hoãn Phân tích cú pháp Javascript bằng Plugin WordPress
Phần lớn các lệnh gọi Javascript trên trang web của bạn sẽ đến từ chủ đề WordPress của bạn và các plugin WordPress đã được kích hoạt, do đó, việc thêm các thuộc tính trì hoãn và không đồng bộ vào các phần tử tập lệnh là không thực tế.
Tốt hơn là sử dụng một plugin WordPress hiệu suất để trì hoãn việc phân tích javascript trong WordPress và đơn giản hóa quá trình áp dụng hoãn hoặc không đồng bộ trên toàn bộ trang web của bạn.
Hãy lưu ý đến thực tế là cài đặt cấu hình sai sẽ gây ra vấn đề với thiết kế trang web của bạn. Ví dụ:biểu mẫu liên hệ có thể không hiển thị chính xác trừ khi bạn chọn cài đặt cấu hình phù hợp hoặc loại trừ các tệp của biểu mẫu liên hệ khỏi tối ưu hóa.
Do đó, việc thử và sai là cần thiết để tìm ra cài đặt cấu hình phù hợp và hiệu suất tốt nhất cho trang web của bạn.
- Sao lưu Trang web - Sao lưu trang web của bạn trước khi bạn kích hoạt plugin WordPress tối ưu hóa
- Hiệu suất Kiểm tra - Kiểm tra hiệu suất của các trang chính trên trang web của bạn và mỗi khi bạn thay đổi cài đặt cấu hình tối ưu hóa
- Xem lại trang web của bạn - Kiểm tra để đảm bảo rằng không có phần nào của trang web bị hỏng sau khi thay đổi cấu hình của bạn
Nếu bạn gặp phải bất kỳ sự cố lớn nào khi trì hoãn phân tích cú pháp javascript, hãy hoàn nguyên về cài đặt mặc định của plugin. Bạn cũng có thể gỡ cài đặt plugin nếu nó không hoạt động hài hòa với trang web của bạn.
1. Tự động tối ưu hóa
Autoptimize là một giải pháp tối ưu hóa WordPress linh hoạt cho phép bạn tổng hợp và rút gọn Javascript, CSS và HTML. Nội dung được tối ưu hóa được lưu vào bộ nhớ đệm để cải thiện hiệu suất. Bộ nhớ cache này có thể nhanh chóng trở nên quá lớn, vì vậy tôi khuyến khích bạn sử dụng Autoclear Autoptimize Cache để tự động xóa bộ nhớ cache.
Mặc dù Autoptimize được biết đến với tính năng tổng hợp tệp, nó cũng có thể được sử dụng để trì hoãn việc phân tích cú pháp các tệp Javascript để chúng không bị chặn hiển thị. Mã Javascript và CSS cũng có thể được hiển thị nội tuyến và có các tùy chọn tối ưu hóa bổ sung cho hình ảnh, Phông chữ Google, biểu tượng cảm xúc và hơn thế nữa.
2. Plugin JavaScript không đồng bộ
Được phát triển bởi người tạo ra Autoptimize, Async JavaScript cho phép bạn áp dụng async và trì hoãn cho các tệp Javascript trên toàn bộ trang web của mình. Nó cung cấp cho bạn toàn quyền kiểm soát mọi tệp Javascript, cho phép bạn loại trừ jQuery, các tệp Javascript cụ thể, plugin WordPress và chủ đề WordPress. Nếu muốn, bạn có thể chỉ định chính xác tệp Javascript nào sẽ không đồng bộ và tệp nào sẽ hoãn lại.
Một trong những tính năng thú vị nhất của Async Javascript là trình hướng dẫn thiết lập chạy các bài kiểm tra hiệu suất trên GTmetrix cho tất cả các cài đặt cấu hình có thể có cho trang web của bạn. Đây là một cách tiết kiệm thời gian tuyệt vời vì kết quả hiển thị chính xác tốc độ trang web của bạn sẽ nhanh như thế nào với mỗi cấu hình, nhưng hãy nhớ kiểm tra trang web của bạn mỗi lần để đảm bảo không có khía cạnh nào của trang web của bạn bị hỏng.
3. Máy hoàn hảo
Perfmatters là một hộp công cụ hiệu suất cao cấp của WordPress tự hào có hàng tá tính năng hiệu suất độc đáo. Bán lẻ từ $ 24,95 mỗi năm, plugin cho phép bạn hoãn phân tích cú pháp các tệp Javascript (tất cả các tệp JS) trên trang web của mình. Các tệp jQuery có thể được đưa vào hoãn lại và bạn cũng có thể loại trừ các tệp Javascript cụ thể. Một tùy chọn thú vị khác mà nó cung cấp cho bạn là Javascript Delay, sẽ chỉ tải các tệp Javascript khi có sự tương tác của người dùng.
Perfmatters có thể được sử dụng để tắt các tính năng cốt lõi của WordPress nhằm cải thiện bảo mật và hiệu suất. Nó cũng cho phép bạn xác định URL đăng nhập tùy chỉnh, tải trước nội dung, tải hình ảnh chậm, tích hợp Google Analytics, tối ưu hóa Phông chữ Google, v.v.
Tính năng yêu thích của tôi là trình quản lý tập lệnh vì nó cho phép bạn bật và tắt các tệp Javascript và CSS cho mọi trang trên trang web của bạn. Điều này sẽ làm giảm kích thước của các trang đáng kể vì các nhà phát triển WordPress có thói quen xấu là tải các tệp Javascript và CSS trên toàn bộ trang web của bạn, ngay cả khi chúng chỉ cần thiết trên một vài trang.
4. Làm sạch nội dung
Asset CleanUp là một plugin WordPress tối ưu hóa có nhiều tính năng cho phép bạn giảm thiểu, kết hợp và trì hoãn việc phân tích cú pháp các tệp Javascript và CSS. Trình quản lý CSS và JS của nó hoạt động theo cách tương tự như trình quản lý tập lệnh của Perfmatter, cho phép bạn chỉ định xem tệp có được tải trên một trang cụ thể hay không. Bạn cũng có thể tắt cài đặt cốt lõi của WordPress, xóa mã HTML, tối ưu hóa Phông chữ của Google và hơn thế nữa.
Một giấy phép duy nhất cho Asset CleanUp Pro có giá bán lẻ € 42,36 mỗi năm. Nâng cấp cho phép bạn đặt mã nội tuyến và chỉ định không đồng bộ và trì hoãn cho các tệp Javascript trên cơ sở từng trang. Nó cũng mở khóa trình quản lý plugin và cho phép bạn kiểm soát tốt hơn cách tải nội dung trên trang web của bạn.
5. Tải trước đẩy HTTP / 2
HTTP / 2 Push Preload cho phép bạn đẩy và tải trước các tệp Javascript và CSS trên máy chủ được hỗ trợ HTTP2 của bạn bằng cách sử dụng chức năng tải hàng đợi. Điều này có thể được áp dụng cho tất cả các tệp hoặc bạn có thể chọn cấu hình từng tài nguyên riêng biệt. Các loại tài nguyên bao gồm tập lệnh, kiểu, âm thanh, nhúng, tìm nạp, phông chữ, hình ảnh, đối tượng và video.
Khi bạn nhập URL của tệp Javascript, bạn có thể chọn không đồng bộ hóa, trì hoãn hoặc xóa. HTTP / 2 Push Preload cho phép bạn xác định các quy tắc về thời điểm áp dụng cài đặt này. Bạn có thể xác định các quy tắc Javascript cho một tài nguyên cho tất cả các trang, cho điện thoại di động hoặc máy tính để bàn, cho các bài đăng và trang cụ thể, cho các danh mục, trang tìm kiếm, trang WooCommerce và hơn thế nữa.
Kết luận
Javascript tiếp tục là phương pháp được ưa thích để thêm nội dung động và các yếu tố tương tác vào các trang web. Vì nhiều chủ đề và plugin WordPress sử dụng Javascript, điều quan trọng là phải trì hoãn phân tích cú pháp javascript trong WordPress và sử dụng tính năng trì hoãn và không đồng bộ hóa để đảm bảo các trang hiển thị nhanh chóng và giảm việc chặn hiển thị trang.
Bạn sẽ tìm thấy chức năng áp dụng trì hoãn và không đồng bộ hóa trong nhiều plugin WordPress, mặc dù các giải pháp mà tôi đã đề cập trong bài viết này cung cấp cho bạn nhiều quyền kiểm soát hơn đối với các tệp Javascript của mình.
Trên trang web của riêng tôi, tôi sử dụng Autoptimize để tổng hợp tệp và Async JavaScript để trì hoãn Javascript. Tôi rất hài lòng với Async Javascript, mặc dù HTTP / 2 Push Preload có thể là một lựa chọn tốt hơn cho nhiều chủ sở hữu trang web vì nó cho phép bạn kiểm soát tốt hơn nơi áp dụng cài đặt tối ưu hóa.
Asset CleanUp và Perfmatters cung cấp các tính năng và chức năng tương tự nhau, vì vậy tôi không khuyên bạn nên sử dụng chúng cùng nhau. Asset CleanUp Pro chắc chắn cung cấp khả năng kiểm soát tốt hơn và các tính năng nâng cao hơn, mặc dù tôi vẫn tiếp tục sử dụng Perfmatters trên trang web của riêng mình để dọn dẹp WordPress vì nó dễ sử dụng hơn. Cả hai giải pháp sẽ nâng cao bất kỳ thiết lập tối ưu hóa WordPress nào, ngay cả khi bạn đang sử dụng một plugin WordPress khác để hoãn phân tích cú pháp javascript nhằm giảm chặn việc hiển thị trang.
Tôi khuyến khích bạn kiểm tra tất cả các plugin WordPress này để hoãn phân tích cú pháp javascript và thực hiện nhiều kiểm tra để đảm bảo bạn có cấu hình tốt nhất.
Chúc các bạn thành công.
Kevin