Loại bỏ JavaScript và CSS chặn kết xuất trong nội dung trong màn hình đầu tiên

Tôi đang xây dựng một trang web Drupal 7. Đây là một số mô-đun tôi sử dụng: Adaptivetheme (chủ đề), Khung nhìn và khung nội dung, Bảng điều khiển, Bảng nhỏ, Bảng ở mọi nơi, Trình quản lý trang, Superfish cho menu, Addthis, Chosen (thả xuống).

Để cải thiện hiệu suất trang web của tôi và xử lý các tệp CSS và JS tôi đang sử dụng mô-đun Advagg .

Khi chạy thử nghiệm Pagespeed của Google, tôi gặp phải lỗi sau là "Nên sửa":

Loại bỏ JavaScript và CSS chặn kết xuất trong
nội dung trong màn hình đầu tiên Trang của bạn có 6 tài nguyên tập lệnh chặn và 8 tài nguyên CSS chặn. Điều này gây ra sự chậm trễ trong việc hiển thị trang của bạn.
Không có nội dung nào trong màn hình đầu tiên trên trang của bạn có thể được hiển thị mà không cần chờ các tài nguyên sau tải. Cố gắng trì hoãn hoặc tải không đồng bộ các tài nguyên chặn hoặc đặt nội tuyến các phần quan trọng của các tài nguyên đó trực tiếp trong HTML.

Đây là thông tin Google cung cấp:

• Xóa JavaScript chặn kết xuất
• Tối ưu hóa phân phối CSS

Có cách nào để tôi có thể thay đổi cài đặt của mô-đun Advagg hoặc lõi Drupal và giải quyết vấn đề này không?

Có cách nào khác để đạt được mục tiêu này?

Cập nhật - sau khi thực hiện các thay đổi theo câu trả lời của mikeytown2, tôi nhận được thông báo sau trong bài kiểm tra Pagespeed của Google:

Loại bỏ JavaScript và CSS chặn kết xuất trong nội dung trong màn hình đầu tiên
Trang của bạn có 6 tài nguyên tập lệnh chặn và 4 tài nguyên CSS chặn. Điều này gây ra sự chậm trễ trong việc hiển thị trang của bạn.
Không có nội dung nào trong màn hình đầu tiên trên trang của bạn có thể được hiển thị mà không cần chờ các tài nguyên sau tải. Cố gắng trì hoãn hoặc tải không đồng bộ các tài nguyên chặn hoặc đặt nội tuyến các phần quan trọng của các tài nguyên đó trực tiếp trong HTML.

Các README có hướng dẫn về cách để làm điều này bằng hiện 7.x-2,31 + phiên bản của AdvAgg . Cũng xem trang wiki này trên nhóm hiệu suất cao . Hầu hết các trang web có thể đạt được số điểm 100/100 hoàn hảo trên https://developers.google.com/speed/pagespeed/insights/ . Hướng dẫn cách đạt được nó để cài đặt AdvAgg mới bên dưới.

Hãy chắc chắn kiểm tra trang web sau mỗi phần để đảm bảo thay đổi không làm rối trang web của bạn. Những thay đổi trong AdvAgg Modifier thường là vấn đề nhất nhưng chúng mang lại những cải tiến lớn nhất.

Đi đến admin/config/development/performance/advagg

• Chọn "Sử dụng cài đặt được đề xuất (tối ưu hóa)"

Cài đặt AdvAgg Nén Javascript nếu không được bật và đi đến admin/config/development/performance/advagg/js-compress

• Chọn JSMin nếu có sẵn; mặt khác, chọn JSMin +
• Chọn Dải mọi thứ (tệp nhỏ nhất)
• Nhấp vào liên kết nén hàng loạt để xử lý các tệp này

Cài đặt Trình tải phông AdvAgg Async nếu không được bật và đi đến admin/config/development/performance/advagg/font

• Chọn tệp cục bộ có trong tổng hợp (phiên bản: XXX). Nếu tùy chọn này không khả dụng, hãy làm theo các hướng dẫn ngay bên dưới các tùy chọn về cách cài đặt nó.
• Kiểm tra "Sử dụng localStorage để đèn flash của văn bản chưa được chỉnh sửa (FOUT) chỉ xảy ra một lần."
• Kiểm tra "Đặt cookie để đèn flash của văn bản chưa được chỉnh sửa (FOUT) chỉ xảy ra một lần."

Cài đặt AdvAgg Bundler nếu không được bật và đi đến admin/config/development/performance/advagg/bundler

Cài đặt HTTP / 2.0

• Trong "Số mục tiêu của gói CSS trên mỗi trang", chọn 25
• Trong "Số mục tiêu của gói JS trên mỗi trang", chọn 25
• Trong "Nhóm logic", chọn "Kích thước tệp"

Cài đặt HTTP / 1.1 (mặc định)

• Trong "Số mục tiêu của gói CSS trên mỗi trang", chọn 2
• Trong "Số mục tiêu của gói JS trên mỗi trang", chọn 5
• Trong "Nhóm logic", chọn "Kích thước tệp"

25 gói so với 2 và 5 phải thực hiện với bộ nhớ đệm trình duyệt. Nhiều tệp tương đương với cơ hội tốt hơn cho trình duyệt có bộ kết hợp đó trong bộ đệm, nhưng nhiều tệp hơn có nghĩa là nhiều kết nối được thiết lập và mở hơn trong HTTP 1.1. Sử dụng 2 cho CSS vì số này không chờ đợi bất kỳ kết nối mới nào; JS là 5 vì hầu hết các trình duyệt có giới hạn kết nối đồng thời là 6. Số này cho các gói đã được chọn sau nhiều thử nghiệm. Trong HTTP 2.0 có một kết nối phát trực tuyến và hình phạt cho nhiều tệp CSS và JS gần như không tồn tại; do đó tối ưu hóa cho bộ đệm của trình duyệt là sự lựa chọn tốt nhất; do đó 25 nên được sử dụng cho CSS và JS khi phục vụ HTTP / 2.0.

Cài đặt AdvAgg Relocate nếu không được bật và đi đến admin/config/development/performance/advagg/relocate

• Chọn "Sử dụng cài đặt được đề xuất (tối ưu hóa)"

Cài đặt AdvAgg Modifier nếu không được bật và đi đến admin/config/development/performance/advagg/mod

• Chọn "Sử dụng cài đặt được đề xuất (tối ưu hóa)"

Truy cập https://www.sitelocity.com/critical-path-css-generator và nhập càng nhiều trang đích càng cần thiết cho css quan trọng; top 10 thường là một khởi đầu tốt. Nếu bạn có Google Analytics, điều này sẽ chỉ cho bạn cách tìm các trang đích hàng đầu của bạn https://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages hoặc cho Piwik https: //piwik.org/faq/how-to/faq_160/ . Nếu bạn không biết bắt đầu trang nào với trang chủ của trang web của bạn. Bạn cũng có thể cho chúng tôi điều này để tạo css https://chrom.google.com.vn/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkIGHob?hl=vi

Tên tệp và đường dẫn bên dưới là dành cho chủ đề "bootstrap"; tất cả đều bắt đầu bằng sites/all/themes/bootstrap/critical-css/; trong chủ đề của bạn tạo critical-css/thư mục. Thư mục tiếp theo dựa trên người dùng; anonymous/, all/hoặc authenticated/có thể được sử dụng.

Thư mục tiếp theo có thể urls/hoặc type/. Nhìn vào urls/; phía trước là trường hợp đặc biệt cho trang trước, tất cả các đường dẫn khác sử dụng current_path () làm thư mục và tên tệp .cssđược thêm vào cuối; Xem https://api.drupal.org/api/drupal/includes%21path.inc/feft/civerse_path/7.x

Nhìn vào type/đây là một trường hợp đặc biệt cho các loại nút. Sử dụng tên máy và thêm .cssvào cuối. Bất kỳ nút nào thuộc loại này sau đó sẽ có tệp css quan trọng này được áp dụng và nội tuyến. Dưới đây là một số ví dụ cho thấy cách thức này hoạt động.

vị trí tệp ví dụ hợp lệ cho trang "phía trước": sites/all/themes/bootstrap/critical-css/anonymous/urls/front.css

vị trí tệp ví dụ hợp lệ cho trang "node / 1" current_path (): sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css

vị trí tệp ví dụ hợp lệ cho loại nút của "trang": sites/all/themes/bootstrap/critical-css/anonymous/type/page.css

Nếu bạn muốn một số cách tự động để tạo các tệp css này, bốnk bếp có một bài viết tuyệt vời về cách thiết lập: https ://fourword.fourk Kitchen.com/article/use-grunt-and-advagg-inline-critical-css -drupal-7-chủ đề

Bạn sẽ không bao giờ đạt được điểm số cao thực sự với các mô-đun drupal dựng sẵn, cách duy nhất để đạt được điều này là tham dự và phân tích cẩn thận từng đề xuất của công cụ tốc độ google , giải quyết từng vấn đề một cách độc lập.

Một số điều tôi đã làm để đạt được 95 trong một trang web rất tích cực , rằng vào thời điểm tôi viết bài này, đã ghi điểm tốt hơn so với nytimes (Bây giờ thì không):

• [chặn tập lệnh] Trì hoãn thực thi tập lệnh của bên thứ ba như sharethis, tiện ích facebook, google plus, v.v., để chỉ chạy sau khi trang được hiển thị đầy đủ. Điều này đòi hỏi một số thay thế chuỗi đơn giản trên đầu ra của html.tpl.php để bắt các tập lệnh đó và xếp hàng chúng để thực hiện sau này.
• [chặn tập lệnh] Lưu trữ biến $ scripts của html.tpl.php (với json_encode) trong biến javascript để xếp hàng chúng để chạy sau khi tải trang đầu tiên. Điều này là không tự nhiên, nhưng cần thiết. Một số vấn đề cụ thể của trình duyệt đã được sắp xếp.
• [chặn css] Đã triển khai một cái gì đó tương tự như kỹ thuật của Keith Clark , nhưng với rel = "prefetch". Điều này giới thiệu sự cần thiết phải giải quyết FOUC .
• [Thu nhỏ và nén] Bên ngoài nén và thu nhỏ đến một máy chủ phân phối nơi tôi có thể sử dụng hình ảnh, máy nén yui, pngoptim và nhiều thứ khác để vượt qua các quy tắc đó, mà không biến cài đặt drupal thành một mớ hỗn độn không thể quản lý được.