Tôi đã sử dụng những hiểu biết của Google PageSpeed ​​để thử và cải thiện hiệu suất trang web của tôi và cho đến nay nó đã được chứng minh là cực kỳ thành công. Những thứ như trì hoãn các tập lệnh hoạt động rất hay, vì tôi đã có một phiên bản nội bộ của jQuery .ready()để trì hoãn các tập lệnh cho đến khi trang được tải đầy đủ, tất cả những gì tôi phải làm là nội tuyến cụ thể đó và chuyển toàn bộ tập lệnh đến cuối trang. Điều đó đã làm việc tuyệt vời.

Nhưng bây giờ tôi thấy mình lườm vào một chấm màu vàng còn lại trong danh sách kiểm tra: "Loại bỏ CSS chặn kết xuất trong nội dung trong màn hình đầu tiên".

Cách CSS của tôi được thiết lập là có một _.csstệp chung chứa các kiểu áp dụng cho cấu trúc trang nói chung hoặc được sử dụng ở nhiều hơn một hoặc hai nơi trên trang web. Hầu hết các trang sau đó có tệp CSS được liên kết (ví dụ: party.phpcó party.css) chứa các kiểu cụ thể cho trang cụ thể đó. Tất cả các tệp CSS được lưu trong bộ nhớ cache vô thời hạn, vì tôi nối thêm /t=FILEMTIMEtên tệp (và sau đó xóa chúng bằng .htaccess) để đảm bảo rằng các tệp được cập nhật khi chúng được thay đổi.

Vì vậy, dù sao đi nữa, Google khuyên bạn nên nội tuyến các kiểu quan trọng cần thiết cho nội dung trong màn hình đầu tiên. Rắc rối là ... tốt, hãy xem ảnh chụp màn hình này: http://prntscr.com/1qt49e

Như bạn có thể thấy ... TẤT CẢ các nội dung là trên màn hình đầu tiên! Mọi người ghét cuộn, đặc biệt là trên một trò chơi liên quan đến việc tải nhiều trang. Vì vậy, tôi đã thiết kế trang web để vừa trên một màn hình (giả sử độ phân giải đủ tốt). Vì vậy, điều đó có nghĩa là ... TẤT CẢ các phong cách áp dụng cho nội dung trong màn hình đầu tiên! Vậy ... có giải pháp nào không? Hay tôi bị mắc kẹt với dấu màu vàng trên điểm số gần như hoàn hảo?

Một câu hỏi liên quan đã được đặt ra trước đây: Cái gì là nội dung trên màn hình chính trong Google Pagespeed là gì?

Đầu tiên bạn phải chú ý rằng đây là tất cả về ' trang di động '.
Vì vậy, khi tôi giải thích chính xác câu hỏi và ảnh chụp màn hình của bạn, thì đây không phải là trang web của bạn!

Ngược lại - thực hiện một số điều được Google khuyên dùng trong hướng dẫn của họ sẽ khiến mọi thứ trở nên tồi tệ hơn là tốt hơn cho các trang web 'bình thường'.
Và không phải tất cả mọi thứ đến từ Google đều là "chén thánh" chỉ vì nó đến từ Google. Và bản thân họ không phải là một hình mẫu tốt nếu bạn nhìn vào đánh dấu HTML của họ.

Lời khuyên tốt nhất tôi có thể cung cấp cho bạn là:

• Đặt chiều rộng và chiều cao cho các thành phần được thay thế trong CSS của bạn, để trình duyệt có thể bố trí các thành phần và không phải chờ nội dung thay thế!

Ngoài ra, tại sao bạn sử dụng các tệp CSS khác nhau, thay vì chỉ một tệp?
Yêu cầu bổ sung tệ hơn khối lượng dữ liệu nhỏ. Và sau khi yêu cầu đầu tiên, tệp CSS vẫn được lưu trữ.

Những điều người ta phải luôn luôn quan tâm là:

• giảm số lượng yêu cầu càng nhiều càng tốt
• giữ trọng lượng trang tổng thể của bạn càng thấp càng tốt

Và đừng đánh đố bộ não của bạn về cách có được 100% công cụ Insights PageSpeed ​​của Google ...! ;-)

Bổ sung 1: Đây là trang mà Google chỉ cho chúng tôi, những gì họ đề xuất cho Tối ưu hóa phân phối CSS .

Như đã nói trước đây, tôi không nghĩ rằng điều này không thực tế cũng không có ý nghĩa đối với một trang web "bình thường"! Bởi vì chủ yếu là khi bạn có một thiết kế web đáp ứng, điều chắc chắn nhất là bạn sử dụng các truy vấn phương tiện và các kiểu bố cục khác. Vì vậy, nếu bạn sẽ không tải CSS của mình trước và theo cách chặn, bạn sẽ nhận được KHÔNG ( Flash Of Unstyled Text ). Tôi thực sự không tin rằng điều này "tốt" hơn ít nhất một vài phần nghìn giây để hiển thị trang!

Imho Google đang bắt đầu một "quảng cáo" mới (khi tôi xem tất cả các câu hỏi về nó ở đây trên Stackoverflow) ...!

Làm cách nào tôi có 99/100 trên Tốc độ trang của Google (dành cho thiết bị di động)

TLDR: Nén và nhúng toàn bộ tập lệnh css giữa các <style></style>thẻ của bạn .

Tôi đã theo đuổi số điểm 100/100 khó nắm bắt đó trong khoảng một tuần nay. Giống như bạn, mục còn lại cuối cùng là loại bỏ "css chặn kết xuất cho nội dung gấp."

Chắc chắn có một giải pháp dễ dàng ?? Không. Tôi đã thử giải pháp loadCSS của nhóm Filament . Quá nhiều .js cho ý thích của tôi.

Thế còn async các thuộc tính cho css (như js) thì sao? Chúng không tồn tại.

Tôi đã sẵn sàng từ bỏ. Sau đó, nó chợt nhận ra tôi. Nếu liên kết tập lệnh đã chặn kết xuất, thay vào đó tôi sẽ nhúng toàn bộ css của mình vào đầu. Theo cách đó, không có gì để chặn.

Dường như hoàn toàn SAU khi nhúng 1263 dòng CSS vào thẻ kiểu của tôi. Nhưng tôi đã cho nó một vòng xoáy. Tôi đã nén nó (và tiền tố nó) trước tiên bằng cách sử dụng:

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ Xem gói postcss NPM .

Bây giờ nó chỉ là một dòng Css không gian dài. Tôi đã đưa css vào <style>your;great-wall-of-china-long;css;here</style>thẻ trên trang chủ của mình. Sau đó, tôi phân tích lại với những hiểu biết về tốc độ trang.

Tôi đã đi từ 90/100 đến 99/100 trên di động !!!

Điều này đi ngược lại mọi thứ trong tôi (và có lẽ là bạn). Nhưng nó đã giải quyết vấn đề. Bây giờ tôi chỉ sử dụng nó trên trang chủ của mình và bao gồm cả css được lập trình thông qua PHP bao gồm.

YMMV (số dặm của bạn có thể thay đổi) đang chờ xử lý theo độ dài của css của bạn. Google có thể khiến bạn quá nhiều so với nội dung gấp. Nhưng đừng cho rằng; kiểm tra!

Ghi chú

1. Bây giờ tôi chỉ làm điều này trên trang chủ của mình để mọi người có được kết xuất NHANH CHÓNG trên trang quan trọng nhất của tôi.

2. Css của bạn sẽ không được lưu trữ. Tôi không quá lo lắng mặc dù. Lần thứ hai họ nhấn một trang khác trên trang web của tôi, .css sẽ được lưu vào bộ đệm (xem Lưu ý 1).

Một số mẹo có thể giúp:

• Tôi đã xem qua bài viết này về tối ưu hóa CSS ngày hôm qua: Cấu hình CSS để ... tối ưu hóa
  Rất nhiều thông tin hữu ích về CSS và những gì CSS gây ra nhiều hiệu suất nhất.

• Tôi đã xem bản trình bày sau đây về jQueryUK về "bí mật ẩn" trong Googe Chrome (Canary) Dev Tools: DevTools Có thể làm điều đó . Kiểm tra các phần về Time to First Paint , sơn lại và CSS tốn kém.

• Ngoài ra, nếu bạn đang sử dụng một trình tải như requestJS, bạn có thể xem một trong các plugin trình tải CSS, được gọi là request -CSS , sử dụng CSSO - một trình tối ưu hóa cũng tối ưu hóa cấu trúc, ví dụ. hợp nhất các khối với các thuộc tính giống hệt nhau. Tôi đã sử dụng nó một vài lần và nó có thể tiết kiệm khá nhiều CSS từ từng trường hợp.

Tắt câu hỏi: Tôi thứ hai @Enzino trong việc tạo một sprite cho tất cả các biểu tượng nhỏ mà bạn đang tải. Kích thước tệp quá nhỏ nên không thực sự đảm bảo làm tròn máy chủ cho mỗi biểu tượng. Ngoài ra, hãy nhớ rằng tổng số yêu cầu http đồng thời là trình duyệt có thể làm. Vì vậy, yêu cầu cho một số lượng lớn hơn các biểu tượng nhỏ cũng là "chặn kết xuất". Mặc dù một trang trống so với trang của bạn, tôi thích cách tải vịt con chẳng hạn.

Vui lòng xem trên trang sau https://varvy.com/pagespeed/render-blocking-css.html . Điều này giúp tôi thoát khỏi "Render Blocking CSS" . Tôi đã sử dụng đoạn mã sau để xóa "Kết xuất CSS chặn ". Bây giờ trong cái nhìn sâu sắc về tốc độ trang google tôi không gặp vấn đề liên quan đến kết xuất chặn css.

<!-- loadCSS -->
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/cssrelpreload.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/loadCSS.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/onloadCSS.js"></script>
<script>
      /*!
      loadCSS: load a CSS file asynchronously.
      */
      function loadCSS(href){
        var ss = window.document.createElement('link'),
            ref = window.document.getElementsByTagName('head')[0];

        ss.rel = 'stylesheet';
        ss.href = href;

        // temporarily, set media to something non-matching to ensure it'll
        // fetch without blocking render
        ss.media = 'only x';

        ref.parentNode.insertBefore(ss, ref);

        setTimeout( function(){
          // set media back to `all` so that the stylesheet applies once it loads
          ss.media = 'all';
        },0);
      }
      loadCSS('styles.css');
    </script>
    <noscript>
      <!-- Let's not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>

Tôi cũng đã đấu tranh với số liệu trang mới này.

Mặc dù tôi không tìm thấy cách nào thực tế để lấy lại số điểm của mình lên tới% 100, nhưng có một vài điều tôi thấy hữu ích.

Kết hợp tất cả css vào một tập tin đã giúp rất nhiều. Tất cả các trang web của tôi được sao lưu lên tới% 95 -% 98.

Điều khác duy nhất tôi có thể nghĩ đến là nội tuyến tất cả các css cần thiết (dường như là hầu hết trong số đó - ít nhất là cho các trang của tôi) trên trang đầu tiên để có được điểm số cao ngọt ngào. Mặc dù nó có thể giúp điểm số tốc độ của bạn nhưng điều này có thể sẽ làm cho trang của bạn tải chậm hơn.

Giải pháp tối ưu năm 2019 cho việc này là HTTP / 2 Server Push .

Bạn không cần bất kỳ giải pháp javascript hay kiểu nội tuyến nào. Tuy nhiên, bạn cần một máy chủ hỗ trợ HTTP 2.0 (mọi phiên bản máy chủ hiện đại sẽ), chính nó yêu cầu máy chủ của bạn chạy SSL. Tuy nhiên, với Let Encrypt, không có lý do gì để không sử dụng SSL.

Trang web của tôi https://r.je/ có điểm 100/100 cho cả thiết bị di động và máy tính để bàn.

Lý do cho những lỗi này là trình duyệt lấy HTML, sau đó phải đợi CSS được tải xuống trước khi trang có thể được hiển thị. Sử dụng HTTP2, bạn có thể gửi cả HTML và CSS cùng một lúc.

Bạn có thể sử dụng đẩy HTTP / 2 bằng cách đặt tiêu đề Liên kết.

Ví dụ về Apache (.htaccess):

Header add Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload"

Đối với NGINX, bạn có thể thêm tiêu đề vào thẻ vị trí của mình trong cấu hình máy chủ:

location = / {
    add_header Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload";
}

Với bộ tiêu đề này, trình duyệt nhận được HTML và CSS cùng lúc, ngăn CSS chặn kết xuất.

Bạn sẽ muốn điều chỉnh nó để CSS chỉ được gửi trong yêu cầu đầu tiên, nhưng tiêu đề Liên kết là giải pháp hoàn chỉnh nhất và ít bị hack nhất để "Loại bỏ kết xuất chặn chặn Javascript và CSS"

Để thảo luận chi tiết, hãy xem bài đăng của tôi ở đây: Loại bỏ kết xuất CSS chặn bằng cách sử dụng HTTP / 2 Push

Cân nhắc sử dụng gói để tự động tạo kiểu nội tuyến từ tệp css của bạn. Một cái tốt là Grunt Critical hoặc Critical css cho Laravel .

Xin chào đối với jQuery Bạn chỉ có thể sử dụng như thế này

Chỉ sử dụng async và gõ = "text / javascript"