Lamweb
  • Trang chủ
  • Kiến thức Website
  • Khóa học làm Web
  • Làm Web căn bản
  • Plugin căn bản
  • Check chỉ số Web
Lamweb
Trang chủ Kiến thức Website

Hướng dẫn xóa javascript chặn hiển thị wordpress mới nhất 2020

Atpsoftware Bởi Atpsoftware
18/10/2019
Trong Kiến thức Website
0
Hướng dẫn xóa javascript chặn hiển thị wordpress mới nhất 2020
0
Chia Sẻ
43
Lượt Xem
Share on FacebookShare on Twitter

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.

Related posts

Cách Lấy Link Facebook Của Mình

Hướng dẫn các cách lấy link facebook của mình mới nhất 2020

04/12/2019
đổi Chữ Ký Trong Outlook 2010

Hướng dẫn các cách đổi chữ ký trong outlook 2010 mới nhất 2020

04/12/2019

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.

Xóa JavaScript chặn hiển thị và Giảm bớt JavaScript

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

Tags: giảm thời gian thực thi javascriptloại bỏ các tài nguyên chặn hiển thị cssloại bỏ các tài nguyên chặn hiển thị pluginloại bỏ các tài nguyên chặn hiển thị wordpressloại bỏ css chặn hiển thị trong nội dung trên màn hình đầu tiênloại bỏ javascript và css chặn hiển thị trong nội dung trong màn hình đầu tiênloại bỏ javascript và css chặn hiển thị wordpresstrì hoãn tải css không dùngưu tiên nội dung hiển thịxóa javascript chặn hiển thị wordpress
Bài Viết Trước

Tổng hợp plugin đánh giá bài viết wordpress 5 sao mới nhất 2020

Bài Viết Tiếp Theo

Hướng dẫn quét mã độc website mới nhất 2020 dành cho người mới

Bài Viết Tiếp Theo
Hướng dẫn quét mã độc website mới nhất 2020 dành cho người mới

Hướng dẫn quét mã độc website mới nhất 2020 dành cho người mới

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

BÀI VIẾT MỚI

Google api key là gì ? Hướng dẫn lấy google api key mới nhất 2020

Google api key là gì ? Hướng dẫn lấy google api key mới nhất 2020

2 tháng cách đây
Hướng Dẫn Tạo Website Miễn Phí

hướng dẫn tạo website miễn phí mới nhất 2020

2 tháng cách đây
Cách Làm Web Miễn Phí

Tổng hợp cách làm web miễn phí mới nhất 2020

1 tuần cách đây
Cách Sử Dụng Outlook Hiệu Quả

Hướng dẫn cách sử dụng outlook hiệu quả mới nhất 2020

2 tuần cách đây
  • Nổi Bật
  • Bình Luận
  • Mới Nhất
Google api key là gì ? Hướng dẫn lấy google api key mới nhất 2020

Google api key là gì ? Hướng dẫn lấy google api key mới nhất 2020

09/11/2019
Hướng dẫn cách lấy google map api key mới nhất 2020

Hướng dẫn cách lấy google map api key mới nhất 2020

08/10/2019
Hướng dẫn tối ưu google pagespeed mới nhất 2020

Hướng dẫn tối ưu google pagespeed mới nhất 2020

07/10/2019
Tổng hợp những cách giảm thời gian phản hồi của máy chủ mới nhất 2019

Tổng hợp những cách giảm thời gian phản hồi của máy chủ mới nhất 2019

08/10/2019

Chào tất cả mọi người!

1

PSSI Sends Condolences After Another Fan Dies in Football Violence

0

Travel Insider: Bengawan Solo Travel Mart Returns For Ninth Time

0

Cyber-Violence, an Emerging New Reality for Many Indonesian Women

0
Cách Tìm Kiếm Nâng Cao Trên Google

Tổng hợp các cách tìm kiếm nâng cao trên google mới nhất 2020

04/12/2019
Cách Lấy Link Facebook Của Mình

Hướng dẫn các cách lấy link facebook của mình mới nhất 2020

04/12/2019
Cách Lưu Bản đồ Trên Google Map

Hướng dẫn các cách lưu bản đồ trên google map mới nhất 2020

04/12/2019
Cách Cập Nhật ảnh Bìa Chỉ Mình Tôi

Hướng dẫn các cách cập nhật ảnh bìa chỉ mình tôi mới nhất 2020

04/12/2019

Lamweb.vn là một website phi lợi nhuận, cung cấp các kiến thức từ căn bản đến nâng cao về việc làm web, các kiến thức về tối ưu website, plugin ứng dụng cho web và rất nhiều các khóa học miễn phí về làm web giúp bạn hiểu và ứng dụng cho việc xây dựng wesite của mình.

Các chuyên mục

  • Trang chủ
  • Kiến thức Website
  • Khóa học làm Web
  • Làm Web căn bản
  • Plugin căn bản
  • Check chỉ số Web

Theo dõi chúng tôi

Facebook Twitter Google-plus WordPress
  • Trang chủ
  • Kiến thức Website
  • Khóa học làm Web
  • Làm Web căn bản
  • Plugin căn bản
  • Check chỉ số Web