Cách loại bỏ render chặn JavaScript

Loại bỏ render chặn JavaScript là công việc rất khó khăn và phức tạp cho mỗi trang web. Với mỗi trang web có cấu trúc và nền tảng khác nhau thì việc loại bỏ render chặn JavaScript hoàn toàn khác nhau. Khi sử dụng công cụ PageSpeed ​​Insights của Google để kiểm tra tốc độ trang, chúng ta thường thấy xuất hiện các lỗi chặn JavaScript trong màn hình đầu tiên ở mỗi nền tảng Blogger và Wordpress khác nhau hoàn . Tuy nhiên trong bài viết này, tôi chỉ hướng dẫn cách xử lý các lỗi chặn hiển thị JavaScript xuất hiện ở màn hình đầu tiên trên nội dung, các lỗi này sẽ làm giảm tốc độ tải trang rỏ rệt và gây khó chịu cho người dùng. Để xử lý các lỗi này trên blogger, hãy làm theo hướng dẫn của tôi dưới đây.

                           Đọc thêm:  Tăng tốc trang web để tăng xếp hạng tìm kiếm

Cách loại bỏ render chặn JavaScript (Remove render-blocking JavaScript)

Khi kiểm tra tốc độ tải trang bằng công cụ PageSpeed ​​Insights, chúng ta thường thấy các lỗi phổ biến sau:

Di render-chặn JavaScript:

1. http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
2. http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.j
3. http://tenmiencuaban.com/feeds/posts/default/-/Kategori?max-results=9&orderby

=published&alt=json-in-script&callback=showrecentposts1

Đây là 3 lỗi phổ biến nhhất mà tất cả mọi người đều gặp, việc của bạn là tìm ra 3 đường link này và xóa nó. Tôi sẽ hướng dẫn từng link, trước tiên hãy đăng nhập Blogger, vào phần Mẫu(Template) và chọn Chỉnh sửa HTML

Đối với link 1 và link 2 chúng ta tìm nó trong bảng HTML bằng cách gõ vào phần tìm kiếm ajax.googleapis.com và  helplogger.googlecode.com/svn/trunk trong khung tìm kiếm và tìm xóa link này.

Sau khi tìm xóa 2 link trên, chúng ta kiểm tra lại website bị lỗi hỏng giao diện thì tiếp tục sửa chữa nó bằng cách dùng lệnh trì hoãn hoặc không đồng bộ 2 link này bằng cách sử dụng lệnh

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>

<script async='async' src='http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js' type='text/javascript'/>

Thông thường ở tất cả các mẫu thì xóa 2 link này vẫn hoạt động tốt, không có vấn đề gì. Nhưng một số ít mẫu khác lại gặp lỗi méo mó giao diện, cách trì hoãn hay không đồng bộ là cách đề phòng.
Đối với link thứ 3 có dạng http://tenmiencuaban.com/feeds/posts/default/-/Kategori?max-results đây là link năng động và rất khó tìm trong bảng HTML. Để dễ dàng tìm link này, chỉ cần gõ vào phần tìm kiếm trong HTML đoạn sau /feeds/posts/default (lưu ý không gõ hết đường link sẽ tìm không ra) để tìm ra đường link tương tự ở trên. Việc còn lại là xóa đường link này đi.

Sau khi xóa link này rồi, hãy vào trang web kiểm tra lại xem có lỗi gì nữa không. Chắc chắn sẽ không có lỗi gì. Bây giờ hãy kiểm tra tốc độ Page Speed xem các link kia đã biến mất chưa, và bạn sẽ thấy tốc độ tăng lên đáng kể. 

                                           Đọc thêm:  Sử dụng Cloudflare để tăng tốc blog