Là một người đang cố gắng hiểu cách trì hoãn việc phân tích cú pháp của Javascript, chúng tôi tin rằng bạn đang gặp sự cố. Bạn sở hữu hoặc đã truy cập trang web của ai đó mà bạn biết (có thể là khách hàng?) Và quá trình tải sẽ mất vĩnh viễn. Và khi bạn chạy nó qua các công cụ kiểm tra tốc độ trang web, bạn nhận được một đề xuất mà bạn không chắc chắn về cách triển khai.

Trong bài viết này, chúng tôi sẽ chia sẻ một số cách làm thế nào để trì hoãn Javascript và khắc phục cảnh báo này và cuối cùng, làm cho trang web tải nhanh hơn mà không gặp phải lỗi này!

Nếu bạn thiếu thời gian, đây là một số hành động nhanh chóng bạn có thể làm:

Hướng dẫn Cách Trì hoãn Phân tích cú pháp JavaScript

  1. Tải xuống plugin Async  tại đây .
  2. Nhấp vào  Plugins> Add New>  Upload plugin  và chọn tệp bạn vừa tải xuống.
  3. Nhấp vào  Kích hoạt  plugin đã cài đặt.
  4. Đi tới Plugin và nhấp vào  Cài đặt  cho plugin Async mà bạn vừa cài đặt.
  5. Nhấp vào  Bật Javascript không đồng bộ hoặc  Áp dụng không đồng bộ  là hai trong số những cách phổ biến nhất để áp dụng bản sửa lỗi.
  6. Kiểm tra trang web của bạn để thấy rằng mọi thứ vẫn hoạt động tốt.

 

GTMetrix - Trì hoãn phân tích cú pháp cảnh báo javascript

Tại sao thủ tục triển khai phân tích cú pháp Javascript hoãn lại quan trọng? Nếu bạn không trì hoãn việc phân tích cú pháp Javascript, trang web của bạn sẽ có vẻ như đang tải chậm. Javascript về bản chất là một khối xây dựng quan trọng trong ngôn ngữ của web, nó cho phép các nhà phát triển web tạo ra chức năng “động”.

Tuy nhiên, trong hầu hết các trường hợp, các tệp Javascript có xu hướng khá lớn. Họ cũng có thể đến từ các máy chủ của bên thứ ba. Điều này làm cho việc tải xuống chậm. Nhưng đây chỉ là một nửa vấn đề.

Vấn đề lớn nhất là nếu không có phân tích cú pháp Javascript trì hoãn, trình duyệt sẽ bị CHẶN hiển thị nội dung. Trang web KHÔNG RENDER. Và điều này trông như thế nào đối với người dùng? Có vẻ như trang web chậm, bị hỏng hoặc đã chết hoàn toàn. 

Vấn đề phức tạp trên các thiết bị di động, nơi sức mạnh xử lý có sẵn, cùng với băng thông khả dụng khiến trải nghiệm thậm chí còn tệ hơn.

Và những người dùng có được trải nghiệm như vậy sẽ làm gì? Họ sẽ thoát khỏi trang web của bạn, không bao giờ quay trở lại!

Nếu bạn đã làm việc trong ngành công nghiệp web một thời gian và bạn đang cố gắng cải thiện SEO cho trang web của mình, bạn đã biết rằng hiệu suất trang web rất quan trọng trong việc cải thiện khả năng hiển thị công cụ tìm kiếm của bạn.

Và nếu bạn đã sử dụng Google PageSpeed ​​Insights để kiểm tra trang web của mình, thì ngoài việc “hoãn phân tích cú pháp Javascript”, còn có nhiều cảnh báo khó hiểu hơn, chẳng hạn như cảnh báo có nội dung “Loại bỏ tài nguyên chặn hiển thị”.

Loại bỏ tài nguyên chặn hiển thị

 

Công cụ kỹ thuật này dường như có tác động lớn nhất đến tốc độ tải của bạn! 

Loại bỏ ?! Nhưng làm cách nào để loại bỏ những tệp quan trọng này khỏi trang web của tôi?

Đừng lo lắng, chúng tôi ở đây để giúp bạn khắc phục những cảnh báo này, giải quyết những vấn đề này và cuối cùng làm cho các trang của bạn tải nhanh hơn!

Bởi vì bạn không cần phải loại bỏ chúng . Tất cả những gì bạn phải làm là trì hoãn việc phân tích cú pháp JavaScript.

Hãy xem video ngắn này bên dưới để biết việc trì hoãn phân tích cú pháp Javascript đơn giản như thế nào bằng một trong các phương pháp bên dưới:

Trong non-geekspeak, điều này có nghĩa là bạn cần phải tinh chỉnh một số thứ trong WordPress của mình, để cho phép trang cho phép nội dung của bạn tải trước khi tải hoặc phân tích cú pháp các tệp JavaScript của bạn. 

Điều này là do, nếu bạn không trì hoãn việc phân tích cú pháp Javascript, việc hiển thị trang web sẽ trở thành một hoạt động rất nặng nề, và như chúng tôi đã nói ở trên, trang web sẽ giống như bị hỏng.

Để đảm bảo rằng người dùng vẫn ở trên trang web, chúng tôi muốn cho họ biết rằng điều gì đó đang thực sự xảy ra và hiển thị nội dung cho người dùng, thay vì đợi trình duyệt thực hiện tất cả các thao tác nặng nhọc trước khi thực sự hiển thị bất kỳ điều gì cho người dùng . 

Ngẫu nhiên, nếu bạn đang muốn làm cho WordPress của mình trở nên nhanh chóng, có một số plugin như plugin  này  có thể tạo ra sự khác biệt thực sự về hiệu suất trong vài phút (với nỗ lực rất ít).

Nếu bạn quan tâm, WP Rocket có thể thiết lập hoãn phân tích cú pháp Javascript và nhiều chỉnh sửa khác để làm cho trang web của bạn nhanh hơn, chỉ cần nhấp vào biểu ngữ bên dưới để xem. 

Bạn chưa sẵn sàng sử dụng plugin ngay bây giờ? Đọc tiếp … 

Phân tích cú pháp trì hoãn của JavaScript là gì?

hoãn phân tích cú pháp trực quan javascript

Trì hoãn phân tích cú pháp Javascript có nghĩa là sử dụng ” defer” hoặc ” async” để tránh việc chặn hiển thị một trang. Lệnh HTML này hướng dẫn trình duyệt thực thi / phân tích cú pháp các tập lệnh sau (trì hoãn) hoặc không đồng bộ (song song) khi tải trang. Điều này cho phép nội dung hiển thị mà không cần đợi các tập lệnh được tải.

Bằng cách thiết lập phân tích cú pháp JavaScript trì hoãn, bạn sẽ có thể cho phép nội dung của mình tải nhanh hơn và có mức độ ưu tiên cao.

Tại sao vậy?

Xem phần giải thích tuyệt vời bên dưới minh họa cách các trang web được tải và cách các tệp JavaScript cản trở thời gian tải trang web của bạn rất nhiều.

Tiếp tục video ở trên, chúng ta hãy xem xét ngắn gọn điều gì sẽ xảy ra khi ai đó truy cập trang web của bạn: 

  1. Khi người dùng nhấp vào một liên kết trỏ đến trang web của bạn, trình duyệt của người dùng sẽ yêu cầu liên kết đó từ máy chủ của bạn, máy chủ của bạn sau đó sẽ “phục vụ” cho trình duyệt của người dùng.
  2. Sau đó, trình duyệt của người dùng nhận và xem nội dung HTML của trang web của bạn và sẽ bắt đầu hiển thị nội dung đó. Nó sẽ bắt đầu xây dựng trang web của bạn từ trên xuống dưới.
  3. Nếu nó tìm thấy các tệp JavaScript trên đường đi, trình duyệt sẽ dừng và tìm nạp nó (nếu là tệp bên ngoài), sau đó phân tích cú pháp
  4. Chỉ sau khi tìm nạp đầy đủ và phân tích cú pháp mọi tập lệnh, nó sẽ tiếp tục tải phần còn lại của nội dung của bạn.

Có lẽ bạn đã bắt đầu thấy vấn đề nằm ở đâu.

Khi các trang của bạn có nhiều tệp JavaScript, nó có thể tác động tiêu cực đến thời gian tải trang web của bạn – một cách tiêu cực.

Trình duyệt của người dùng của bạn sẽ liên tục hiển thị biểu tượng tải hoặc bánh xe quay trong khi phân tích cú pháp và tải tập lệnh của bạn trước khi nó hiển thị nội dung thực của bạn – điều này đặc biệt hiển thị trên trình duyệt di động hoặc người dùng có kết nối dữ liệu tốc độ thấp.

Nếu mất hơn vài giây, đặc biệt là nếu bạn đang phân phát các tập lệnh của mình từ một máy chủ bên ngoài (và máy chủ đó xảy ra sự cố vào lúc này) – khách truy cập của bạn sẽ bắt đầu khó chịu.

Trong thời gian đó, người dùng của bạn không thấy gì ngoài một trang trống màu trắng. Đó không phải là một trong những điều khó chịu nhất trên internet? Mọi thứ được cho là ngay lập tức trên web, tại sao họ phải đợi trang của bạn tải?

Nếu người dùng đợi hơn 4 giây, họ sẽ bắt đầu bị giật. Sau 8 giây và trang web của bạn coi như chết – người dùng sẽ chuyển đến một trang web khác.

Bạn đã mất một khách truy cập và có thể là doanh nghiệp của họ. 

Sự phức tạp bổ sung là nhiều lần, các tệp JS này được thêm vào trang web của bạn bằng các plugin và chủ đề thiết yếu mà bạn đã cài đặt, vì vậy bạn không thể loại bỏ chúng một cách chính xác dễ dàng.

Vậy bạn làm gì?

Để giải quyết vấn đề này, bạn cần hoãn phân tích cú pháp JavaScript. Điều này hoạt động bằng cách phân tích cú pháp các tập lệnh của bạn khi nội dung chính đã được tải. Kiểm tra hình ảnh bên dưới để biết chính xác tác động trong thời gian tải. Như chúng ta có thể thấy lệnh trì hoãn buộc trình duyệt thực thi Javascript sau đó, trong khi không đồng bộ cho phép mọi thứ diễn ra song song với quá trình tải xuống.

Do đó, khi người dùng truy cập trang web của bạn, thay vào đó, trình duyệt của bạn sẽ tiếp tục phân tích cú pháp mọi thứ từ trên xuống dưới nhưng bỏ qua các tệp JavaScript của bạn cho lần sau. Bằng cách này, người dùng của bạn sẽ có thể xem nội dung của bạn ngay lập tức mà không cần phải chờ đợi. 

Nếu bạn đã xem video ở trên, bạn đã thấy rằng các thuộc tính “async” và “defer” giúp ích rất nhiều.

Nhưng bạn sẽ làm điều đó như thế nào trong WordPress? Ngoài ra, khi nào là thời điểm thích hợp để sử dụng chúng? Hãy xem và bắt đầu!

Phân tích trang web của bạn

Trước khi bắt đầu, bạn cần biết liệu bạn có phải triển khai sửa lỗi Javascript trì hoãn trên trang web của mình hay không. Để tìm hiểu nếu bạn cần, bạn có thể sử dụng một số công cụ có sẵn trực tuyến.

Một số ví dụ như sau:

1. GTMetrix

Công cụ này hoạt động bằng cách kiểm tra cả chỉ số Tốc độ trang và Yslow và cho bạn điểm từ F đến A. Chúng cũng cung cấp cho bạn các đề xuất cũng như mẹo về cách cải thiện trang web của bạn nếu phát hiện ra vấn đề. Nó sẽ cho bạn biết cụ thể nếu bạn cần hoãn phân tích cú pháp JavaScript. 

Nói chung, điểm ít nhất phải là 71.

Hình ảnh dưới đây cho thấy một trang web không cần hoãn lại. 

Điểm hoãn tốt trên GTMetrix

2.  Công cụ Tốc độ trang

một công cụ do Google phát triển, PageSpeed ​​Insights là một công cụ toàn diện khác cung cấp cho bạn thông tin toàn diện về các vấn đề hiệu suất trang web của bạn cùng với các mẹo để khắc phục chúng giống như GTMetrix.

Một trong những điều tốt nhất về công cụ này là nó bao gồm các liên kết đến các tài nguyên và hướng dẫn chuyên sâu để giúp bạn khắc phục tất cả các vấn đề về hiệu suất của mình. Hình ảnh dưới đây cho thấy một trang web rất cần triển khai phân tích cú pháp JavaScript hoãn lại.

Thông tin chi tiết về Gagespeed - tác động đáng kể đến thời gian tải

3.  Công cụ Pingdom

Một công cụ kiểm tra hiệu suất trang web phổ biến khác được cung cấp miễn phí cho mọi người.

Mặc dù dường như nó không cho bạn biết rõ ràng liệu bạn có cần hoãn phân tích cú pháp JavaScript hay không, nhưng bạn có thể kiểm tra thời gian tải các tập lệnh của mình nhờ trang kết quả toàn diện của chúng.

Hình ảnh bên dưới cho thấy một trang web có gần một nửa trang của nó bao gồm JavaScript – một chỉ báo tuyệt vời cho thấy bạn có thể muốn hoãn các tập lệnh của mình. 

Điểm số của Pingdom tools js

4.   Varvy PageSpeed

Một công cụ tuyệt vời khác sẽ cho bạn biết liệu trang web của bạn có tập lệnh chặn hiển thị hay không.

Điều tốt nhất là nó cho bạn biết chính xác chúng là gì, giống như trong hình ảnh bên dưới: 

Hiển thị các tập lệnh chặn ảnh hưởng đến hiệu suất

Được, tuyệt đấy!

Bây giờ bạn có quyền truy cập vào các công cụ có thể giúp bạn xác định xem bạn có cần triển khai phân tích cú pháp hoãn các tệp JavaScript hay không.

Nhưng bạn có thể hỏi tại sao không thực hiện nó và để nó một mình? Nếu bạn trì hoãn việc phân tích cú pháp JavaScript không chính xác có thể làm hỏng mọi thứ và bạn có thể khó chịu khi sửa nếu bạn không am hiểu công nghệ.

Chỉ cần bật chế độ trì hoãn không có nghĩa là tất cả được thiết lập để bị lãng quên và sẽ hoạt động tốt. Bạn sẽ phải kiểm tra xem mình đã làm đúng chưa và đảm bảo mọi thứ vẫn hoạt động như dự định. 

Ví dụ: nếu bạn sử dụng jQuery, bạn phải cẩn thận chọn tập lệnh nào trong số các tập lệnh của mình mà bạn nên hoãn lại vì dường như có vấn đề  với việc hoãn và jQuery.

Ngoài ra, bạn sẽ thấy rằng có rất nhiều câu hỏi trên Stack Overflow về jQuery, async và defer, thường là về cách bạn nên triển khai defer và async, nếu bạn nên làm, cho các tập lệnh dựa vào jQuery của bạn. 

Vậy, kết quả là gì? Bạn có cần hoãn các tập lệnh của mình không?

Nếu vậy, bây giờ chúng ta hãy tìm hiểu cách trì hoãn JavaScript trong WordPress!

Cách hoãn phân tích cú pháp JavaScript trong WordPress

Việc trì hoãn phân tích cú pháp JavaScript trong WordPress có thể khá đơn giản.

Bạn chỉ có thể cài đặt một trong hàng nghìn plugin trong kho lưu trữ WordPress và bạn đã sẵn sàng. Nhưng cũng có những cách nâng cao để thực hiện điều đó nếu bạn cần kiểm soát nhiều hơn, đặc biệt nếu bạn đang sử dụng các tập lệnh phức tạp để làm cho trang web của bạn hấp dẫn và tương tác hơn. 

Trong phần này, chúng ta sẽ kiểm tra năm cách khác nhau để thực hiện việc trì hoãn phân tích cú pháp JavaScript trong WordPress: thông qua plugin, qua functions.php và chỉnh sửa mã theo cách thủ công. 

Có rất nhiều plugin trong kho lưu trữ WordPress có thể giúp bạn cải thiện hiệu suất trang web của mình.

Có những plugin dành riêng cho một nhiệm vụ cụ thể như giảm thiểu mã HTML của bạn và có những plugin cố gắng kết hợp tất cả các chỉnh sửa liên quan đến hiệu suất trong một plugin, chẳng hạn như có khả năng giảm thiểu và trì hoãn các tệp CSS và JavaScript, triển khai và tận dụng bộ nhớ đệm của trình duyệt ( mà chúng tôi đã đề cập nhiều trong bài viết này ) và hơn thế nữa. 

Tuy nhiên, không phải tất cả các plugin đều được tạo ra như nhau. Một số hoạt động tốt, một số hoạt động tốt và một số không hoạt động và thậm chí có thể phá vỡ một số hoặc tất cả chức năng của trang web của bạn. 

(Nếu bạn muốn ai đó có kinh nghiệm xử lý việc này cho bạn, bạn có thể hoàn thành việc này bằng cách sử dụng hợp đồng biểu diễn Fiverr giá rẻ từ nhà cung cấp đáng tin cậy của chúng tôi geinous_mind .)

1. Trì hoãn việc phân tích cú pháp Javascript bằng Plugin Async

Thành thật mà nói, chúng tôi thực sự khuyên bạn nên chọn một plugin cao cấp (rẻ quá mức) nhưng bạn yên tâm khắc phục không chỉ cảnh báo này mà còn cả một loạt các vấn đề về tốc độ tải trang web.

Chúng ta sẽ bắt đầu với một trong những cách phổ biến nhất được dùng để làm một công việc duy nhất được định nghĩa bởi bài viết này.

Một trong những lựa chọn phổ biến nhất để thực hiện công việc này là Async Javascript. Plugin này tập trung vào việc cải thiện hiệu suất trang web của bạn bằng cách điều chỉnh cách tải các tập lệnh của bạn và giống như WP Rocket bên dưới, nó cũng đi kèm với các tính năng nâng cao bổ sung cho phép bạn loại trừ một số tập lệnh nhất định bị trì hoãn.

Dưới đây là các bước bạn cần thực hiện để sử dụng plugin này.

  1. Tải xuống plugin Async tại đây .
  2. Nhấp vào Plugins> Add New trong phần phụ trợ WP.
  3. Nhấp vào Tải lên plugin và chọn tệp bạn vừa tải xuống.
  4. Ngoài ra, hãy tìm kiếm Async Javascript và nhấp vào Cài đặt ngay .
  5. Nhấp vào Kích hoạt plugin đã cài đặt.
  6. Đi tới Plugin và nhấp vào Cài đặt cho plugin Async mà bạn vừa cài đặt.
  7. Chúng tôi khuyên bạn nên nhấp vào Bật Javascript không đồng bộ hoặc Áp dụng không đồng bộ là hai trong số những cách phổ biến nhất để áp dụng bản sửa lỗi.
  8. Nếu những cách này không hiệu quả, bạn có thể thử một vài cách kết hợp khác nhau.
  9. Kiểm tra trang web của bạn để thấy rằng mọi thứ vẫn hoạt động tốt.

cài đặt plugin javascript async

Có lẽ một trong những điểm mạnh của nó là ngoài khả năng loại trừ một số tập lệnh nhất định bị hoãn lại, bạn cũng có tùy chọn để chọn tập lệnh nào được hoãn thay thế:

Không đồng bộ hóa javascript loại trừ

Bạn cũng có thể nhận thấy rằng bạn có tùy chọn không đồng bộ hoặc trì hoãn một tập lệnh. Để biết thêm thông tin về sự khác biệt giữa hai loại, bạn có thể đọc  bài viết này .

Một tính năng độc đáo của plugin này là bạn có thể chỉ định loại trừ một chủ đề hoặc plugin nhất định.

Ngoài ra còn có một tùy chọn để tích hợp GTMetrix trên trang web của bạn để bạn luôn có thể kiểm tra hiệu suất của nó. Tuy nhiên, hãy lưu ý rằng mỗi khi bạn thực hiện kiểm tra, một khoản tín dụng API sẽ bị trừ vào tài khoản GTMetrix của bạn.

kiểm tra gtmetrix

Mặc dù một số người sẽ giới thiệu  WP Deferred JavaScript , plugin này đã không được cập nhật trong hơn 3 năm và chưa được thử nghiệm với 3 phiên bản chính gần đây nhất, vì vậy chúng tôi khuyên bạn không nên sử dụng plugin này. Nó có thể vẫn hoạt động, nhưng nó chưa được kiểm tra, vì vậy nó là một rủi ro mà bạn không nên chấp nhận.

Nếu bạn có một trang web tương đối đơn giản và bạn đang tìm cách cải thiện hơn nữa thời gian tải của mình, thì đây có thể là thứ bạn cần. Plugin này không yêu cầu cấu hình – chỉ cần cài đặt, kích hoạt và quên.

Plugin javascript hoãn WP

Một lần nữa, hãy nhớ rằng cái này không được khuyến nghị cho các trang web phức tạp như thương mại điện tử vì nó thiếu các tùy chọn tinh chỉnh nâng cao và do tuổi đời của nó. Có thể tinh chỉnh các tùy chọn trì hoãn JavaScript là rất quan trọng đối với các trang web lớn và phức tạp.

2. Tên lửa WP

Hiện tại là plugin hiệu suất hàng đầu của WordPress, WP Rocket không chỉ cung cấp khả năng hoãn phân tích cú pháp các tệp JavaScript mà còn cả các tệp CSS của bạn. Ngoài ra, bạn nhận được rất nhiều tùy chọn cải thiện hiệu suất khác.

Một số tính năng bao gồm: 

  • Minification – thu nhỏ kích thước mã trang web của bạn để nó tải nhanh hơn. Nó làm như vậy bằng cách loại bỏ khoảng trắng và các ký tự không cần thiết khác khỏi mã mà không ảnh hưởng đến chức năng cốt lõi của nó.
  • Kết nối – kết hợp nhiều tệp CSS và JavaScript thành một.
  • Tải chậm – đây là chế độ trì hoãn cho các tệp video và nội dung đa phương tiện khác như hình ảnh. Nó trì hoãn việc tải các tệp sử dụng nhiều tài nguyên này cho đến khi người dùng cuộn xuống chúng.

Một trong những điều tốt nhất về WP Rocket là khi bạn cài đặt và kích hoạt nó, bạn có thể để nó yên và bạn sẽ tự động nhận được hiệu suất tăng.

Tuy nhiên, bạn có thể định cấu hình cài đặt nâng cao để tăng hiệu suất lớn hơn nữa, nhưng hãy nhớ rằng một số cài đặt trong số đó có thể có tác động xấu đến trang web của bạn. Và do đó, tùy chọn trì hoãn của họ cho các tệp JavaScript và CSS không được bật theo mặc định vì nếu thực hiện bất cẩn, họ có thể làm hỏng mọi thứ.

Tên lửa WP kết xuất chặn css js

Rất may, bạn có thể loại trừ một số tập lệnh nhất định bị hoãn lại.

Trước tiên, bạn có thể thử loại trừ tất cả các tập lệnh của mình và sau đó trì hoãn phân tích cú pháp từng tệp Javascript cho đến khi bạn tìm thấy tệp có vấn đề. Họ có nhiều tài liệu để giúp bạn làm điều đó. Bằng cách này, bạn sẽ có thể tối đa hóa các cải tiến về hiệu suất mà không phá vỡ hoặc hy sinh một số hoặc tất cả các chức năng của trang web của bạn.

WP Rocket là một plugin cao cấp, nhưng với giá cả và chức năng được cung cấp (không chỉ trì hoãn và không đồng bộ hóa các tệp JS mà còn rất nhiều tính năng tối ưu hóa khác được đảm bảo sẽ làm cho trang web của bạn nhanh hơn), chúng tôi tin rằng nó rất đáng giá.

Tải xuống WP Rocket

3. Gói tăng tốc tốc độ

Một plugin hiệu suất tất cả trong một tuyệt vời khác cho phép bạn hoãn phân tích cú pháp các tệp Javascript là Speed ​​Booster Pack . Nó giống với WP Rocket về tính năng, nhưng nó miễn phí. Nó có hầu hết các tính năng cơ bản của WP Rocket như thu nhỏ, trì hoãn, xóa các tệp không cần thiết, v.v.

Dưới đây, bạn có thể thấy một số tính năng có sẵn trong plugin: 

Gói tăng tốc

Trong Tab Nâng cao, bạn có thể chọn loại trừ một số tập lệnh không được chuyển đến chân trang hoặc bị trì hoãn hoặc cả hai. Tuy nhiên, bạn chỉ có thể thêm tối đa 4 tập lệnh bị loại trừ, đây chắc chắn là một hạn chế đối với các trang web lớn và phức tạp. 

Giới hạn gói tăng tốc

Nhìn chung, đây là một giải pháp thay thế miễn phí tốt cho WP Rocket, phù hợp với các trang web nhỏ.

4. Sử dụng các chỉnh sửa functions.php

Nếu bạn không muốn sử dụng plugin thì sao?

Có một thủ thuật khác mà bạn có thể làm để trì hoãn quá trình phân tích cú pháp Javascript trong WordPress và đó là bằng cách chỉnh sửa tệp functions.php của chủ đề.

Chỉ cần sao chép mã bên dưới và dán nó vào cuối tệp function.php của chủ đề: 

function defer_parsing_of_javascript ( $url ) {
  if ( FALSE === strpos( $url, '.js' ) ) return $url;
  if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_javascript', 11, 1 );

chỉnh sửa functions.php

Hãy nhớ rằng bạn có thể làm rối trang web của mình nếu bạn làm sai, vì vậy hãy chú ý cẩn thận và đảm bảo rằng bạn đang chỉnh sửa tệp đúng theo chủ đề chính xác và bạn đang dán đoạn mã vào đúng vị trí. Đảm bảo không xóa / thay đổi bất kỳ thứ gì khác.

Rất may, bạn có thể tạo một chủ đề con để thực hiện các chỉnh sửa an toàn cho tệp functions.php của mình. Ngoài ra, nếu bạn từng thay thế hoặc cập nhật chủ đề của mình, bạn có thể dễ dàng giữ lại tất cả các chỉnh sửa tùy chỉnh của mình trong tệp. Đây là một bài viết tuyệt vời giải thích cách tạo chủ đề con. Khi bạn đã tạo chủ đề con, chỉ cần dán đoạn mã vào tệp function.php của trẻ, lưu nó và tất cả đã được thiết lập.

5. Chỉnh sửa mã của bạn theo cách thủ công

Điều này nghe có vẻ đáng sợ, đặc biệt nếu bạn không thích viết mã nhưng đối với người dùng nâng cao, việc chỉnh sửa mã theo cách thủ công là một cách tuyệt vời để trì hoãn việc phân tích cú pháp các tệp JavaScript trong WordPress. 

Varvy có một đoạn mã tuyệt vời cho phép tải hoàn toàn nội dung ban đầu của trang web trước khi tải bất kỳ tập lệnh bên ngoài nào khác. Đoạn mã dưới đây:

<script type = “text / javascript”>
  function downloadJSAtOnload () {
    var element = document.createElement (“script”);
    element.src = “//www.yourdomain.com/defer.js”;
    document.body.appendChild (phần tử);
  }
  if (window.addEventListener)
    window.addEventListener (“tải”, downloadJSAtOnload, false);
  else if (window.attachEvent)
    window.attachEvent (“onload”, downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

Thay thế defer.js bằng tệp tập lệnh của riêng bạn. Khi bạn đã chỉnh sửa nó để phản ánh tập lệnh của riêng bạn, hãy dán nó ngay trước thẻ </body> của HTML. Trong WordPress, bạn có thể làm điều đó bằng cách chỉnh sửa tệp footer.php của chủ đề.

Một lần nữa, bạn nên sử dụng chủ đề con nếu bạn định tạo các chỉnh sửa trong tệp chủ đề của mình. Một lưu ý nhỏ: chỉnh sửa footer.php thông qua chủ đề con khác với functions.php: bạn phải sao chép toàn bộ footer.php của chủ đề chính cùng với nội dung của nó vào chủ đề con của bạn và sau đó thực hiện / thêm các chỉnh sửa. 

Nếu bạn không muốn gặp rắc rối khi chỉnh sửa footer.php của mình, bạn có thể sử dụng một plugin có tên là Chèn đầu trang và chân trang . 

Chèn đầu trang và chân trang

Chỉ cần dán đoạn mã vào hộp “Tập lệnh ở chân trang”, nhấn lưu và bạn sẽ có tập lệnh được thêm vào vùng dưới cùng của mã trang web của mình, phía trên thẻ </body>. 

Và đó là tất cả những cách bạn có thể trì hoãn phân tích cú pháp JavaScript trong WordPress! Nhưng chúng có hiệu quả không? Họ có cải thiện hiệu suất trang web của bạn không? Hãy cùng kiểm tra kết quả!

Kiểm tra kết quả

Để kiểm tra kết quả, hãy truy cập GTMetrix.com, PageSpeed ​​Insights và Pingdom Tools để xem liệu loại hiệu suất và thời gian tải của bạn có được cải thiện hay không.

Trong GTMetrix, điểm của bạn ít nhất phải là 71. Càng nhiều càng tốt! Một điểm hoàn hảo sẽ như thế này 🙂 

điểm hoãn hoàn hảo

Trong Thông tin chi tiết về tốc độ trang, hãy tìm “màu sơn đầu tiên”:

Điểm tốt của thông tin chi tiết về tốc độ trang

Nói chung, khi bạn đang kiểm tra nếu việc triển khai hoãn phân tích cú pháp JavaScript của bạn dẫn đến việc các tập lệnh bị hoãn lại, hãy nhắm đến kết quả màu xanh lá cây trong Bức tranh có nội dung đầu tiên và Bức tranh có ý nghĩa đầu tiên.

So sánh trước và sau khi trì hoãn và kiểm tra xem chúng có cải thiện không.

Đối với Công cụ Pingdom, hãy xem phần thứ tự tải và xem liệu hầu hết, nếu không phải tất cả, các tệp tập lệnh của bạn có được tải sau cùng hay không. So sánh trước và sau khi trì hoãn và xem liệu các tệp kịch bản có thay đổi vị trí theo thứ tự tải hay không (tức là chúng đã tải sớm hơn hay muộn hơn). 

Kết quả có làm bạn hài lòng không? Nếu vậy, công việc tuyệt vời! Nếu không, hãy thử thử nghiệm thêm. Nếu bạn đã sử dụng các phương pháp khác trong danh sách của chúng tôi, hãy thử sử dụng các plugin nâng cao cho phép bạn tùy chỉnh thêm các tùy chọn trì hoãn và hiệu suất của mình. Hơn nữa, hãy xem một số đề xuất từ ​​Google trong phần tiếp theo. Họ có thể giúp bạn.

 

Cách trì hoãn việc phân tích cú pháp JavaScript bằng cách sử dụng tập lệnh

Có những kỹ thuật khác nhau mà bạn có thể sử dụng để trì hoãn việc phân tích cú pháp JavaScript. Phần tiếp theo thảo luận về những gì bạn cần làm. 

Tóm lại, bạn cần thực hiện những điều sau:

  1. Sao chép mã dưới đây và thêm mã đó ngay trước thẻ </body> trong HTML của bạn.
  2. Thay thế example.js trong mã bên dưới bằng tệp chứa tập lệnh được hoãn lại.
  3. Lưu các thay đổi.
  4. Kiểm tra trang web của bạn để xem hiệu quả.

Hãy xem xét các bước này chi tiết hơn:

  • Sử dụng tập lệnh để gọi tệp JS bên ngoài sau khi tải xong trang đầu tiên . Trên varvy.com, Patrick Sexton đề xuất một phương pháp cho phép tải nội dung trang web trước khi tải JS (để đảm bảo rằng người dùng có thể xem nội dung trước). Điều này đảm bảo rằng đường dẫn tải quan trọng không bị ảnh hưởng bởi các tập lệnh gây ra bất kỳ chặn hiển thị nào. Phương pháp này liên quan đến việc tạo một tệp bên ngoài không cần thiết để hiển thị nội dung ban đầu. Sau đó, thêm tập lệnh sau ngay trước </body> trong HTML. Ví dụ sau sử dụng tệp example.js, tệp này cần được cập nhật tương ứng. 
    <script type="text/javascript">
        function downloadJSAtOnload() {
            var element = document.createElement("script");
            element.src = "example.js";
            document.body.appendChild(element);
        }
        if (window.addEventListener)
            window.addEventListener("load", downloadJSAtOnload, false);
        else if (window.attachEvent)
            window.attachEvent("onload", downloadJSAtOnload);
        else window.onload = downloadJSAtOnload;
    </script>

    Khi trang web tải xong, tập lệnh sẽ bắt đầu tải xuống và thực thi  example.js  – vấn đề là bạn sẽ cần tạo tệp theo cách thủ công.

  • Sử dụng thuộc tính async hoặc defer . JS thẻ  async  hoặc  Hoãn  thuộc tính hành động trong một cách tương tự – theo cách mà họ làm việc là như vậy mà họ giảm thiểu số lượng thời gian mà HTML phân tích cú pháp dừng lại để chờ cho tải và thực hiện các script. Không đồng bộ cho phép việc tải xuống các tệp JS diễn ra không đồng bộ, thay vì đồng bộ, tức là một luồng mới được mở để tải xuống trong khi HTML tiếp tục phân tích cú pháp. Defer hướng dẫn trình duyệt thực thi tập lệnh SAU KHI quá trình tải trang hoàn tất. Đây là một cách khác để cho phép phân tích trang hoàn tất và do đó không tạo ra ảnh hưởng đến thời gian tải. Cả hai thẻ này đều giảm thiểu việc chặn hiển thị của JS. Trong việc sử dụng cả hai điều này, JS không cần đợi HTML hoàn tất quá trình phân tích cú pháp trước khi bắt đầu tải xuống hoặc thực thi – điều này đảm bảo rằng trang vẫn tải nhanh chóng. Xem cách thực thi xảy ra đối với không đồng bộ và trì hoãn tương ứng trong các hình ảnh bên dưới.
    thuộc tính async
    thuộc tính trì hoãn
  • Di chuyển JavaScript xuống cuối trang của bạn . Đề xuất thứ 3 và cuối cùng là chuyển bất kỳ <script> thẻ nào  xuống cuối trang (đặc biệt nếu chúng không quan trọng, chẳng hạn như quảng cáo). Phương pháp này không phải là lý tưởng, bởi vì trình duyệt sẽ vẫn bận rộn cho đến khi tập lệnh cuối cùng được tải xuống hoàn toàn và được phân tích cú pháp. Do trình duyệt có vẻ bận, một số khách truy cập có thể không tương tác với trang cho đến khi trang được tải hoàn toàn, dẫn đến trải nghiệm người dùng có khả năng tiêu cực.

 

Đề xuất từ ​​Google

Google có rất nhiều tài nguyên để cải thiện hiệu suất trang web của bạn. Họ thậm chí còn có một trang dành riêng để cải thiện thời gian tải tập lệnh của trang web của bạn, bạn có thể kiểm tra tại đây .

Trên menu bên trái, bạn cũng có thể tìm thấy các tài nguyên khác giúp bạn cải thiện hiệu suất trang web của mình. Đảm bảo rằng bạn cũng kiểm tra chúng nếu báo cáo PageSpeed ​​Insights của bạn báo cáo các vấn đề liên quan đến chúng.

tài nguyên google

Để có cái nhìn tổng quan, Google gợi ý rằng bạn nên nội tuyến các tập lệnh quan trọng thay vì đồng bộ hóa hoặc trì hoãn các tập lệnh không quan trọng. Điều đó có nghĩa là các tập lệnh được trang web của bạn yêu cầu phải được nhúng vào HTML. Tuy nhiên, đó là công việc của các nhà phát triển chủ đề và plugin WordPress – nhưng nếu bạn định tạo chủ đề hoặc plugin của mình, hãy ghi nhớ điều này.

Ngoài ra, Google cũng vạch ra một cách để bạn xác định theo cách thủ công tập lệnh nào chặn việc hiển thị trang web của bạn do có thời gian tải rất lâu. Bạn có thể làm điều đó bằng cách sử dụng tab phạm vi bảo hiểm của Chrome’s Dev Tools .

Trì hoãn CSS không được sử dụng

Một vấn đề tương tự mà bạn có thể thấy đang xảy ra những ngày này, cũng trong công cụ Pagespeed insights, là Trì hoãn CSS không được sử dụng. Mặc dù đây là một vấn đề tương tự, nhưng gốc rễ của nó hơi khác. Về cơ bản, CSS sẽ cần được cấu trúc lại để sửa lỗi này một cách chính xác.

Các câu hỏi thường gặp

1. Làm cách nào để khắc phục việc hoãn phân tích cú pháp JavaScript trong WordPress?

Để khắc phục sự chậm trễ phân tích cú pháp Javascript trong WordPress, bạn cần thực hiện một số thay đổi nhỏ đối với mã của mình. Bạn có thể tìm tất cả các tập lệnh và thêm thẻ trì hoãn vào chúng hoặc bạn có thể cài đặt một plugin tự động thực hiện việc này. Bạn cũng có thể tạo tập lệnh tải tệp không đồng bộ như được trình bày trong phần Cách trì hoãn phân tích cú pháp của Javascript bằng cách sử dụng phần tập lệnh của bài viết này.

2. JavaScript hoãn là gì?

Trì hoãn phân tích cú pháp Javascript là quá trình hướng dẫn trình duyệt của khách truy cập trang web của bạn tải các tệp cụ thể SAU KHI trang đã tải xong. Điều này cho phép người dùng xem nội dung của trang nhanh hơn nhiều so với việc bạn không triển khai hoãn phân tích cú pháp Javascript

3. Sự khác biệt giữa async và defer Javascript là gì?

Không đồng bộ có nghĩa là nội dung Javascript được tải dưới dạng kết nối mới của riêng nó, song song với bất kỳ mã nào hiện có khác. Với async, trình duyệt tạo một chuỗi xử lý mới sẽ không làm chậm bất kỳ quá trình tải xuống hiện có nào trong khi Javascript đang được tải xuống và thực thi. Mặt khác, hãy trì hoãn, yêu cầu trình duyệt phân tích cú pháp script, sau khi phần còn lại của nội dung đã được tải xuống. Mặc dù điều này thường tốt cho tốc độ, nhưng có thể có một số vấn đề với nội dung của bạn, nếu nội dung đó tham chiếu đến tập lệnh đã bị trì hoãn (vì nó sẽ không khả dụng).

4. Làm cách nào để rút gọn JavaScript trong WordPress?

Để giảm thiểu Javascript trong WordPress, bạn sẽ cần triển khai một plugin tự động thực hiện việc này. Bạn có thể đọc thêm về điều này ở đây . 

Kết thúc

Và bạn vừa chứng kiến ​​cách trì hoãn phân tích cú pháp JavaScript trong WordPress.

Chúng tôi đã biết rằng nó có thể đạt được thông qua plugin hoặc thông qua các tinh chỉnh thủ công. Nó có rất nhiều lợi ích cho trang web của bạn như cải thiện SEO, trải nghiệm người dùng tốt hơn và thời gian tải nhanh hơn. Do đó, điều quan trọng là phải đảm bảo rằng bạn trì hoãn nhiều tập lệnh nhất có thể để đạt được hiệu suất tối đa.

Nhưng hãy nhớ rằng, hãy luôn giữ một bản sao lưu và kiểm tra thật nhiều để đảm bảo rằng bạn đã trì hoãn các tập lệnh chính xác! Nó có vẻ tẻ nhạt nhưng nếu làm đúng, những lợi ích và lợi ích thu được là rất lớn.

Nếu bạn muốn thực sự tối đa hóa tốc độ tải trang web của mình, chúng tôi khuyên bạn nên để nó cho các CHUYÊN GIA như những người từ WP Rocket, để nhận được lợi ích tối đa của việc này và hàng trăm hành động khác để làm cho trang web của bạn tải nhanh hơn.

Trả lời

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 *