Trang WordPress tải nhanh mang lại lợi ích nghiêm túc khi nói đến việc nâng cao trải nghiệm người dùng, cải thiện khả năng hiển thị trang web trên công cụ tìm kiếm, và tăng lưu lượng truy cập tự nhiên.
Một trang web chứa HTML, CSS, JavaScript và hình ảnh, và mỗi thứ trong số 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 tác động lớn nhất đến kích thước trang nên quan trọng là giảm kích thước tệp hình ảnh bằng plugin tối ưu hóa hình ảnh WordPress.
| Loại mã | Cách sử dụng |
|---|---|
| HTML | Dùng cho nội dung và cấu trúc trang |
| CSS | Dùng cho font, màu sắc, khoảng cách và kiểu dáng khác |
| JavaScript | Dùng cho nút bấm, biểu mẫu, video, slider và hơn nữa |
Để cải thiện hiệu suất trang hơn nữa, bạn có thể defer phân tích cú pháp JavaScript trong WordPress có nghĩa là bạn có thể khuyên trình duyệt tải nội dung trang và hình ảnh trước khi tải JavaScript. Lấy biện pháp này có nghĩa là các yếu tố JavaScript như biểu mẫu và slider có thể mất thêm vài giây để tải, nhưng đây là 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 hai kỹ thuật gọi là Defer và Async. Cả hai phương pháp đều được hỗ trợ bởi các plugin cache WordPress phổ biến, dù giải pháp chuyên dụng sẽ cho bạn kiểm soát nhiều hơn về tệp JavaScript nào được tải sau.
Trong bài viết này, tôi sẽ giải thích lợi ích của việc defer tải tệp JavaScript và giới thiệu năm plugin WordPress hữu ích sẽ đơn giản hóa quy trình cho bạn.
Tôi khuyên bạn đọc toàn bộ bài viết để hiểu đầy đủ chủ đề, nhưng nếu bạn mới bắt đầu, điều duy nhất bạn nên nhớ từ bài viết này là Defer và Async có thể cải thiện đáng kể thời gian tải trang của trang web.
Các Cách Khác Nhau Để Defer Phân Tích Cú Pháp JavaScript Trong WordPress (Với Defer & Async)
JavaScript đã khẳng định mình là khối xây dựng quan trọng của trang web WordPress, được dùng để hiển thị nút bấm, biểu mẫu, thư viện phương tiện, âm thanh, video, bộ đếm ngược, dòng thời gian mạng xã hội, và hơn nữa.
Thật không may, JavaScript cũng là một trong những lý do chính khiến trang web tải chậm vì trình duyệt phải dừng lại, tải xuống và thực thi từng script trước khi có thể tiếp tục phân tích cú pháp mã đánh dấu HTML của trang.
Phân tích cú pháp (Parsing) là quá trình trình duyệt phân tích và chuyển đổi mã của trang sang định dạng 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ị" (Render-Blocking) vì nó đang trì hoãn quá trình hiển thị trang cho người truy cập.
Tài nguyên chặn hiển thị (Render-blocking resources) là lý do phổ biến khiến trang web WordPress tải chậm. CSS quan trọng có thể hiển thị nội tuyến (inline) để ngăn chặn render-blocking, nhưng tốt hơn là defer tải JavaScript sau bằng Defer hoặc Async để ngăn mã JavaScript chặn hiển thị trang.
Cũng là thói quen tốt để loại bỏ mã JavaScript không 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ác tệp JavaScript lớn qua quá trình gọi là Minification (Tối thiểu hóa), loại bỏ khoảng trắng và mã không cần thiết từ mỗi tệp JavaScript.
Một trong những chỉ số quan trọng nhất mà các dịch vụ kiểm tra hiệu suất trang web như Google PageSpeed Insights và GTmetrix xem xét là First Contentful Paint (FCP - Hiển thị nội dung đầu tiên), là thời gian cần thiết để nội dung đầu tiên hiển thị cho người truy cập. Google nói rằng thời gian FCP 0 đến 1,8 giây là tốt, 1,8 đến 3 giây là trung bình. Bất cứ thứ gì trên 3 giây được 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ụ kiểm tra hiệu suất để xem tệp JavaScript và CSS nào đang chặn hiển thị trang. Như bạn thấy từ ảnh chụp màn hình dưới đây, tài nguyên CSS và JavaScript chặn hiển thị có thể mất giây để tải xuống nên nếu bạn có thể loại bỏ tài nguyên này, trang của bạn sẽ tải nhanh đáng kể.
Cách hiệu quả nhất để loại bỏ tệp JavaScript chặn hiển thị là dùng thuộc tính defer và async. Các thuộc tính boolean này chỉ có thể dùng với phần tử HTML script khi thuộc tính SRC được dùng để gọi tệp bên ngoài.
<script src="javascript.js"></script>Tệp JavaScript
<script defer src="javascript.js"></script>Tệp JavaScript Với Defer
<script async src="javascript.js"></script>Tệp JavaScript Với Async
Khi bạn thêm thuộc tính defer hoặc async vào phần tử HTML script, bạn đang khuyên trình duyệt tải tệp cùng lúc trang được phân tích cú pháp. Với defer, tệp được thực thi khi trang đã được phân tích cú pháp hoàn toàn.
Ngược lại, thuộc tính async là hoạt động bất đồng bộ thực thi tệp ngay khi nó đã được tải xuống. Do đó, tổng thời gian phân tích cú pháp trang với async sẽ cao hơn một chút vì trình duyệt sẽ tạm dừng phân tích HTML để thực thi tệp.
Nếu bạn chỉ định cả defer và async, trình duyệt sẽ dùng async.
| Defer | Async |
|---|---|
| Tải tệp cùng lúc trang được phân tích cú pháp | Tải 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 nó sẵn sàng |
| Các tệp được thực thi theo thứ tự tuần tự | Tạm dừng phân tích HTML để thực thi tệp |
Một tiêu chuẩn quan trọng cần hiểu là Document Object Model (DOM - Mô hình đối tượng tài liệu). DOM đại diện cho toàn bộ tài liệu, như tệp XML hoặc trang HTML, như một đối tượng duy nhất. Các yếu tố quan trọng như head, body và header có thể được coi là các nhánh của DOM.
Nếu một tệp JavaScript không yêu cầu thông tin từ tệp khác hoặc từ chính DOM, có thể đáng giá dùng phương pháp async vì các yếu tố quan trọng của trang sẽ hiển thị nhanh hơn. Chỉ cần lưu ý rằng async có thể gây lỗi với trang web nếu tệp yêu cầu thông tin chưa được tải.
Nếu tệp JavaScript yêu cầu thông tin, defer là lựa chọn ưu tiên vì nó đảm bảo tất cả nội dung được truy xuất đúng cách trước khi tệp được thực thi.
Mục tiêu của defer và async là giảm chặn hiển thị trang và bạn sẽ thấy cải thiện lớn về thời gian tải trang bất kể phương pháp nào bạn dùng.
Tôi khuyên đọc bài viết "How and when to use Async and Defer attributes" của Zell Liew để có giải thích toàn diện hơn về khi nào dùng defer và async.
Cách Defer Phân Tích Cú Pháp JavaScript Bằng Plugin WordPress
Phần lớn lời gọi JavaScript trên trang web của bạn sẽ đến từ theme WordPress và plugin WordPress đã kích hoạt, do đó không thực tế để thủ công thêm thuộc tính defer và async vào phần tử script.
Tốt hơn là dùng plugin hiệu suất WordPress để defer phân tích cú pháp JavaScript trong WordPress và đơn giản hóa quy trình áp dụng defer hoặc async trên toàn trang web.
Hãy lưu ý rằng cài đặt sai cấu hình sẽ gây vấn đề với thiết kế trang web. Ví dụ, biểu mẫu liên hệ có thể không hiển thị đúng trừ khi bạn chọn cài đặt cấu hình đúng hoặc loại trừ tệp của biểu mẫu khỏi tối ưu hóa.
Thử và sai (Trial and error) do đó là cần thiết để tìm cài đặt cấu hình đúng và hiệu suất tốt nhất cho trang web.
- Sao lưu trang web – Sao lưu trang web trước khi kích hoạt plugin tối ưu hóa WordPress
- Kiểm tra hiệu suất – Kiểm tra hiệu suất các trang quan trọng trên trang web và mỗi khi bạn thay đổi cài đặt tối ưu hóa
- Xem xét trang web – Kiểm tra không phần nào của trang web bị hỏng sau khi thay đổi cấu hình
Nếu bạn gặp vấn đề lớn khi defer phân tích cú pháp JavaScript, hãy quay lại cài đặt mặc định của plugin. Plugin cũng có thể gỡ cài đặt nếu nó không hoạt động hài hòa với trang web.
1. Autoptimize
Autoptimize là giải pháp tối ưu hóa WordPress linh hoạt cho phép bạn gộp (aggregate) và minify (tối thiểu hóa) JavaScript, CSS và HTML. Nội dung tối ưu hóa được cache để cải thiện hiệu suất. Cache này có thể nhanh chóng trở nên quá lớn, nên tôi khuyên dùng Autoclear Autoptimize Cache để tự động xóa cache.
Mặc dù Autoptimize nổi tiếng với việc gộp tệp, nó cũng có thể dùng để defer phân tích cú pháp tệp JavaScript để chúng không chặn hiển thị. Mã JavaScript và CSS cũng có thể hiển thị nội tuyến và có tùy chọn tối ưu hóa thêm cho hình ảnh, Google Fonts, emoji, và hơn nữa.
TẢI AUTOPTOMIZE
2. Plugin Async JavaScript
Đượ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à defer cho tệp JavaScript trên toàn trang web. Nó cho bạn kiểm soát hoàn toàn mọi tệp JavaScript, cho phép loại trừ jQuery, tệp JavaScript cụ thể, plugin WordPress và theme WordPress. Nếu bạn thích, bạn có thể chỉ định chính xác tệp JavaScript nào dùng async và nào dùng defer.
Một trong những tính năng cool nhất của Async JavaScript là trình hướng dẫn thiết lập (setup wizard) chạy kiểm tra hiệu suất trên GTmetrix cho tất cả cài đặt cấu hình có thể cho trang web của bạn. Đây là trình tiết kiệm thời gian tuyệt vời vì kết quả cho thấy chính xác trang web sẽ nhanh như thế nào với mỗi cấu hình, nhưng hãy chắc chắn kiểm tra trang web mỗi lần để đảm bảo không khía cạnh nào bị hỏng.
TẢI ASYNC JAVASCRIPT
3. Perfmatters
Perfmatters là hộp công cụ hiệu suất WordPress cao cấp tự hào về hàng chục tính năng hiệu suất độc đáo. Giá bán lẻ từ 24,95 USD/năm, plugin cho phép bạn defer phân tích cú pháp tệp JavaScript (tất cả tệp JS) trên trang web. Tệp jQuery có thể bao gồm trong defer và bạn có thể loại trừ tệp JavaScript cụ thể. Một tùy chọn cool khác nó cho bạn là JavaScript Delay (Trì hoãn JavaScript), chỉ tải tệp JavaScript khi có tương tác người dùng.
Perfmatters có thể dùng để tắt tính năng lõi WordPress để cải thiện bảo mật và hiệu suất. Nó cũng cho bạn định nghĩa URL đăng nhập tùy chỉnh, preload nội dung, lazy load hình ảnh, tích hợp Google Analytics, tối ưu Google Fonts, và hơn nữa.
Tính năng yêu thích của tôi là trình quản lý script (script manager) vì nó cho phép bạn bật và tắt tệp JavaScript và CSS cho mọi trang trên trang web. Điều này sẽ giảm kích thước trang đáng kể vì nhà phát triển WordPress có thói quen xấu là tải tệp JavaScript và CSS trên toàn trang web, ngay cả khi chúng chỉ cần thiết trên vài trang.
TRANG CHỦ CHÍNH THỨC
4. Asset CleanUp
Asset CleanUp là plugin tối ưu hóa WordPress giàu tính năng cho phép bạn minify, gộp và defer phân tích cú pháp tệp JavaScript và CSS. Trình quản lý CSS và JS của nó hoạt động tương tự như script manager của Perfmatters, cho phép bạn chỉ định tệp được tải trên trang cụ thể. Bạn cũng có thể tắt cài đặt lõi WordPress, dọn dẹp mã HTML, tối ưu Google Fonts, và hơn nữa.
Giấy phép đơn lẻ cho Asset CleanUp Pro giá 42,36 EUR/năm. Nâng cấp cho phép bạn đặt mã nội tuyến và chỉ định async và defer cho tệp JavaScript trên cơ sở từng trang. Nó cũng mở khóa trình quản lý plugin và cho bạn kiểm soát lớn hơn về cách tài nguyên được tải trên trang web.
TẢI ASSET CLEANUP ASSET CLEANUP PRO
5. HTTP/2 Push Preload
HTTP/2 Push Preload cho phép bạn push và preload tệp JavaScript và CSS trên máy chủ hỗ trợ HTTP2 bằng hàm enqueue loading. Điều này có thể áp dụng cho tất 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. Loại tài nguyên bao gồm script, style, audio, embed, fetch, font, image, object và video.
Khi bạn nhập URL của tệp JavaScript, bạn có thể chọn async, defer hoặc xóa. HTTP/2 Push Preload cho phép bạn định nghĩa quy tắc về khi cài đặt này áp dụng. Bạn có thể định nghĩa quy tắc JavaScript cho tài nguyên cho tất cả trang, cho mobile hoặc desktop, cho bài đăng và trang cụ thể, cho danh mục, trang tìm kiếm, trang WooCommerce và hơn nữa.
TẢI HTTP/2 PUSH PRELOAD
Tóm Tắt
JavaScript tiếp tục là phương pháp ưu tiên để thêm nội dung động và yếu tố tương tác vào trang web. Vì nhiều theme và plugin WordPress dùng JavaScript, quan trọng là defer phân tích cú pháp JavaScript trong WordPress và dùng defer và async để đảm bảo trang hiển thị nhanh và giảm chặn hiển thị trang.
Bạn sẽ tìm thấy chức năng áp dụng defer và async trong nhiều plugin WordPress, dù các giải pháp tôi tham khảo trong bài viết này cho bạn kiểm soát nhiều hơn tệp JavaScript.
Trên trang web của tôi, tôi dùng Autoptimize cho gộp tệp và Async JavaScript cho defer JavaScript. Tôi hài lòng với Async JavaScript, dù HTTP/2 Push Preload có thể là lựa chọn tốt hơn cho nhiều chủ trang web vì nó cho kiểm soát tốt hơn về nơi cài đặt tối ưu hóa được áp dụng.
Asset CleanUp và Perfmatters cung cấp tính năng và chức năng tương tự nên tôi không khuyên dùng chúng cùng nhau. Asset CleanUp Pro chắc chắn cung cấp kiểm soát tốt hơn và tính năng nâng cao hơn, dù tôi tiếp tục dùng Perfmatters trên trang web của mình để dọn dẹp WordPress vì nó dễ dùng hơn. Cả hai giải pháp đều sẽ nâng cao bất kỳ thiết lập tối ưu hóa WordPress nào, ngay cả khi bạn dùng plugin WordPress khác để defer phân tích cú pháp JavaScript để giảm chặn hiển thị trang.
Tôi khuyên bạn kiểm tra tất cả các plugin WordPress này để defer phân tích cú pháp JavaScript và thực hiện nhiều bài kiểm tra để đảm bảo bạn có cấu hình tốt nhất.
Chúc may mắn.
Kevin