Javascript luôn là nguyên nhân chính làm chậm tốc độ tải trang web, tối ưu hóa được javascript sẽ cải thiện vượt trội tốc độ tải web của bạn và giảm tải cho webhost
Nếu bạn tối ưu phân phối Javascript sai cách, bạn sẽ bị chặn hiển thị trên màn hình đầu, tối ưu sai cách sẽ gây ra lỗi và xung đột
Bản chất javascript nó phục vụ tính năng và hiệu ứng
Javascript đến năm 2020 hiện đang là ngôn ngữ lập trình có nhiều phần nhất trên thế giới
Gần như các trang WordPress và các chủ đề đều có javascript và jquery
lục mục
- 1 làm như thế nào để tối ưu hóa hiệu quả javascript nhất?
- 1. 1 Phương pháp tải trang web thông thường.
- 1. 1. 1 Hướng dẫn cách tải thông tin phân phối thông thường
- 1. 2 Phương pháp tải trì hoãn javascript
- 1. 2. 1 Thời gian trì hoãn javascript
- 1. 3 Phương pháp tải không đồng bộ javascript
- 1. 3. 1 Cách tải không đồng bộ javascript
- 1. 4 Phương pháp javascript vào chân trang là bạn đang muốn thay đổi thứ tự thành.
- 1. 5 Phương pháp Lazy load javascript
- 1. 5. 1 Cách lười tải javascript
- 1. 5. 2 Đâu là phương pháp tốt tải javascript tốt nhất dành cho tôi
- 1. 6 Phương pháp cắt giảm tệp javascript
- 1. 6. 1 Hướng dẫn cắt giảm tệp javascript
- 1. 7 Phương pháp tải có điều kiện javascript
- 1. 7. 1 Hướng dẫn tải javascript có điều kiện
- 1. 8 Gộp cách tệp javascript
- 1. 8. 1 Hướng dẫn đường javascript
- 1. 9 Nén javascript
- 1. 9. 1 Hướng dẫn nén tệp javascript
- 1. 1 Phương pháp tải trang web thông thường.
- 2 Bí quyết javascript tối ưu thành công Một số lưu ý khi kéo dài javascript.
làm như thế nào để tối ưu hóa hiệu quả javascript nhất?
WP tăng tốc chia sẻ bao gồm 5 chiến thuật tối ưu cách tải tệp phân phối và 4 tệp chiến thuật tối ưu biến phổ biến nhất dưới đây
5 chiến thuật phân phối tối ưu. Tải bình thường, trì hoãn, tải không đồng bộ, cho xuống chân trang, lười tải javascript.
tệp chiến thuật tối ưu 4. Xóa luôn tệp javascript hoặc giảm thiểu mã, nén javascript, khung tệp javscript, tải xuống có điều kiện.
Mỗi một chiến thuật thì sẽ có ưu điểm, nhược điểm và hiệu quả khác nhau
Chúng ta cùng nhau tìm hiểu nhé
Trước hết phải hiểu rõ hơn trình duyệt tải javascript như thế nào để thuận tiện cho công việc tối ưu một cách chính xác nhất
Method of load website information
Bước 1. Tải xuống html rồi phân tích cú pháp, html phải dừng tải và phân tích cú pháp nhường cho css và javscript.
Bước 2. Tải xuống css rồi phân tích cú pháp.
Bước 3. Tải xuống javascript rồi phân tích cú pháp.
Bước 4. Cú pháp Html tiếp tục phân tích cú pháp.
Bước 4. Tải xuống hình ảnh rồi phân tích cú pháp.
Cách này thì bạn không cần làm gì cả trình duyệt sẽ tự động mặc định
Cách này luôn được các công cụ kiểm tra tốc độ tải web đặc biệt là google nếu bạn có file jquery nặng trên 20kb mà dùng cách này google nó hơi khó chịu với bạn
Đây là phương pháp javascript tối ưu nhất với trang web chỉ có 1 tệp javascript dưới 10kb
Hướng dẫn cách tải thông tin phân phối thông thường
Đơn giản là để mặc định, không làm gì cả thì nó sẽ như thế
Phương pháp tải trì hoãn javascript
Bước 1. Tải xuống html đồng thời tải javascript , html phân tích cú pháp.
Bước 2. Tải xuống css rồi phân tích cú pháp.
Bước 3. Tải xuống hình ảnh rồi phân tích cú pháp.
bước 4. Mọi chuyện hoàn tất thì mới bắt đầu cú pháp phân tích của javascript.
Phù hợp với mọi website, bạn nên lưu ý về file jquery nếu tải trì hoãn file jquery rất dễ bị lỗi, nếu bị lỗi bạn hãy bỏ qua trì hoãn file jquery
Bạn cứ thử lên môi trường localhost giả lập xem website có phù hợp không
Bản chất của trì hoãn javascript không giúp bạn tải nhanh hơn nhưng nó giúp khách hàng nhận được thông tin nhìn thấy trang sớm hơn
Delay javascript
Cách 1
function defer_wptangtoc_of_javascript [ $url ] {
if [ is_user_logged_in[] ] return $url;
if [ FALSE === strpos[ $url, '.js' ] ] return $url;
if [ strpos[ $url, 'jquery.js' ] ] return $url;
return "$url' defer ";
}
add_filter[ 'clean_url', 'defer_wptangtoc_of_javascript', 10, 1 ];Đoạn này bạn hãy chọn vào file functions. php của bạn. Đoạn này mình đã loại bỏ tệp jquery không trì hoãn và không trì hoãn những người đã đăng nhập để tránh bị lỗi, nếu bạn không muốn một tệp nào đó trì hoãn thì bạn hãy nhân đôi đoạn mã jquery nếu [ strpos[ $url, . js’ ] ] return $url;, rồi thay jquery. js by your file nhé
Trong trường hợp bạn chỉ cần trì hoãn một tệp duy nhất thì có thể sử dụng
function wptangtoc_lazy_load_attribute[$tag, $handle] {
if[$handle !== 'wptangtoc-javascript'] {
return $tag;
}
return str_replace[' src', ' defer data-deferred="1" src', $tag];
}
wptangtoc-javascriptthay bằng id file javascript mà bạn muốn trì hoãn
Cách 2. Sử dụng plugin wp-rocket, litespeed…
Cực kỳ nhiều plugin Hỗ trợ tính năng này.
Phương pháp tải không đồng bộ javascript
Bước 1. Tải xuống html đồng thời tải javascript, html phân tích nhưng khi javascript tải xong, lùi lại javascript phân tích cú pháp, rồi html mới tiếp tục phân tích cú pháp.
Bước 2. Tải xuống css rồi phân tích cú pháp.
Bước 3. Tải xuống hình ảnh rồi phân tích cú pháp.
Phù hợp với mọi website, bạn nên lưu ý về file jquery nếu tải không đồng bộ file jquery rất dễ bị lỗi, nếu lỗi bạn hãy bỏ tải file jquery không đồng bộ
Bản chất của tải xuống không đồng bộ javascript không làm tải nhanh hơn nhưng nó giúp khách hàng nhận được thông tin nhìn thấy trang sớm hơn
Bạn cứ thử lên môi trường localhost giả lập xem trang web của bạn có phù hợp không
Trì hoãn và tải không đồng bộ thì có khác nhau một chút, trì hoãn thì trả lại cho mình khả năng hiện thị sớm hơn, tuy nhiên tải không đồng bộ lại tiến tới chúng ta hoàn toàn không dễ bị lỗi như trì hoãn
Cách tải không đồng bộ javascript
cách 1
function wptangtoc_tai_khong_dong_bo_js[$tag]{
$scripts_to_async = array['gia-tuan.js'];
foreach[$scripts_to_async as $async_script]{
if[true == strpos[$tag, $async_script ] ]
return str_replace[ ' src', ' async="async" src', $tag ];
}
return $tag;
}
add_filter[ 'script_loader_tag', 'wptangtoc_tai_khong_dong_bo_js', 10 ];
Bạn hãy thay file gia-tuan. js bằng tệp tương ứng của bạn hoặc nếu bạn muốn thêm 2 đoạn mã có sẵn [‘gia-nhìntuan. js’] you only to change to [‘gia-tuan. js’,’gia-tuan2. js’] bạn muốn thêm bao nhiêu tùy chọn. Sau đó chọn đoạn này vào chức năng tệp. php
cách 2. Bạn có thể sử dụng các plugin hỗ trợ plugin Async JavaScript
Phương pháp javascript vào footer là bạn đang muốn thay đổi thứ tự thành
Bước 1. Tải xuống html rồi phân tích cú pháp.
Bước 2. Tải xuống css rồi phân tích cú pháp.
Bước 3. Tải xuống hình ảnh rồi phân tích cú pháp.
Bước 4. Tải xuống javascript rồi phân tích cú pháp.
Phương pháp javascript cho vào footer thì điểm của nó sẽ làm cho điểm chấm trên những công cụ chấm điểm rất cao, hiển thị đầu trang rất sớm
Nhược điểm của nó. Mặc dù hiển thị đầu trang sớm nhưng khách hàng không thể thao tác trên trang web ngay lập tức, vui lòng phải chờ đợi
Tuy nhiên, phương pháp này không phải là một giải pháp tuyệt vời bởi vì, mặc dù trang của bạn sẽ được hiển thị sớm hơn, trình duyệt của khách truy cập sẽ vẫn hiển thị trang như tải xuống khi tất cả các kịch bản . Điều này có thể ngăn chặn một số khách truy cập tương tác với trang của bạn vì họ cho rằng nội dung không được tải đầy đủ
Tải jquery cuối cùng đây là chiến lược rất khó tối ưu để cho jquery lên trên các tệp javascript khác, nếu như chủ đề của bạn rất cần tệp jquery nếu sử dụng cách này gần như chắc chắn sẽ xảy ra lỗi
Nếu như bạn sử dụng lazy load thì phương pháp tốt dành cho bạn
Phương pháp này dành cho ai. trang web của bạn có quá ít tệp javascript mà tệp đó cũng không thực sự quan trọng trong màn hình đầu hiển thị, không sử dụng lazy load, là một điểm hâm mộ của điểm ngày càng cao và càng tốt trên các công cụ điểm.
Phương pháp Lazy load javascript
Bước 1. Tải xuống html rồi phân tích cú pháp.
Bước 2. Tải xuống css rồi phân tích cú pháp.
Bước 3. Tải xuống hình ảnh rồi phân tích cú pháp.
Bước 4. Chờ một thời gian bạn quy định javascript mới bắt đầu tải xuống rồi phân tích cú pháp.
Đây là phương pháp trễ này rất tuyệt vời, tuy nhiên áp dụng chính tại tệp trên webhost không cẩn thận rất dễ xảy ra lỗi, phương pháp này hay được áp dụng để tải tài nguyên bên thứ 3 không quan trọng hiển thị trong màn hình đầu
Đó chính là những chatbox như facebook, những file đo lường v. v
Sử dụng phương pháp này rất hiệu quả
Cách lười tải javascript
Bạn hãy sử dụng plugin Flying Scripts của WP Speed Matters hoặc plugin wp-rocket 3. 7. 0 trở lên
Lưu ý. phương pháp này chỉ hoạt động thật tốt khi tải tài nguyên bên thứ 3, nếu dùng chiến thuật này mà áp dụng với file javascript của bạn trong webhost thì rất dễ xảy ra lỗi
Đâu là phương pháp tốt tải javascript hay nhất dành cho tôi
Theo kinh nghiệm làm việc của mình thì nó tùy thuộc vào website của bạn, chỉ có bạn hay người có tài khoản quản trị website bạn mới hiểu website của bạn
Đa phần thì hoãn trì hoãn javascript 60% các vấn đề website luôn luôn tốt hơn ở mọi phương diện [đây cũng là phương pháp mình thường xuyên sử dụng]
Tuy nhiên cách tối ưu javascript tốt nhất tùy thuộc vào trang web của bạn mới có cách tối ưu khác nhau, bạn có thể kết hợp các cách với nhau
Mỗi một chiến thuật thì đều có ưu và nhược điểm riêng, nếu bạn có đủ kiến thức hãy kết hợp các kỹ thuật này với nhau
Mạnh nhất không bằng phù hợp nhất
Phương pháp cắt giảm tệp javascript
Đây là phương pháp yêu thích của mình là phương pháp số 1 vừa tăng tốc độ tải tổng thể trang web
Bạn cần hiểu, người dùng đến và nhớ web của bạn vì nội dung có giá trị chứ không phải vì những hiệu ứng vi vu
Hướng dẫn cách cắt giảm tệp javascript
Bạn hãy cắt giảm các javascript mà bạn thấy nó thực sự không quan trọng đối với người dùng, bạn có thể sử dụng tính năng của google chrome để biết tệp javascript nào thực sự sử dụng không cần thiết và đang sử dụng tài nguyên của bạn
Sử dụng các chủ đề WordPress nó thật sự đơn giản không có nhiều cồng kềnh, nếu bạn cần gì bạn có thể sử dụng plugin để thêm vào đôi khi còn tốt hơn là các chủ đề tích hợp sẵn
Tắt cả plugin tải tối đa plugin tự sắp xếp các tệp javascript vào nhau
Phương pháp tải có điều kiện javascript
Đây là phương pháp tốt nhất với các trang web bán hàng woocommerce mà vẫn có thể kết hợp được với cách bên trên, nó ít được sử dụng hơn so với các trang blog [vì trang blog nó thực sự đơn giản]
Ví dụ khách hàng truy cập vào blog của bạn, khách hàng đọc về mỹ phẩm, tuy nhiên bạn đã cài đặt plugin woocommerce, nó làm tải tất cả các tệp javascript của woocommerce mà blog thật sự trang đó không sử dụng, làm tiêu tốn thời gian tải
Cách tải xuống có điều kiện javascript
add_action[ 'wp_enqueue_scripts', 'wptangtoc_deregister_javascript_test', 100 ];
function wptangtoc_deregister_javascript_test[] {
if [ ! is_page[ 'gioi-thieu' ]]{
wp_deregister_script[ 'gia-tuan' ];
}}
Đây là ví dụ về tải điều kiện chỉ tải file javascript có nick name là gia-tuan chỉ được phép tải tại trang giới thiệu
Hướng dẫn cách tải xuống có điều kiện javascript
Cách 1. Bạn hãy sử dụng plugin tải xuống có điều kiện. perfmatters [ plugin mình cực kỳ yêu thích].
Cách 2. You use functions. php to function should if.
Gop cach file javascript
Nếu như bạn chưa sử dụng http/2 thì đây là một cách bắt buộc bạn phải làm để tăng tốc độ trang web của bạn lên một tầm cao mới
Nếu bạn đã và đang sử dụng http/2 thì cách sử dụng này không hiệu quả gấp đôi khi tác dụng ngược
Có trường hợp đặc biệt nếu bạn sử dụng http/2 bạn có thể là bạn có 1 file javascript lớn và 1 file javascript rất nhỏ [dưới 10kb] thì bạn hãy ghé vì thời gian phân giải dns của file javscript nhỏ kia thì cũng vậy
Hướng dẫn javascript
Cách 1. Tất cả các plugin tăng tốc độ tải WordPress như wp-rocket, litespeed cache, w3c total cache…
Đề hỗ trợ tính nắng khung javascript cho bạn. [ đây là cách ưu tiên và hiệu quả hơn]
Cách 2. Bạn tự sắp xếp bằng tay đây là cách khá mất công, bạn bằng cách dùng tay dỡ bỏ tập tin phải sử dụng funcitons. php to khai báo lại không thì nó toàn khai báo lỗi.
Nén javascript
Nén javascript có thể giảm dung lượng tệp javascript của bạn, nén tệp lợi ích của nó là xóa khoảng cách chắc chắn và những dòng lỗi để phục vụ cho những lập trình viên dễ đọc và được chỉnh sửa, tuy nhiên với máy móc và chương trình
Hướng dẫn nén tệp javascript
Cách 1. Tất cả các plugin tăng tốc độ tải WordPress như wp-rocket, litespeed cache, w3c total cache…
các chủ đề hỗ trợ tính năng nén javascript cho bạn.
Cách 2. Bạn hãy tự làm thủ thuật sử dụng các công cụ nén javscript trực tuyến nó sẽ tự động loại bỏ khoảng trắng và ghi chú cho bạn.
https. //máy nén javascript. com/ đây là trang nén javascript trực tuyến mình khá ưng ý, bạn chỉ cần sao chép toàn bộ mã của javascript vào tệp của mình rồi dán vào plugin phần mềm này, nó sẽ trả kết quả về sao chép và lưu ngược lại.
Bí quyết tối ưu javascript thành công Một số lưu ý khi trì hoãn javascript
nếu bạn sử dụng jquery nếu bạn trì hoãn jquery sẽ rất dễ xảy ra lỗi do không sử dụng được các tính năng javascript khác, với tệp jquery thì nó phải được tải trước tất cả với các tệp javascript khác
Lưu ý công thức bất di bất dịch. Nói điều kiện file B phải phân tích cú pháp xong thì file A phân tích cú pháp mới hoạt động được, nó là yếu tố quan trọng quan trọng với javascript khi trì hoãn hoặc tải xuống không đồng bộ hoặc lazy load và cho xuống chân trang. [hãy lưu ý điều này]
Mỗi một phương pháp đều có ưu điểm và nhược điểm riêng tùy theo nhu cầu sử dụng và chủ đề của bạn sử dụng hãy chọn một phương pháp tối ưu nhất dành cho bạn nhé.
Phương pháp mình thích nhất vừa an toàn là trì hoãn trì hoãn và loại bỏ jquery và loại bỏ javascript ở đầu trang là phương pháp theo cá nhân mình hiện tại là hiệu quả nhất
Lưu ý. Loại bỏ các javascript ở đầu trang thì đừng nén file đó nhé. [tức là không để plugin thay đổi tên của nó]
Nếu bạn muốn khoe điểm nhưng tốc độ load không tốt, đúng nghĩa là ưu tiên tối đa cho bộ công cụ để kiểm tra thì bạn hãy dùng javascript add footer điểm sẽ cao nhưng load trải nghiệm người dùng thì khá chán
Còn một trường hợp đặc biệt nữa nó phụ thuộc hoàn toàn vào chủ đề và khả năng chỉnh sửa javascript của bạn chỉ đơn giản là trì hoãn tất cả, cả javascript thông thường và cả jquery, nếu may mắn thì trì hoãn đoạn trích mà trang web không bị
Trên các trang mà chúng không sử dụng được, hãy tắt chúng từ tải xuống. Làm thế nào để trì hoãn Javascript? . The end of the end of the download. Một lần nữa, không trì hoãn bất kỳ Javascript nào mà Javascript cần thiết để hiển thị trang đầu tiên [ví dụ:. JS liên quan đến thanh trượt ở đầu trang]. Làm thế nào để vô hiệu hóa…