Mẹo nhỏ: Để tìm kiếm chính xác các chia sẻ của f4vnn.com, hãy search trên Google với cú pháp: "Từ khóa" + "f4vnn". (Ví dụ: tắt update windows f4vnn). Tìm kiếm ngay

Trì hoãn phân tích cú pháp Defer Parsing trong WordPress

Trì hoãn phân tích cú pháp Defer Parsing trong WordPress: Một thước đo quan trọng về hiệu suất trang web của bạn là tốc độ trang. Tốc độ trang là thời gian mà trình duyệt cần để hiển thị một trang web. Thời gian tải nhanh hơn đảm bảo rằng một tỷ lệ lớn hơn khách truy cập của bạn ở lại trên trang web của bạn khi nó tải lên. Tốc độ trang cũng xác định một phần thứ hạng của trang web của bạn trong kết quả của công cụ tìm kiếm. Do đó, việc tăng tốc trang web WordPress thường nằm ở đầu danh sách mong muốn của chủ sở hữu trang web.

Trong hướng dẫn này, chúng ta sẽ thảo luận về việc trì hoãn phân tích cú pháp JavaScript trong khi tải trang web – một kỹ thuật quan trọng để loại bỏ khối lượng riêng khỏi trang web của bạn.

Trì hoãn phân tích cú pháp Defer Parsing trong WordPress

Trì hoãn phân tích cú pháp Defer Parsing trong WordPress

Tốc độ trang là một phần quan trọng của trải nghiệm người dùng phụ thuộc vào nhiều thứ. Bài viết này giả định rằng bạn đã kiểm tra một yếu tố cơ bản – chạy trang web của bạn trên một máy chủ WordPress đủ nhanh.

1. Tại sao lại nên trì hoãn phân tích cú pháp JavaScript?

Để hiểu kỹ thuật hoãn phân tích cú pháp JavaScript, hãy lùi lại một bước và phân tích cách trình duyệt web hiển thị một trang. Khi trình duyệt của bạn gửi một yêu cầu đến máy chủ web của bạn, trang được máy chủ gửi lại sẽ được tải xuống dưới dạng tài liệu HTML. Tài liệu HTML này chứa văn bản, mã hiển thị các phần tử DOM khác nhau và các tài nguyên như hình ảnh, bảng định kiểu và tập lệnh.

Trình duyệt đọc từng dòng đánh dấu HTML này. Ngoài ra, các tài nguyên hiện có trên trang cần được tải xuống. Theo mặc định, trình duyệt tải xuống tuần tự các tài nguyên này khi nó tìm thấy chúng trong tài liệu. Việc hiển thị trang web chỉ tiếp tục sau khi tài nguyên đã được tải xuống.

Tài nguyên lớn ảnh hưởng xấu đến thời gian tải trang. Vì hình ảnh chiếm một phần đáng kể trong kích thước trang, bạn nên tối ưu hóa hình ảnh cho trang web WordPress của mình. Đối với các tệp JavaScript, bạn cần xác định những tập lệnh nào cần thiết để hiển thị trang của bạn một cách chính xác. Bạn có thể hoãn việc tải xuống các tập lệnh không cần thiết để tăng tốc trang web của mình.

Trong phần tiếp theo, chúng ta sẽ xem xét các cách để xác định những tập lệnh nào cần thiết để hiển thị trang của bạn.

2. Tập lệnh nào để trì hoãn Defer?

Đối với một trang web tương đối nhỏ sử dụng JavaScript tối thiểu, không có tập lệnh nào có thể cần thiết để tải trang. Tuy nhiên, nếu bạn quản lý một trang web phức tạp hơn, việc phân tích cẩn thận tất cả các tập lệnh trên trang web của bạn có thể tiết lộ những tập lệnh nào cần thiết cho việc tải trang.

Một cách để thực hiện phân tích này là xóa từng tập lệnh một và kiểm tra xem có bất kỳ lỗi nào trong bảng điều khiển JavaScript trong quá trình tải trang hay không. Tuy nhiên, quá trình này đòi hỏi kiến thức đáng kể về JavaScript và công nghệ web.

Một phương pháp dễ dàng hơn để đánh giá tập lệnh nào là quan trọng đối với tải trang của bạn là sử dụng công cụ kiểm tra tốc độ như GTmetrix. Nhập URL của trang web của bạn và đợi công cụ đánh giá nó. Trong trang kết quả, hãy chuyển đến tab tốc độ trang và mở rộng phần Defer parsing of JavaScript. Phần này hiển thị cho bạn danh sách các tập lệnh không cần thiết được tải trong quá trình kết xuất.

cach tri hoan phan tich cu phap javascript trong wordpress 1

3. Thuộc tính Async so với Defer

Có hai cách để đảm bảo rằng việc tải xuống tập lệnh không ảnh hưởng đến việc hiển thị trang web.

Đầu tiên, bạn có thể thêm thuộc tính không đồng bộ async vào thẻ script. Điều này yêu cầu trình duyệt tải tập lệnh không đồng bộ. Nói cách khác, trình duyệt bắt đầu tải xuống tài nguyên ngay khi nó gặp nó trong mã nhưng vẫn tiếp tục phân tích cú pháp HTML trong khi tài nguyên vẫn đang được tải xuống. Thẻ tập lệnh mẫu bên dưới cho biết cách thêm thuộc tính async:

<script src="path/to/script" async></script>

Thứ hai, bạn có thể thêm thuộc tính defer vào thẻ script. Điều này cho trình duyệt không tải xuống tài nguyên cho đến khi quá trình phân tích cú pháp của trang hoàn tất. Sau khi phân tích cú pháp và hiển thị xong, trình duyệt sẽ tải xuống danh sách các tập lệnh bị hoãn mà nó đã gặp trước đó. Thẻ script mẫu bên dưới cho biết cách thêm thuộc tính defer vào trang HTML:

<script src="path/to/script" defer></script>

Sự khác biệt chính giữa thuộc tính defer và async là khi nào tài nguyên sẽ được tải xuống.

Giả sử bạn có hai tập lệnh: A và B. B xuất hiện trong đoạn mã sau A, B phụ thuộc vào A, nhưng A lớn hơn B đáng kể.

Nếu bạn sử dụng async, B có thể hoàn tất quá trình tải xuống trước khi A được tải xuống hoàn toàn. Điều này sẽ dẫn đến lỗi, vì B sẽ được thực hiện trong trường hợp không có A.

Tuy nhiên, nếu bạn sử dụng trì hoãn defer, A và B sẽ được tải xuống tuần tự ở cuối, điều này sẽ không dẫn đến lỗi.

Nếu bạn chỉ có một vài tập lệnh trong đường dẫn hiển thị, bạn sẽ không tìm thấy bất kỳ sự khác biệt nào giữa việc sử dụng async và defer. Tuy nhiên, nếu bạn có một ứng dụng web phức tạp, bạn nên sử dụng tính năng trì hoãn để đảm bảo các yếu tố phụ thuộc lẫn nhau được thỏa mãn.

Bây giờ chúng ta hãy thảo luận về các cách trì hoãn việc tải xuống các tập lệnh trong WordPress.

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

1. Chỉnh sửa file functions.php

Nếu bạn đã làm việc trong lĩnh vực phát triển WordPress, bạn biết rằng không nên thêm tập lệnh trực tiếp thông qua đánh dấu HTML. Thay vào đó, bạn nên sử dụng các chức năng WordPress tích hợp sẵn để yêu cầu tài nguyên.

Vì vậy, nếu bạn muốn thêm thuộc tính async hoặc defer vào bất kỳ tập lệnh nào của mình, bạn nên thêm hàm sau vào tệp functions.php của theme:

add_filter('script_loader_tag', 'add_defer_tags_to_scripts');
function add_defer_tags_to_scripts($tag){
    # List scripts to add attributes to
    $scripts_to_defer = array('script_a', 'script_b');
    $scripts_to_async = array('script_c', 'script_d');
 
    # add the defer tags to scripts_to_defer array
    foreach($scripts_to_defer as $current_script){
        if(true == strpos($tag, $current_script))
             return str_replace(' src', ' defer="defer" src', $tag);
    }
 
    # add the async tags to scripts_to_async array
    foreach($scripts_to_async as $current_script){
        if(true == strpos($tag, $current_script))
             return str_replace(' src', ' async="async" src', $tag);
    }
     
    return $tag;
 }

Đừng quên rằng trước khi bạn thêm các thuộc tính defer và async vào các thẻ script, bạn cũng cần phải xếp hàng từng tập lệnh để WordPress có thể truy cập nó:

add_action('wp_enqueue_scripts', 'enqueue_custom_js');
function enqueue_custom_js() {
    wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js');
    wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js');
    wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js');
    wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js');
}

2. Dùng Plugin

Chỉnh sửa mã nguồn thông qua tệp functions.php có thể không lý tưởng cho tất cả. Nếu bạn không hiểu biết về công nghệ, bạn có thể chỉ cần sử dụng một plugin để hoãn phân tích JavaScript trong trang web WordPress của mình.

– Async JavaScript

Async JavaScript là một plugin miễn phí mà bạn có thể tải xuống và cài đặt trên trang web WordPress của mình để thực hiện tác vụ này.

Để bật tính năng này, hãy chọn tùy chọn Enable Async JavaScript trong khu vực cài đặt của plugin. Sau đó, cuộn xuống phần Async JavaScript Method và chọn xem bạn muốn sử dụng phương pháp không đồng bộ hay phương pháp trì hoãn

cach tri hoan phan tich cu phap javascript trong wordpress 2

Để có các tùy chọn nâng cao hơn, hãy cuộn xuống trang. Tại đây, bạn có thể liệt kê các tập lệnh mà bạn muốn áp dụng thẻ async và defer. Tiếp theo, bạn cũng có thể thêm danh sách các tập lệnh để loại trừ. Bạn cũng có thể liệt kê các plugin và chủ đề được loại trừ khỏi bất kỳ thay đổi nào mà plugin này thực hiện.

cach tri hoan phan tich cu phap javascript trong wordpress 3
– Autoptimize

Tùy chọn hoãn phân tích cú pháp các tập lệnh của bạn cũng có sẵn như một phần của plugin Autoptimize được tạo bởi cùng một tác giả với Async JavaScript.

Trong trang cài đặt của plugin, hãy chọn tùy chọn Optimize JavaScript Code và các tập lệnh không cần thiết của bạn sẽ được hoãn lại và chuyển đến chân trang. Trong tab Extra, bạn cũng có thể liệt kê các tập lệnh mà bạn muốn thêm thuộc tính không đồng bộ vào.

cach tri hoan phan tich cu phap javascript trong wordpress 4

Kết thúc

Trong hướng dẫn này, trước tiên chúng ta đã thảo luận về tầm quan trọng của tốc độ trang và cách thức hoạt động của JavaScript. Sau đó, chúng tôi tìm hiểu lý do tại sao bạn nên trì hoãn việc phân tích cú pháp JavaScript.

Cuối cùng, chúng ta đã xem xét hai tùy chọn mà bạn có thể đạt được nó trong WordPress. Bạn có thể chỉnh sửa tệp functions.php để thêm thuộc tính không đồng bộ hoặc trì hoãn vào thẻ tập lệnh của mình hoặc sử dụng một plugin như Async JavaScript hoặc Autoptimize để tối ưu hóa tập lệnh của bạn.

Hy vọng với cách trì hoãn phân tích cú pháp Defer Parsing trong WordPress mà Blog thủ thuật máy tính f4vnn vừa chia sẻ sẽ có ích với bạn. Chúc bạn thành công.

Bài Viết Cùng Chuyên Mục
Game & Apk Mod Acapella Việt Template BLogspot Liên Kết URL

Theo dõi trên

Logo Google new
Rate this post