Xóa JavaScript chặn hiển thị và Giảm bớt JavaScript là hai phương pháp tối ưu hóa để tăng tốc trang web, đây cũng là hai yếu tố quan trọng trong Google Pagespeed.
Hướng dẫn xóa javascript chặn hiển thị wordpress mới nhất 2020
Xóa JavaScript chặn hiển thị
Trước khi trình duyệt đủ nội lực hiển thị một trang, nó phải thiết lập cây DOM bằng hướng dẫn nghiên cứu cú pháp đánh dấu HTML. Trong công cuộc này, bất cứ khi nào trình phân tích cú pháp gặp một tập lệnh, nó phải dừng và thực thi nó trước khi nó đủ sức thường xuyên phân tích cú pháp HTML. Trong trường hợp của một kịch bản bên ngoài, trình đánh giá cú pháp cũng buộc phải đợi tài nguyên tải xuống, đủ sức phải chịu một hoặc nhiều vòng liên kết mạng và sử dụng chậm thời gian hiển thị trang trước nhất đó là lý do chúng ta phải loại bỏ javascript và css chặn hiển thị
ví dụ dưới đây là mẹo chèn jQuery vào mã HTML:
Khi trình duyệt đăng trang, nó sẽ dừng việc phân tích ở đây và mong muốn tập lệnh này được đăng xong trước khi tiếp tục; giống như vậy, tập lệnh JavaScript ở trên đang chặn hiển thị của trang.
Nhưng liệu việc đăng các tập lệnh JavaScript trước khi đánh giá xong cú pháp HTML có phải là điều cần thiết không? Chẳng hạn các tập lệnh JavaScript của Sharethis, Fb, Google+, Twitter sử dụng để share link lên mạng xã hội có cần thiết phải được hiện thị song song với các nội dung quan trọng trên website không? Theo mình nghĩ thì người truy cập sẽ k sử dụng bất kỳ hành động nào trước khi họ xem nội dung trên trang web.
Xem thêm: Tổng hợp các thủ thuật tối ưu hình ảnh wordpress mới nhất 2020
vì thế, tải một đống tập lệnh JavaScript trước khi content trong màn hình đầu tiên được hiển thị là điều không cần thiết, thậm chí là ngu ngốc. Trừ khi bạn muốn tập lệnh JavaScript được thực thi để tương tác bổ sung trên mã HTML trước khi hiển thị đến người truy cập, gợi ý thêm hiệu ứng hoặc thêm, loại bỏ các phần tử so với một nhóm phân khúc user.
Bạn đủ sức nhúng nội tuyến ngay trong mã HTML, điều này giúp giảm một hoặc nhiều vòng kết nối mạng, không những thế nó cũng sử dụng tăng kích thước HTML, vì vậy nó chỉ phù hợp so với các tập lệnh JavaScript nhỏ.
async và defer – loại bỏ các tài nguyên chặn hiển thị
công thức tốt nhất để xóa JavaScript chặn hiển thị là dùng tính chất async (tải không đồng bộ) hoặc defer (trì hoãn) việc tải các tập lệnh JavaScript. Ngoài ra thì chúng ta còn phải loại bỏ các tài nguyên chặn hiển thị
khái niệm và phương pháp sử dụng:
tính chất async và defer là thuộc tính boolean. Khi async có mặt, nó định hình rằng tập lệnh sẽ được thực hiện k đồng bộ ngay khi nó có sẵn. Khi defer có mặt, nó định hình rằng tập lệnh được thực hiện khi trang đã hoàn thành việc phân tích cú pháp. loại bỏ các tài nguyên chặn hiển thị
note: thuộc tính async và defer chỉ dành cho các tập lệnh bên ngoài (và chỉ nên được sử dụng nếu tính chất src có mặt). Có một số phương pháp mà tập lệnh bên ngoài có thể được thực thi:
- Nếu async hiện diện: Tập lệnh được thực hiện k đồng bộ với phần còn lại của trang (tập lệnh sẽ được thực thi trong khi trang liên tục đánh giá cú pháp).
- Nếu async không hiện diện và defer có mặt: Tập lệnh được thực thi khi trang vừa mới nghiên cứu xong.
- Nếu async hoặc defer hiện diện: Tập lệnh được tìm nạp và thực hiện ngay lập tức, trước khi trình duyệt tiếp tục phân tích cú pháp trang.
- Async: đối với các kịch bản cần thiết, bạn nên gồm có nó trước nhất trong thẻ để tập lệnh này được đăng càng sớm càng tốt.
- Defer: Chỉ nên trì hoãn với các kịch bản không cần thiết phải đăng ngay trên trang web, k có sự không giống biệt giữ việc đặt thẻ script trong hay .
gợi ý về phương pháp dùng tính chất async để đăng tập lệnh jQuery:
Tập lệnh jQuery sẽ được đăng ngay mà không chặn trình phân tích cú pháp, HTML liên tục được đăng mà không cần chờ tập lệnh jQuery đăng xong.
Hầu hết các tập lệnh của JavaScript như Google+ chia sẻ và Google Adsense được Google phân phối đều dùng tính chất async sử dụng mặc định.
ví dụ về mẹo sử dụng tính chất defer để tải tập lệnh jQuery:
jQuery sẽ được hoãn lại cho đến sau khi kết xuất ban đầu hoặc các phần quan trọng không giống của trang vừa mới đăng xong. làm như vậy có thể giúp giảm ganh đua tài nguyên và thay đổi hiệu suất.
Các lỗi được biết
đăng k đồng bộ và trì hoãn JavaScript là cách thức tốt để xóa JavaScript chặn hiển thị. tuy nhiên nó cũng có một số lỗi mà bạn cần note.
gợi ý bạn tải không đồng bộ jQuery giống như sau:
Vì jQuery Migrate cần hàm jQuery nhưng khi bạn tải k đồng bộ jQuery, trình duyệt sẽ tiếp tục đăng HTML mà k cần chờ jQuery được đăng xong. do vậy, các tập lệnh JavaScript và các kịch bản JavaScript đủ nội lực được thực thi trước khi hàm jQuery được đăng, cho nên đây là tại sao gây ra lỗi. Uncaught ReferenceError: jQuery is not defined là một lỗi thông dụng, nguyên do là hàm jQuery chưa được tải, bạn không thể gọi một hàm hoặc một biến khi nó chưa được tải. giống như đoạn mã mã ở trên, bạn sẽ xem hàm jQuery chưa được định nghĩa (undefined) trong Console của trình duyệt.
Để giải quyết lỗi này, bạn có thể k cần phải tải không đồng bộ hoặc trì hoãn các tập lệnh JavaScript chứa các hàm và biến cần thiết được dùng trong các mã JavaScript ở phía sau.
mẹo tốt nhất là gộp tất cả các tập lệnh JavaScript và các đoạn mã JavaScript vào trong một tập tin duy nhất, sau đó bạn đủ sức đăng không đồng bộ hoặc trì hoãn nó.
Tạo thẻ script bằng JavaScript
Mình đã tạo thẻ script bằng JavaScript và sử dụng một thử nghiệm, hiệu quả cho thấy có vẻ như trình duyệt Google Chrome và Firefox sẽ trì hoãn việc tải tập lệnh JavaScript trong thẻ script được xây dựng. Nhưng có một ưu điểm mà bạn nên dùng JavaScript để tạo thẻ script thay vì chèn mã HTML là tính linh động của nó.
Trong nhiều trường hợp, website của bạn chỉ cần tải tập tin để giúp sức cho một group đối tượng user nào đó, hoặc đối với từng group sẽ phục vụ theo phương pháp không giống nhau. gợi ý, bạn yêu cầu người truy cập vào website phải nhấn nút chấp thuận một việc gì đó như là chính sách Cookie… nhưng điều này sẽ không còn cần thiết nữa nếu họ đã chấp thuận. vì vậy, bạn đủ sức dùng JavaScript để test thông tin và chỉ đăng các tập lệnh khi quan trọng, điều này sẽ giúp tối ưu hóa phân phối JavaScript trên website của bạn.
Ví dụ:
if (!localStorage.getItem('agreed'))
localStorage.setItem('agreed','yes');
var head=document.getElementsByTagName('head')[0];
var script=document.createElement('script');
script.async=true;
script.src='/jscuaban.js';
head.appendChild(script);
Để biết tất nhiên trang web của bạn đã đăng không đồng bộ hoặc trì hoãn đúng phương pháp hay chưa, chỉ cần check mục Loại bỏ JavaScript và CSS chặn hiển thị trong content trong màn ảnh trước hết của Google Pagespeed.
Giảm bớt JavaScript
k đồng bộ và trì hoãn là bí quyết tối ưu hóa cách tải JavaScript, bạn cũng nên giảm bớt JavaScript để các tập lệnh và kịch bản có click thước nhỏ nhất có thể, điều này giúp tăng tốc độ trang web đáng kể. xem thêm về phương pháp giảm bớt HTML, CSS và JavaScript. Bạn nên giữ phiên bản gốc để không khó khăn sửa đổi và thường xuyên phát triển về sau và sử dụng phiên bản đã được tăng cao hóa cho web đang chạy.
so với WordPress, bạn đủ sức sử dụng tính năng Minify của plugin W3 Total Cache để đăng không đồng bộ, trì hoãn cũng giống như giảm bớt HTML, CSS, và JavaScript. Mặc dù vậy, bạn nên tự gộp các tập tin và tăng cao hóa kích thước các tệp tin một lần bằng các công cụ thay vì sử dụng plugin để sử dụng điều này. Nó sẽ giúp bạn cắt giảm được thời gian và tài nguyên máy chủ cho mỗi lần thực hiện việc này.
Trên đây là các cách thức để tăng cao hóa cách tải JavaScript cũng như tăng cao hóa click thước của tập lệnh. Bạn nên tận dụng các mẹo này để gia tăng tốc độ trang web tốt nhất đủ sức. Chúc bạn thành công!
Nguồn: Sitecuatui.com
Xem thêm: Tổng hợp plugin đánh giá bài viết wordpress 5 sao mới nhất 2020
