Có lẽ các quản trị viên website sẽ không mấy xa lạ với cảnh báo “Eliminate render-blocking resources” (loại bỏ các tài nguyên chặn hiển thị) của PageSpeed Insights. Vậy tài nguyên chặn hiển thị là gì? Làm sao để kiểm tra trang web có bị chặn tài nguyên không? Xóa JavaScript chặn hiển thị wordpress như thế nào? Tất cả sẽ được giải đáp trong những chia sẻ ngay sau đây.
1. Tài nguyên chặn hiển thị là gì?
Tài nguyên chặn hiển thị (render-blocking resources) là những tệp file tĩnh quan trọng trong quá trình hiển thị trang của website như HTML, font chữ, JavaScript, CSS. Khi truy cập vào một trang của website và gặp tài nguyên chặn hiển thị thì trình duyệt sẽ ưu tiên xử lý các tệp quan trọng của tài nguyên chặn hiển thị này trước. Rồi mới bắt đầu tải xuống phần còn lại của tài nguyên để hiển thị trên trang.
Nhưng những tài nguyên chặn không hiển thị (được tải sau) sẽ không làm trì hoãn việc hiển thị trên trang. Sau khi hiển thị các tài nguyên chặn hiển thị này, trên trang trình duyệt vẫn có thể tải chúng xuống một cách an toàn.
Vấn đề ở đây là không phải toàn bộ các tài nguyên mà trình duyệt cho là chặn hiển thị đều cần thiết cho thời gian phản hồi nội dung đầu tiên trên trang. Điều này phụ thuộc vào đặc điểm riêng của từng trang khác nhau.
2. Cách kiểm tra trang web liệu có tài nguyên chặn hiển thị
Sử dụng Google PageSpeed Insights để đánh giá xem trang web WordPress của bạn hiện có tài nguyên chặn hiển thị hay không. Tất cả những gì cần làm là nhập URL mà bạn muốn kiểm tra. Trong trường hợp, bạn gặp vấn đề với tài nguyên chặn hiển thị. PageSpeed Insights sẽ tiến hành liệt kê từng tài nguyên riêng lẻ trong phần loại bỏ các tài nguyên chặn hiển thị.
>>> Đọc ngay: anchor link là gì?
3. TOP 5 cách xóa JavaScript chặn hiển thị WordPress
Về cơ bản, bạn có thể rút ngắn chặn đường hiển thị các tài nguyên quan trọng khi giảm số lượng tài nguyên chặn hiển thị. Hơn nữa, còn có thể giảm rất nhiều thời gian tải trang. Như vậy, có thể giúp nâng cao trải nghiệm người dùng trên trang cũng như tối ưu hóa công cụ tìm kiếm (SEO). Vậy cách để xóa JavaScript chặn hiển thị là gì?
>>> Tìm hiểu SEO là gì? Có vai trò gì trong Digital Marketing?
Không thêm thẻ CSS theo quy luật @import
Bạn có thể thêm thẻ CSS vào trang bằng những như sau:
- Chèn thẻ <link rel=”stylesheet”> vào file HTML
- Thêm luật @import vào file CSS
Tuy luật @import sẽ giúp cho file HTML gọn gàng hơn, tránh mã code thừa cũng như cho phép bạn giữ toàn bộ các dependencies biên dịch file CSS ở cùng một nơi. Nhưng trong việc trình bày/ hiển thị đây không phải là một sự lựa chọn khôn ngoan.
Luật @import cho phép bạn nhập file CSS từ các Stylesheet khác. Tuy nhiên cách này sẽ khiến cho trình duyệt xử lý file CSS chậm hơn vì nó phải tải toàn bộ các file được nhập vào. Quá trình hiển thị vẫn bị chặn cho đến khi quá trình này diễn ra.
Bạn hoàn toàn có thể sử dụng thẻ <link> hoặc dùng các công cụ nén/ rút gọn file để gộp các file CSS lại nếu muốn thêm nhiều file CSS cho trang web cho mình.
Bạn cần thêm yếu tố <link> vào thẻ <head> của page HTML tương tự như cách sau:
Dùng thuộc tính media cho thẻ CSS điều kiện
Các trình duyệt thường mặc định xem tất cả các file CSS là các tài nguyên chặn hiển thị. Tuy nhiên, bạn có thể thông báo cho trình duyệt về sự tồn tại của file CSS có điều kiện nếu thêm thuộc tính media vào thẻ <link>.
File CSS có điều kiện chỉ được sử dụng trong các trường hợp nhất định. Chẳng hạn như: cao/ thấp hơn kích thước viewport (thẻ meta viewport cho biết giao diện website hiển thị trên từng thiết bị/ khung hình). Với thuộc tính meta, bạn hoàn toàn có thể xác định điều kiện của từng thiết bị riêng biệt đối với file CSS.
Ví dụ cụ thể như sau
Để xử lý vấn đề hiển thị cho từng giao diện thiết bị bạn có thể dùng bất kỳ giá trị nào cho media query trong file CSS. Có thể sẽ khó hiểu với bạn tuy nhiên không phải quá lo lắng dưới đây là một số ví dụ giúp bạn hiểu dễ dàng hơn:
<link href=”print.css” rel=”stylesheet” media=”print”> <link href=”large.css” rel=”stylesheet” media=”screen and (min-width: 1500px)”> <link href=”mobile.css” rel=”stylesheet” media=”screen and (max-width: 600px)”>
Tuy trên tất cả các thiết bị thì các file này vẫn được tải nhưng nếu không đáp ứng đúng điều kiện trong thẻ CSS thì chúng sẽ trở thành tài nguyên chặn không hiển thị. Và đương nhiên, nếu đáp ứng đúng điều kiện thì những thẻ này vẫn là tài nguyên chặn hiển thị.
>>> Đọc thêm: breadcrumbs là gì?
Thêm một ví dụ nữa
Thẻ Stylesheet mobile.css sẽ trở thành tài nguyên chặn hiển thị trên thiết bị mobile với độ rộng viewport tối đa là 600px. Tuy nhiên, thẻ stylesheet mobile.css ở ví dụ trên sẽ lại trở thành tài nguyên chặn không hiển thị nếu đối với thiết bị có độ rộng Viewport lớn hơn 600px.
Hẳn là bạn đã thấy dễ hiểu hơn rồi đúng không nào?
Hãy giải nén toàn bộ các luật @media và lưu chúng thành các file riêng biệt bằng plugin PostCSS. Nếu như bạn có file CSS sẵn chỉ dành cho một hoặc một vài Queries. Thủ thuật tối ưu hiển thị này gọi là phân tách code.
Tuy thường được nhắc đến trong conjunction với JavaScript nhưng cách phân tách code này cũng có thể phân tách các file CSS lớn hơn. Hoặc nếu bạn cần rút ngắn thời gian tải các tài nguyên hiển thị quan trọng và giảm thời gian tải trang đầu tiên cũng có thể load từng file riêng.
>>> Tìm hiểu về chuyển hướng 301 để tận dụng chức năng này tốt nhất!
Dùng thuộc tính defer và async để loại bỏ JavaScript chặn hiển thị
File JavaScript được thêm vào thẻ <head> của trang web thường bị xem là các tài nguyên chặn hiển thị. Thông qua cách chèn thẻ <script> ngay trước khi đóng thẻ </body> thay vì là thẻ <head> như thông thường. Bạn hoàn toàn có thể xóa chúng ra khỏi quá trình hiển thị các tài nguyên quan trọng.
Các trình duyệt trong trường hợp này, sẽ bắt đầu tải file JavaScript sau khi đã hoàn tất tải toàn bộ code HTML. Nhưng do JavaScript được tải sau nên các yếu tố được tải vì nó như hiệu ứng, ads, chức năng động… cũng sẽ được tải sau. Đặc biệt chắc chắn bạn sẽ phải đợi dài cổ để tải được cả trang web nếu file JavaScript càng dài. Đây cũng là vấn đề khiến kết nối chậm, ảnh hưởng xấu đến trải nghiệm của người dùng.
Thuộc tính Defer và Async
Giải pháp cho vấn đề này chính là thuộc tính defer và async của thẻ <Script>. Cả 2 thuộc tính này đều là thuộc tính cho các phép so sánh và điều kiện trong JavaScript đó là Boolean.
Những thuộc tính này sẽ làm cho <script> được chèn vào thẻ <head> của trang web chặn không hiển thị. Và để trình duyệt không chặn quá trình hiển thị trên trang thuộc tính defer chỉ dẫn cho trình duyệt tải thẻ <script>.
Ví dụ 1
Thẻ <script> defer cho phép tải theo thứ tự. Thẻ script được hiển thị theo mặc định chỉ khi thiết lập nondefer. Script01.js sẽ được thực thi đầu tiên với trường hợp này dù cho bất kỳ file script nào được load trước. Bạn hoàn toàn không thể thêm thuộc tính defer vào thẻ script inline (nội tuyến). Thuộc tính chỉ hoạt động khi chèn vào thẻ Script External (ngoại tuyến) ở nơi thẻ script sử dụng thuộc tính SRC.
Ngoài ra, ASYNC lại thông báo cho trình duyệt biết rằng thẻ script hoàn toàn độc lập với trang web. Khi đó, trình duyệt này sẽ tải thẻ script và xem nó như là tài nguyên chặn không hiển thị giống như <script> defer. Nhưng thuộc tính ASYNC này lại khác ở chỗ là không quy định thứ tự tải như thuộc tính defer. Vì thế, bất kỳ khi nào hoàn tất tải xong trang web thuộc tính này sẽ thực thi.
Ví dụ 2
Tôi không chắc với trường hợp này thẻ script nào script03.js hay script04.js sẽ được tải trước. Điều này không phụ thuộc vào tốc độ tải thẻ script chậm hay nhanh. Bạn nên nhớ rằng, thứ tự tải file sẽ hoàn toàn không bị ảnh hưởng vì thẻ <script> chứa thuộc tính ASYNC nằm riêng biệt.
Bạn nên dùng thuộc tính defer cho thẻ script nếu thứ tự tải file quan trọng cho quá trình hiển thị trên trang.
Bạn hãy sử dụng thuộc tính ASYNC cho thẻ script nếu bạn có các thẻ script bên thứ 3 riêng biệt như tracking dữ liệu, ads cùng các thẻ script phân tích dữ liệu. Chẳng hạn, khi tải trang trên trình duyệt Google Analytics thường đề xuất thêm thuộc tính ASYNC vào thẻ script.
Nén hoặc gộp file CSS và JavaScript
Trong quá trình hiển thị các yếu tố quan trọng trên trang việc loại bỏ JavaScript và CSS chặn hiển thị không cần thiết. Hãy nén hoặc gộp cả tài nguyên chặn hiển thị và chặn không hiển thị trên trang.
Chẳng hạn, bạn hoàn toàn có thể gộp những file có cùng quy luật tải giống nhau và nén các file tách rời. Vì những file đã được nén sẽ nhẹ hơn. Và việc gộp file có nghĩa là sẽ có ít file hơn trong quá trình hiển thị các yếu tố quan trọng trên trang. Hoàn thành hiển thị trang đầu tiên sẽ sớm hơn.
Thêm vào đó, để tải các tài nguyên chặn không hiển thị sẽ tiêu tốn ít thời gian hơn. Trên thực tế, có không ít công cụ có sẵn hỗ trợ bạn nén hoặc gộp file như: CSS Minifier, Minify, PostCSS, Minify Code. Và nhanh chóng giảm số lượng tài nguyên chặn hiển thị bằng cách kết hợp Parcel, webpack, Rollup cùng với chức năng nén, gộp, phân tách.
Tải font chữ tùy chỉnh theo vị trí
Những font chữ tùy chỉnh được gọi từ thẻ <head> của trang web nên cũng được coi là tài nguyên chặn hiển thị. Ví dụ:
<link href=”https://fonts.googleapis.com/css2?family=Lato&display=swap” rel=”stylesheet”>
Thông qua cách thêm yếu tố vị trí hơn là lấy dữ liệu từ CDN (Content Delivery Network) như Google CDN chẳng hạn. Bạn có thể giảm ảnh hưởng của các font chữ tùy chỉnh này hiển thị ở đầu trang. Người tạo ra font chữ thường thêm nhiều luật @font-face mà bạn không cần thiết sử dụng.
Ví dụ 1
Google Font thêm luật @font-face cho toàn bộ các mẫu ký tự. Ví dụ như chữ Latinh, tiếng Việt, chữ Cyril, tiếng Trung… Dù chỉ muốn dùng một mẫu ký tự (chẳng hạn như Latin) nhưng file CSS được thêm vào với thẻ <link>, luật @font-face cho 7 mẫu ký tự khác nhau. Trên thực tế, Google Font không tải tất cả file font chữ cho toàn bộ các mẫu ký tự. Mà chúng chỉ thêm các luật @font-face vào file CSS.
Bạn có thể nén file CSS liên quan đến font chữ. Hoặc gộp các file này lại với nhau cho file CSS nếu bạn thêm font chữ theo từng địa điểm. Thông qua cách này, hãy dùng công cụ Google Web Fonts Helper để tạo luật @font-face cho Google Fonts nhanh chóng.
>>> Tìm hiểu ngay: user experience là gì?
Ví dụ 2
Mẫu bên dưới là toàn bộ những gì bạn cần thêm vào, kể cả @font-face Lato ở thể thông thường (Regular).
/* lato-regular – latin */
@font-face {
font-family: ‘Lato’;
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(‘Lato Regular’), local(‘Lato-Regular’),
url(‘../fonts/lato-v16-latin-regular.woff2’) format(‘woff2’),
url(‘../fonts/lato-v16-latin-regular.woff’) format(‘woff’);
}
Chú ý rằng công cụ Google Web Fonts Helper sẽ không thêm luật font-display: swap cho bạn. Bạn hoàn toàn có thể chỉ dẫn cho trình duyệt nhanh chóng dùng font chữ hệ thống. Sau đó, tráo đổi với font chữ tùy chỉnh khi trình duyệt đang tải với font-display cùng giá trị swap.
Khi bạn kéo font chữ từ CDN của Google quy luật này cũng được thêm vào. Font chữ tùy chỉnh vẫn đang tải sẽ giúp bạn tránh trường hợp phần chữ không hiển thị. Bạn hãy đảm bảo rằng bạn đang nén định dạng font chữ trên trình duyệt. Như WOFF hay WOFF2 khi bạn tải font chữ theo từng địa điểm.
Chú ý: Những file nhẹ hơn cũng sẽ làm giảm ảnh hưởng xấu của các tài nguyên chặn hiển thị. Vì thế, Google Web Fonts Helper cũng sẽ cho bạn tải file zip chứa toàn bộ các font chữ mà bạn cần khi tạo luật @font-face.
Đọc thêm các bài viết hay:
Kết luận
Những chia sẻ TIEN ZIVEN về cách loại bỏ các tài nguyên chặn hiển thị ở trên mong rằng đã giúp bạn hiểu rõ hơn vấn đề này. Từ đó biết cách kiểm tra xem tài nguyên có bị chặn hiển thị hay không? Và sử dụng tốt các thủ thuật loại bỏ hay giảm số lượng tài nguyên chặn hiển thị trên trang. Hy vọng bạn tối ưu tốc độ tải trang Pagespeed cho website tốt hơn.
