Tải tập lệnh lười biếng. Tốc độ trang của Google: Kiểu CSS và tập lệnh JavaScript chặn tải trang trên WP. Mozilla đang đi trước xu hướng

/ 26.01.2018

Với sự gia tăng tốc độ kết nối Internet và sự gia tăng sức mạnh không chỉ của máy tính để bàn mà còn thiêt bị di động Các trang web ngày càng nặng hơn. Số lượng và kích thước của các tệp được kết nối ngày càng tăng: tệp JavaScript, tệp css, hình ảnh, tiện ích trang web của bên thứ ba, iframe. TRÊN khoảnh khắc này Các chi tiết cụ thể về cách hoạt động của trình duyệt là khi tải tệp js, quá trình hiển thị sẽ bị chặn cho đến khi tập lệnh được thực thi. Trình duyệt hiện đại V. lý lịch sẽ phân tích tài liệu và tải xuống các tập lệnh và kiểu, nhưng việc hiển thị sẽ bị chặn. So sánh thông số mạng Vì các trình duyệt khác nhau có thể được xem tại browserscope.org. Chúng tôi không thể loại bỏ hoàn toàn việc chặn, nhưng chúng tôi có thể tối ưu hóa các phần máy chủ và máy khách của ứng dụng để việc chặn kết xuất mất ít thời gian nhất.

Giải pháp phía máy chủ:
- Giảm kích cỡ tập tin được chuyển
- Sử dụng CDN
— Đặt các tập tin tĩnh trên miền riêng biệt hoặc dưới một miền, do đó làm tăng số lượng kết nối trình duyệt đồng thời.
- Cho phép nén các tập tin được chuyển (gzip)

Giải pháp dành cho phía khách hàng:
- Giảm số lượng yêu cầu.
- Tệp bộ đệm ở phía máy khách bằng cách sử dụng tiêu đề Hết hạn và Etags.
— Sử dụng CDN có sẵn công khai (Google CDN, Yandex CDN). Vì vậy, có khả năng tệp từ CDN công cộng đã được lưu trữ trong bộ đệm của trình duyệt.

Một cách để tối ưu hóa tốc độ tải trang là tải tệp không đồng bộ, điều này không chặn hiển thị.

Tập lệnh tải không đồng bộ JavaScript:

(function() ( var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = ' URL tệp'; document.getElementsByTagName('head').appendChild(script); ))();

Nếu JavaScript cần được thực thi sau khi toàn bộ trang được tải, bao gồm nội dung, hình ảnh, tệp kiểu và tập lệnh bên ngoài thì sự kiện onload cần phải được thêm vào trình tải.

if (window.addEventListener) ( window.addEventListener('load', async_load, false); ) else if (window.attachEvent) ( window.attachEvent('onload', async_load); )

Tập lệnh tải không đồng bộ JavaScript dựa trên sự kiện onload

(function() ( function async_load())( var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'URL tệp'; document. getElementsByTagName ('head').appendChild(script); ) if (window.addEventListener) ( window.addEventListener('load', async_load, false); ) else if (window.attachEvent) ( window.attachEvent('onload', async_load ); ) ))();

Nhưng đây là trường hợp cá biệt khi cần tải xuống một tệp duy nhất. Thông thường trong thực tế nhiều tập tin được kết nối.

Bao gồm tập lệnh tải không đồng bộ nhiều tệp JavaScript

(function() ( function async_load())( [ 'URL_1.js', 'URL_2.js', 'URL_3.js' ].forEach(function(src) ( var s = document.createElement('script'); s .type = 'text/javascript'; s.async = true; s.src = src; document.getElementsByTagName('head').appendChild(script); )); ) if (window.addEventListener) ( window.addEventListener ( 'load', async_load, false); ) else if (window.attachEvent) ( window.attachEvent('onload', async_load); ) ))();

Nhưng có một điểm trừ trong cách triển khai này - các tập lệnh sẽ được tải theo thứ tự ngẫu nhiên và theo đó, chúng sẽ được thực thi ngẫu nhiên theo thời gian. Tập lệnh tải không đồng bộ này lý tưởng nếu Thực thi JavaScript các tệp không phụ thuộc vào nhau và không phụ thuộc vào DOM. Nếu không, việc sử dụng nó có thể dẫn đến lỗi trên trang hoặc kết quả thực thi không mong muốn. Để thực hiện tuần tự nhưng tải xuống không đồng bộ, bạn cần chỉ định async=false, khi đó các tệp sẽ được tải xuống theo thứ tự ngẫu nhiên nhưng được thực thi lần lượt.

Hỗ trợ chuẩn HTML 5 tải không đồng bộ JavaScript. Điều này có thể được thực hiện bằng cách thêm từ khóa không đồng bộ hoặc trì hoãn. Ví dụ:

.jpg" type="text/javascript" trì hoãn>

Một tập lệnh được kết nối với thuộc tính defer sẽ được thực thi mà không ảnh hưởng đến thứ tự thực thi so với các tập lệnh khác và việc thực thi nó sẽ diễn ra sau đó. hết chỗ và phân tích trang nhưng trước khi gọi DOMContentLoaded.

Một tập lệnh được kết nối với thuộc tính async sẽ được thực thi càng sớm càng tốt sau khi được tải đầy đủ, nhưng nó không đợi tài liệu được phân tích cú pháp trước khi tải đối tượng cửa sổ. Các trình duyệt không đảm bảo rằng các tập lệnh sẽ được thực thi theo đúng thứ tự mà chúng được kết nối.

Thư viện để tải JavaScript không đồng bộ

RequireJS là một mô-đun tải JavaScript. Được tối ưu hóa cho các trình duyệt nhưng có thể sử dụng được trong các môi trường khác như Node, Rhino.

require(["script"], function(script) ( console.log("bắt đầu sau khi tải script.js"); ));

extsrc.js là một thư viện chạy các tập lệnh sẽ được thực thi sau khi trang được tải và hiển thị cho người dùng. Hoạt động chính xác với document.write.

.jpg">.jpg">

yepnope.js - cho phép tải các tệp JavaScript và CSS không đồng bộ.

yepnope([ 'script.js', 'style.css']);

Một cách dễ dàng để tải tập lệnh JavaScript

Hóa ra trên thực tế, việc tải các tập lệnh JavaScript không chặn hiển thị trên nhiều trình duyệt là rất khó và đôi khi là không thể..jpg"> đến cuối tài liệu trước khi đóng thẻ cơ thể. Do những hạn chế các trình duyệt khác nhau và chính HTML, tùy chọn tải không chặn hiển thị như vậy có thể được coi là đơn giản nhất.

Tốc độ trang của Google: Kiểu CSS Và Tập lệnh JavaScript chặn tải trang trên WP

Bài đăng này sẽ cho rằng bạn đã quen thuộc với công cụ Googleđể tối ưu hóa tốc độ tải trang của trang - PageSpeed Insights. Nghe này, ngay bây giờ hãy nhập trang web của bạn vào đó và nhấp vào nút “Phân tích”.

Được rồi, bây giờ bài viết này nói về cái gì?

Rất có thể trong kết quả kiểm tra trang web của bạn có mục “Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên”.

Tôi nhận thấy rằng điểm này là một trong những điểm khó xử lý nhất (tốn thời gian) và có mặt trên hầu hết các trang web, ngay cả những trang rất nhanh.

Cách khắc phục trên lý thuyết:

Chúng tôi kết hợp tất cả các tệp JavaScript và đặt những gì chúng tôi có trước thẻ đóng của trang web.

Chúng tôi kết hợp tất cả CSS, đặt nó ngay trước JavaScript mà chúng tôi đã di chuyển, sau đó chọn từ chúng những kiểu cần thiết để hiển thị chính xác trang và đặc biệt là phần trên cùng của nó (màn hình đầu tiên) và đặt chúng trong một thẻ trong trang web.

Điều này hoạt động như thế nào trong thực tế và trong trường hợp cụ thể này - đối với các trang web WordPress?

1. Hãy tận dụng sự phụ thuộc của các tập lệnh khác vào jQuery

Được pha chế đúng cách chủ đề WordPress tất cả các tệp CSS và JS được kết nối thông qua wp_head() và wp_footer() - nghĩa là ở và ở cuối tương ứng.

Ngoài ra, các tệp có phần phụ thuộc, ví dụ: plugin phải được kết nối sau, điều đó có nghĩa là nếu thư viện jQuery nằm trong wp_footer() thì FancyBox không vào được wp_head().

Di chuyển jQuery đến chân trang của trang

Việc này được thực hiện rất đơn giản - sử dụng các hàm wp_deregister_script(), wp_register_script(), wp_enqueue_script() và một hook (đôi khi một hook được sử dụng cùng với is_admin()). Tất cả những gì bạn cần làm là dán đoạn mã sau vào tệp trang web của bạn.

Tôi muốn thu hút sự chú ý của bạn đến thực tế là điều này giải pháp tự động và mặc dù nó hoạt động trong hầu hết 100% trường hợp, nhưng vẫn xảy ra trường hợp một số tập lệnh không muốn được chuyển sang chân trang của trang. Sau đó, bạn sẽ cần chú ý hơn đến từng tệp JavaScript của mình.

Tất nhiên, đây là lúc công việc của chúng tôi với JS kết thúc, việc hợp nhất các tập lệnh cũng sẽ tăng tốc độ (nghĩa là bạn hủy đăng ký tất cả chúng và sau đó chỉ cần kết nối phiên bản kết hợp của mình) - nhưng Google không còn yêu cầu điều này nữa.

2. Kết hợp CSS trong WordPress

Nếu việc kết hợp tất cả JavaScript vào một tệp không phải lúc nào cũng ý tưởng tốt, thì tôi khuyên bạn nên kết hợp CSS bất cứ khi nào có thể.

Hãy nhớ ảnh chụp màn hình ở đầu bài viết ( 10 tài nguyên CSS chặn)? Nhiều tệp kiểu đến từ đâu, vì nhà phát triển chủ đề có thể biết anh ta đang làm gì?

Câu trả lời là từ các plugin.

Ví dụ: plugin Mâu liên hệ 7" bao gồm biểu định kiểu riêng và mặc dù bản thân nó không lớn nhưng tốt hơn hết là tránh các yêu cầu HTTP không cần thiết.

Chúng ta hãy xem từng bước một.

Sao chép nội dung của biểu định kiểu của plugin và dán vào cuối tệp kiểu chính - .

Kiểm tra xem các kiểu này có được bao gồm không liên kết tương đối vào hình ảnh chẳng hạn. Nếu có, hãy thay thế chúng bằng hình ảnh tuyệt đối hoặc di chuyển hình ảnh từ plugin sang thư mục chủ đề.

Đi tới cài đặt plugin và xem liệu có tùy chọn bỏ chọn hộp ở đâu đó và không bao gồm CSS của plugin hay không. Không có tùy chọn như vậy trong Biểu mẫu liên hệ 7, có nghĩa là chúng ta chuyển sang điểm tiếp theo.

Chúng tôi cắt các tập tin thông qua. Đối với kiểu Contact Form 7, mã sẽ như sau:

Ngoài ra, đôi khi việc sử dụng thẻ có điều kiện, tệp plugin (cả CSS và JS) chỉ bị vô hiệu hóa khỏi những trang không được sử dụng.

Ok, chúng tôi đã sắp xếp Biểu mẫu liên hệ 7, nhưng làm cách nào bạn có thể tìm ra ID của tệp CSS của các plugin khác?

Vâng, thật dễ dàng, chúng tôi mở mã nguồn của trang và thấy một hình ảnh tương tự ở đó:

Ngoài ra còn có một plugin cho phép bạn tự động kết hợp CSS và JavaScript - Trình tối ưu hóa tập lệnh JS & CSS.

Nếu bạn có bất kỳ câu hỏi nào hoặc tôi quên đề cập đến bất cứ điều gì trong bài viết này, vui lòng để lại nhận xét.

Cách trình duyệt tải trang

Trình duyệt tải trang một cách tuần tự. Điều này đặc biệt đúng đối với liện kết ngoại cho các tập tin - css và javascript. Hãy lấy ví dụ một khối cho trang web lesnoy.name.

Blog của Lesnoy Vladislav

Trang web này chỉ tải ba tập tin bên ngoài.

2 trong số đó là kiểu css và một là tệp js. Nhưng đây là ví dụ về một trang web đơn giản, được tải hàng chục lần tập tin bên ngoài và điều này ảnh hưởng đáng kể đến tốc độ tải trang.

Tăng tốc độ hiển thị trang trên trình duyệt

Mọi chuyện sẽ ổn thôi, nhưng vấn đề chính là trình duyệt hoạt động như sau: khi nó gặp một liên kết đến một tệp bên ngoài, nó sẽ tải xuống và xử lý nó, tạm dừng hiển thị phần còn lại của trang.

Nghĩa là, từ ví dụ trên rõ ràng trình duyệt sẽ tải tiêu đề trang web (title), sau đó gặp một liên kết tới css bên ngoài main.css và sẽ tải nó. Sau khi tải, nó xử lý nó và tiếp tục - nó gặp tệp css thứ hai, lại trì hoãn việc xử lý trang cho đến sau này và hoạt động với prettify.css. Tương tự với prettify.js. Và chỉ sau đó nó mới bắt đầu hiển thị phần còn lại của trang, đã áp dụng tất cả các quy tắc css được xử lý trước đó từ tập tin css và js-col từ tập tin javascript ov.

Với Internet chậm hoặc số lượng lớn tệp bên ngoài, thời gian từ khi truy cập một trang đến khi hiển thị trang đó có thể lên tới hàng chục giây, thậm chí hơn một phút. Nhưng liệu có thể hiển thị văn bản từ trang mà khách truy cập thực sự đã đến trong khi các tệp bên ngoài đang tải không?

Tất nhiên là có thể. tầm thường nhất nhưng không kém phương pháp hiệu quả— chuyển tất cả các tệp bên ngoài không được ưu tiên từ đầu trang sang chân trang. Những thứ kia. từ khối đầu càng gần thẻ càng tốt.

Với các tệp không ưu tiên, ý tôi là những tệp không quan trọng đối với chức năng hoặc vẻ bề ngoàiđịa điểm. Cách tốt chia một tệp css hoặc js lớn thành hai - tệp nhỏ đầu tiên lưu trữ những gì cần tải nhanh nhất có thể và được đặt trong phần đầu, còn tệp thứ hai và tệp lớn chứa mọi thứ khác và nằm ở vị trí thấp nhất có thể trong mã html của trang mà không ảnh hưởng đến tốc độ hiển thị nội dung trang.

Nhưng với sự ra đời của html5, bạn có thể làm điều đó dễ dàng và đẹp mắt hơn. Thẻ script đã thêm tham số async và defer.

thuộc tính không đồng bộ

Thuộc tính không đồng bộ của tập lệnh khiến việc tải tệp js không đồng bộ. Những người biết cách lập trình trong JS đều biết chính xác nó hoạt động như thế nào - không đồng bộ. Đối với những người chưa biết cách, tôi sẽ cho bạn biết: trình duyệt gặp một liên kết đến tệp javascript bên ngoài (thẻ script có tham số src), bắt đầu tải và xử lý nó, nhưng không ngừng tải và xử lý trang chính .

Những thứ kia. thực hiện điều này song song. Đúng thứ chúng ta cần! Và đồng thời, không cần phải di chuyển thẻ này xuống chân trang (đặc biệt không phải trong tất cả các hệ thống CMS điều này đều dễ thực hiện).

Nhược điểm của thuộc tính async

Để tải tệp js không đồng bộ, tính không đồng bộ vừa là điểm cộng vừa là điểm trừ. Xét cho cùng, kích thước tệp rất có thể là khác nhau và tốc độ tải xuống và xử lý tệp cũng không mang tính quyết định. Điều này có nghĩa là khi tải một số tệp không đồng bộ, không có gì đảm bảo rằng tệp bắt đầu tải sau sẽ không tải sớm hơn (chủ yếu là do kích thước của nó).

…

TRONG trong ví dụ này Tôi không thể nói chính xác trình tự thực thi của các tệp js này sẽ như thế nào. Tất cả những gì tôi có thể nói chắc chắn là script4 sẽ tải sau script3 do thiếu thuộc tính async. Nhưng tôi không biết tệp nào từ script1.js, script2.js và script5.js sẽ tải trước, bởi vì chúng được tải không đồng bộ.

Chèn/chỉnh sửa liên kết

“Và nó có gì khác biệt với chúng ta?” - bạn hỏi. Nhưng có vẻ như việc thực thi một tập lệnh js phụ thuộc vào một tập lệnh khác. Điều này xảy ra mọi lúc và ví dụ đơn giản nhất về sự phụ thuộc như vậy là jQuery.

…

TRONG trong trường hợp này có khả năng nhận được rất cao Lỗi JavaScript bởi vì thực tế là bất kỳ plugin jQuery sẽ bắt đầu thực thi trước khi jQuery tự tải.

Phải làm gì?

thuộc tính trì hoãn

Đây là lúc một thuộc tính khác của thẻ script xuất hiện để giải cứu chúng ta - trì hoãn.

…

Trì hoãn chuyển từ bằng tiếng Anh như "hoãn lại".

Tương ứng tải javascript bị trì hoãn- lười tải javascript. Nếu trình duyệt gặp thuộc tính trì hoãn trên một liên kết đến tệp js bên ngoài, trình duyệt sẽ trì hoãn việc tải và thực thi các tệp này cho đến khi toàn bộ trang được tải và hiển thị. Đồng thời, nó đảm bảo thứ tự thực thi tập lệnh giống như ban đầu được đặt trong mã html.

Theo đó, trong ví dụ của chúng tôi với jQuery và các plugin của nó, defer giúp chúng tôi thực hiện hai tác vụ: thời gian hiển thị trang giảm đáng kể (trình duyệt không chặn hiển thị trang để tải tệp js, nó trì hoãn tải cho đến sau) và đồng thời chúng tôi loại bỏ lỗi có thể xảy ra liên quan đến việc tải không đồng bộ các tệp js phụ thuộc lẫn nhau.

Trong ví dụ trên, tập lệnh other_script.js sẽ tải không đồng bộ, bởi vì nó không phụ thuộc vào bất kỳ tệp nào khác và jQuery cũng như các plugin của nó sẽ được tải ngay sau khi trang được hiển thị theo thứ tự sau: jquery.min.js đầu tiên, sau đó là plugin1.jquery.js, plugin2.jquery.js, plugin3.jquery.js.

Kết quả là, với sự ra đời của html5 cùng các thuộc tính defer và async, chúng ta có thể kiểm soát thứ tự tải của các tệp js bên ngoài linh hoạt hơn nhiều, từ đó tăng tốc độ hiển thị trang web. Và quan trọng nhất, người dùng sẽ có ấn tượng về tốc độ tải của toàn bộ trang web tăng lên đáng kể, bởi vì chỉ trong vài giây, anh ta sẽ thấy những gì anh ta đến trang web để tìm kiếm - thông tin.

Bây giờ tôi sẽ kể cho bạn nghe về một cách thú vị, điều này sẽ giúp bạn tăng tốc trang web WordPress của mình bằng cách tải các tập lệnh song song.

Nó dùng để làm gì?

Mọi thứ đều rất đơn giản. Một trang web hiện đại là một tập hợp của nhiều loại tập lệnh, thẻ, đoạn mã, kiểu, phông chữ và mọi thứ khác. Như bạn hiểu, càng có nhiều “quà tặng” thì trang web của bạn sẽ tải càng lâu. Đối với JavaScript, đó lại là một vấn đề khác. Bạn đã bao giờ nhận thấy tình trạng lộn xộn như vậy khi trang dường như đã được tải nhưng tab lại hiển thị rằng trang vẫn đang tải? Điều này xảy ra khi một tập lệnh cụ thể chưa được tải đến cuối. Sẽ không sao đâu, đôi khi trang hoàn toàn không hoạt động cho đến khi tập lệnh tương tự, dường như không quan trọng lắm được tải. Và người dùng của bạn có thể không đủ kiên nhẫn.

Khái niệm này hoàn toàn trái ngược với tải đồng bộ, đó là một tập lệnh thông thường như:

Cuộc gọi không đồng bộ kịch bản trông như thế này:

Giờ đây, tập lệnh sẽ không buộc người dùng của bạn phải đợi tải đầy đủ, mọi thứ sẽ diễn ra song song.

Làm thế nào để tự động hóa quá trình?

Rõ ràng là nếu bạn kết nối các tập lệnh theo cách thủ công và không có nhiều tập lệnh, thì bạn có thể thực hiện việc này theo cách thủ công, chỉ bằng cách thêm thuộc tính thích hợp vào mã cuộc gọi. Nhưng làm thế nào bạn có thể tự động hóa việc này nếu, chẳng hạn, bạn có WordPress với một loạt các tập lệnh, ngoài ra, còn được gọi tự động?

Tìm tệp tin.php quen thuộc của chủ đề của bạn và chèn đoạn mã sau vào đó (ví dụ: ở cuối):

// hàm javascript không đồng bộ wcs_defer_javascripts ($url) ( if (FALSE === strpos($url, ".js")) return $url; if (strpos($url, "jquery.js")) return $url; return "$url" async="async"; ) add_filter("clean_url", "wcs_defer_javascripts", 11, 1);

Phần kết luận

Tôi có thể thêm gì vào kết luận? Tập lệnh này có thể không phù hợp với tất cả mọi người, vì ai biết bạn đã kết nối tập lệnh nào, vì vậy hãy cài đặt và thử nghiệm. Không thể có nhược điểm nào đối với tập lệnh như vậy, ngoại trừ có lẽ không tương thích với một trang web cụ thể do tính chất cụ thể của nó. Đây là một bước nhỏ khác hướng tới việc tối ưu hóa lớn cho trang web của bạn.

Nếu bạn từng nghĩ đến các vấn đề về tốc độ tải trang trên trang web của mình, thì có lẽ bạn đã quen thuộc với một dịch vụ như vậy của Google như PageSpeed Insights. Và nếu vậy thì có lẽ bạn đã quen với vấn đề khi nội dung chính của trang được tải sau khi các tập lệnh và kiểu nhất định đã được tải.

Đến lượt Google, đang cố gắng chọc mũi vào sự ô nhục này và đưa ra giải pháp riêng cho vấn đề - Xóa Mã JavaScript và CSS chặn phần đầu trang được hiển thị.

Phải làm gì về nó? Tất nhiên, bạn có thể đi theo cách tốn nhiều công sức nhất, nhưng một cách hiệu quả- xem xét toàn bộ công cụ Joomla, thực hiện các thay đổi đối với các tiện ích mở rộng, v.v. Phương pháp này thực sự tốt, nhưng thành thật mà nói, nó tốn nhiều công sức đến mức không muốn làm phiền nó, và đối với những người mới bắt đầu, phương pháp này hoàn toàn không phải là một lựa chọn.

Đơn giản nhất và không kém đúng cáchĐiều này là để sử dụng một số tiện ích mở rộng nhất định sẽ thực hiện tất cả (hoặc gần như tất cả) công việc cho chúng tôi. Một trong những tiện ích mở rộng này là plugin Javascript Async & Defer, với plugin này bạn có thể chạy các tập lệnh không đồng bộ hoặc trì hoãn việc khởi chạy chúng, nhưng miễn là điều này không gây hại cho hoạt động của trang web.

Đầu tiên bạn cần tải plugin Javascript Async & Defer rồi cài đặt. Nhưng chỉ cài đặt thôi là chưa đủ, cái chính là phải cấu hình đúng phần mở rộng này. Bây giờ tôi sẽ cố gắng giải thích cách thực hiện việc này.

Sau khi cài đặt plugin, bạn có thể bắt đầu định cấu hình plugin vì nó sẽ không thể tự cấu hình. Để thực hiện việc này, trong bảng điều khiển, hãy truy cập trang “Trình quản lý plugin: Plugin” (Tiện ích mở rộng -> Plugin). Chúng tôi vừa tìm thấy tiện ích mở rộng đã cài đặtở dạng plugin “Javascript Async and Defer” (đối với điều này, tốt hơn là sử dụng tìm kiếm hoặc bộ lọc theo ID):

Như bạn có thể thấy, plugin này bị tắt theo mặc định, nhưng như tôi đã nói, một plugin được bật cho vận hành chính xác sẽ không đủ. Hãy mở plugin chỉnh sửa và xem những gì chúng tôi có. Và chúng tôi có không ít hơn một tab “Plugin” với một vài cài đặt:

Trong cài đặt plugin, chúng tôi thấy thông báo từ nhà phát triển cho chúng tôi biết rằng plugin này sẽ thêm thẻ bắt đầu không đồng bộ hoặc bị trì hoãn vào các tập lệnh được chỉ định. Nhưng cũng có một cảnh báo rằng việc thiết lập plugin này tốt nhất nên được thực hiện bởi các chuyên gia và thận trọng, nếu không có thể xảy ra lỗi trong hoạt động của trang web.

Trước tiên, hãy tìm hiểu những gì và cách cấu hình ở đây, cách tìm ra tập lệnh nào được khởi chạy và cách đăng ký chúng. Trước tiên, hãy xem bản chất của từng cài đặt:

- công tắc này giúp tải tập lệnh ở chế độ không đồng bộ.- lười tải các tập lệnh được chỉ định

Các tập lệnh cần sửa đổi - trong trường văn bản này, bạn phải nhập đường dẫn tương đối đến các tập lệnh mà chúng tôi sẽ xử lý.

Gỡ lỗi - chế độ gỡ lỗi, hữu ích để xác định các tập lệnh được khởi chạy trước khi tải nội dung.

Điều đầu tiên chúng ta cần tìm hiểu là tập lệnh nào được khởi chạy khi một trang cụ thể được tải; để làm được điều này, chúng ta cần sử dụng chế độ gỡ lỗi “Gỡ lỗi”. Ở chế độ này trên trang web trong khu vực tin nhắn hệ thống(thông báo) danh sách các tập lệnh được tải cùng với trang sẽ được hiển thị.

Nhưng thành thật mà nói, không phải mọi thứ đều đơn giản như vậy, chính danh sách này sẽ chỉ được hiển thị nếu bạn chỉ định ít nhất một tập lệnh cần sửa đổi trong trường Tập lệnh cần sửa đổi. Nhưng nếu bạn không biết nên chỉ ra tập lệnh nào ở đó thì sao? Không sao, để bắt đầu, bạn có thể viết bất cứ thứ gì vào trường này, bất kỳ từ hoặc ký hiệu nào, sau đó bật chế độ gỡ lỗi, kích hoạt plugin và lưu kết quả:

Bây giờ bạn có thể truy cập trang web và xem kết quả, bạn sẽ nhận được kết quả như thế này:

Thật thú vị phải không, hóa ra cùng với trang này, 16 tập lệnh nữa được tải (đây là trong trường hợp của tôi), cả tập lệnh hệ thống và từ các tiện ích mở rộng đã cài đặt khác nhau. Và mỗi cái trong số chúng đều làm tăng thời gian tải trang, điều này không tốt.

Tùy chọn đơn giản nhất là sao chép tất cả các tập lệnh mà plugin cung cấp cho chúng tôi và thêm chúng vào trường “Tập lệnh cần sửa đổi” để sửa đổi. Sau đó chọn chế độ tải (không đồng bộ, trễ hoặc cả hai), lưu các thay đổi và kiểm tra kết quả.

Nhưng trong trường hợp này, bạn chắc chắn sẽ nhận thấy một số lỗi trên trang web, chẳng hạn như cửa sổ bật lên hoạt động không chính xác, v.v. Điều này là do trang được tải trước khi một số tập lệnh nhất định được thực thi và do đó các chức năng mà chúng chịu trách nhiệm sẽ không hoạt động.

Điều chính ở đây là đừng hoảng sợ, hãy nghiên cứu kỹ danh sách các tập lệnh để hiểu mỗi tập lệnh chịu trách nhiệm gì và chỉ sửa đổi những tập lệnh không vi phạm chức năng của trang web và tôi đảm bảo với bạn rằng có khá nhiều tập lệnh trong số đó trong Joomla

Nếu cách tiếp cận này không phù hợp với bạn vì tất cả các tập lệnh đều quan trọng đối với bạn và cũng như nếu máy chủ của bạn không hỗ trợ giao thức HTTP/2.0, thì tôi khuyên bạn nên thực hiện một lộ trình khác - kết hợp tất cả các tập lệnh thành một. Trong trường hợp này, trình duyệt sẽ cần ít phiên hơn để tải trang đích, và kết quả là có ít thời gian hơn.

Tốc độ tải các trang trên trang web của bạn rất tham số quan trọng không chỉ cho du khách mà còn cho công cụ tìm kiếm. Bằng tốc độ tải, công cụ tìm kiếm có thể đánh giá chất lượng của một trang web. Việc thực hiện các khuyến nghị được thảo luận trong bài viết có thể thực hiện được cả ở giai đoạn tạo trang web và trong quá trình bảo trì thêm. Hỗ trợ kỹ thuật cho một trang web sau khi phát triển là một nhiệm vụ phải được thực hiện nghiêm túc và không được lơ là. Hãy xem các đề xuất từ Google được thiết kế để tối ưu hóa (giảm) tốc độ tải trang web của bạn.

Vậy hãy bắt đầu:

Thông thường, mã HTML hoặc CSS của bạn có thể yêu cầu một số loại hình ảnh hoặc tệp. Nếu đối tượng được yêu cầu không được tìm thấy hoặc không tồn tại, tốc độ của trang web sẽ chậm lại đáng kể và tải trên máy chủ tăng lên, dẫn đến một số lượng lớn các yêu cầu không chính xác đối với một đối tượng không tồn tại. Và còn nhiều yêu cầu như vậy hơn bạn có thể tưởng tượng.

Việc sửa các truy vấn sai dễ dàng hơn nhiều so với việc tìm ra chúng. Nếu bạn tìm thấy bất kỳ yêu cầu nào không chính xác, bạn chỉ cần xóa mã không cần thiết khỏi tệp HTML hoặc CSS hoặc điều chỉnh nó.

Điều cực kỳ quan trọng là phải theo dõi tốc độ tải trang và theo dõi các cuộc gọi đến các tài nguyên không tồn tại!

Việc sử dụng các phương thức trong file CSS như @import có thể làm chậm tốc độ tải style nói riêng và trang nói chung. Khó khăn lớn nhất nằm ở việc tải các kiểu tuần tự (lần lượt) thay vì sử dụng khả năng tải chúng song song (đồng thời). Điều này thêm bước bổ sung trong quá trình tải trang web.

Xem lại tất cả các tệp của bạn để biết chỉ thị nhập. Chúng có thể trông như thế này:

@import url("style.css")

Chúng cần được thay thế bằng kết nối trực tiếp phong cách trong mã HTML:

Mỗi tệp CSS mà một trang trên trang web của bạn sử dụng sẽ làm tăng thêm thời gian và làm chậm tốc độ tải của trang (kết nối → tải, kết nối → tải, v.v.). Đôi khi việc sử dụng nhiều tệp kiểu là không thể tránh khỏi (ví dụ: khi làm việc với thiết kế trang web bằng cách sử dụng nhiều tệp sẽ dễ dàng và thuận tiện hơn), nhưng bất cứ khi nào có thể, cần phải kết hợp chúng thành một tệp.

Để thực hiện việc này, hãy thực hiện thao tác sao chép-dán đơn giản từ nhiều tệp thành một! Một tệp CSS sẽ chứa số lượng chính xác như nhau thông tin hữu ích cho trang web nhưng sẽ tăng tốc độ tải!

Sau khi hợp nhất các tệp, đừng quên xóa các kết nối không cần thiết của các tệp cũ trong mã HTML của các trang.

Tránh chức năng "document.write" trong HTML

Để xuất nội dung nào đó trên một trang thông qua JavaScript hoặc để kết nối với tài nguyên bên ngoài, bạn có thể sử dụng hàm document.write, tuy nhiên bạn cần lưu ý rằng nếu bạn sử dụng nó từ mã HTML để thực thi nó, trình duyệt Internet sẽ thực hiện các thao tác tải-đọc không cần thiết - các bản ghi ảnh hưởng tiêu cực đến tốc độ tải trang web.

Kiểm tra tất cả HTML của bạn để tìm các lệnh document.write, chúng có thể trông giống như sau:

document.write("");

Thay vào đó, chỉ cần kết nối một tập lệnh bên ngoài bằng cách sử dụng lệnh gọi này trong mã HTML của trang:

Các tệp JavaScript rất thường được sử dụng bằng cách kết nối số lượng lớn các kịch bản bên ngoài.

Bằng cách tương tự với việc hợp nhất các tệp CSS, bạn cần kết hợp các tệp JS thành một (nếu có thể). Chất lượng của các chức năng được chỉ định trong chúng sẽ không bị ảnh hưởng bởi điều này nhưng sẽ có tác động tích cực đến tốc độ tải trang web.

Các biện pháp bổ sung bao gồm đưa các tập lệnh nhỏ vào nội dung trang và tải các tập lệnh một cách lười biếng.

Mỗi trang web sử dụng một số lượng lớn các hình ảnh khác nhau. Và để hiển thị từng cái trong số chúng, trình duyệt web sẽ gửi một yêu cầu, để đáp lại máy chủ “cung cấp” hình ảnh tương ứng.

Số lượng cuộc gọi đến máy chủ và theo đó, tốc độ tải trang có thể giảm bằng cách kết hợp nhiều hình ảnh thành một CSS-sprite. Thay vì tải xuống nhiều hình ảnh, trình duyệt của bạn giờ đây sẽ chỉ tải xuống một hình ảnh! Và đó là vẻ đẹp của các họa tiết CSS! Tất nhiên, điều này áp dụng nhiều hơn cho việc kết hợp một số hình ảnh nhỏ được sử dụng trong các thành phần thiết kế trang WEB (nền menu, biểu tượng cảm xúc, góc, biểu tượng, v.v.).

Trong trường hợp này, để sử dụng một phần tử riêng biệt từ CSS sprite, bạn sẽ cần gọi sprite này, sau đó chỉ định kích thước và vị trí của phần tử được yêu cầu so với kích thước tổng thể CSS sprite.

Sử dụng ví dụ hai hình ảnh (cái sừng và mặt cười) kết hợp thành một sprite, để hiển thị cái sừng chúng ta sẽ viết kiểu CSS sau:

Rupor (chiều rộng:50px; chiều cao:50px; nền:url(hình ảnh/sprite.png) 0 0px;)

Đối với mặt cười, phong cách sẽ như thế này:

Nụ cười (width:50px; high:50px; nền:url(images/sprite.png) 0 –50px;)

Các đoạn mã HTML tương ứng sẽ như thế này:

Đối với sừng:

Và đối với người cười:

Trì hoãn tải JavaScript trong khi trang web đang được truy cập là một trong những vấn đề quan trọng và đầy thách thức nhất. Việc tải từng phần các tập lệnh bên ngoài, như bạn có thể đoán, sẽ cho phép trang của trang tải nhanh hơn nhiều so với tải trang tuần tự, từng dòng một mã nguồn. Một số người có thể nói rằng chỉ cần đặt tập lệnh gọi ở cuối trang sẽ giải quyết được vấn đề. Nhưng thực tế thì không phải vậy.

Chỉ giải pháp được chỉ ra bên dưới CHỈ cho phép tải tập lệnh bên ngoài sau khi trang đã được tải đầy đủ và sẽ không gây ra cảnh báo “Trì hoãn tải javascript” trong Công cụ quản trị trang web của Google. Đây là phương pháp được Google khuyên dùng:

hàm tải vềJSAtOnload() (
var element = document.createElement("script");
element.src = "script.js";
document.body.appendChild(element);
}
nếu (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
khác nếu (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
khác window.onload = downloadJSAtOnload;
Bổ sung). Chúng tôi tìm thấy tiện ích mở rộng mới được cài đặt ở dạng plugin “Javascript Async and Defer”.

Như bạn có thể thấy, plugin này bị tắt theo mặc định, nhưng như tôi đã nói, chỉ kích hoạt nó sẽ không đủ để nó hoạt động bình thường. Hãy mở plugin chỉnh sửa và xem những gì chúng tôi có. Và chúng tôi có không ít hơn một tab “Plugin” với một vài cài đặt.

Trong cài đặt plugin, chúng tôi thấy thông báo từ nhà phát triển cho chúng tôi biết rằng plugin này sẽ thêm thẻ khởi chạy không đồng bộ hoặc bị trì hoãn vào các tập lệnh được chỉ định. Nhưng cũng có một cảnh báo rằng việc thiết lập plugin này tốt nhất nên được thực hiện bởi các chuyên gia và thận trọng, nếu không có thể xảy ra lỗi trong hoạt động của trang web.

– công tắc này cho phép tải tập lệnh ở chế độ không đồng bộ.– lười tải các tập lệnh được chỉ định

Các tập lệnh cần sửa đổi – trong trường văn bản này, bạn phải nhập đường dẫn tương đối đến các tập lệnh mà chúng tôi sẽ xử lý.

Gỡ lỗi - chế độ gỡ lỗi, hữu ích để xác định các tập lệnh được chạy trước khi tải nội dung.

Điều đầu tiên chúng ta cần tìm hiểu là tập lệnh nào được khởi chạy khi một trang cụ thể được tải; để làm được điều này, chúng ta cần sử dụng chế độ gỡ lỗi “Gỡ lỗi”. Ở chế độ này, danh sách các tập lệnh được tải cùng với trang sẽ được hiển thị trên trang web trong khu vực thông báo (thông báo) hệ thống.

Nhưng thành thật mà nói, không phải mọi thứ đều đơn giản như vậy, chính danh sách này sẽ chỉ được hiển thị nếu bạn chỉ định ít nhất một tập lệnh cần sửa đổi trong trường Tập lệnh cần sửa đổi. Nhưng nếu bạn không biết nên chỉ ra tập lệnh nào ở đó thì sao? Không sao, đối với người mới bắt đầu, bạn có thể viết bất cứ thứ gì vào trường này, bất kỳ từ hoặc ký hiệu nào, sau đó bật chế độ gỡ lỗi, kích hoạt plugin và lưu kết quả.

Bây giờ bạn có thể vào trang web và xem kết quả.

Điều chính ở đây là đừng hoảng sợ, hãy nghiên cứu kỹ danh sách các tập lệnh để hiểu mỗi tập lệnh chịu trách nhiệm gì và chỉ sửa đổi những tập lệnh không vi phạm chức năng của trang web.