Я використовую статистику Google PageSpeed, щоб спробувати покращити ефективність свого сайту, і до цього часу він виявився надзвичайно успішним. Такі речі, як сценарії для відстрочки сценаріїв, спрацювали прекрасно, оскільки у мене вже була внутрішня версія jQuery .ready()для відстрочки сценаріїв до повного завантаження сторінки, все, що мені потрібно було зробити, - вбудувати цю конкретну функцію та перемістити повні сценарії до кінця сторінки. Це працювало чудово.

Але тепер я опиняюся на тій, що залишилася жовтою крапкою у контрольному списку: "Усуньте блокувальну візуалізацію CSS у вмісті, що знаходиться вгорі".

Налаштування мого CSS полягає в тому, щоб мати один глобальний _.cssфайл, що містить стилі, які загалом застосовуються до структури сторінки або використовуються в більш ніж одному або двох місцях на сайті. Тоді на більшості сторінок є асоційований файл CSS (наприклад, party.phpмає party.css), що містить стилі, характерні саме для цієї сторінки. Усі файли CSS зберігаються в кешованому режимі на невизначений термін, оскільки я додаю /t=FILEMTIMEдо файлів файлів (а пізніше видаляю їх .htaccess), щоб гарантувати оновлення файлів при їх зміні.

Тому в будь-якому випадку Google рекомендує вкладати критичні стилі, необхідні для вмісту, що знаходиться вгорі. Проблема - це ... добре, подивіться на цей знімок екрана: http://prntscr.com/1qt49e

Як бачите ... ВСЕ вміст є вгорі! Люди ненавидять прокручування, особливо в грі, яка передбачає завантаження багатьох сторінок. Тому я спроектував сайт, щоб він міг розміститися на одному екрані (маючи на увазі досить хорошу роздільну здатність). Отже, це означає ... ВСІ зі стилів застосовуються до вмісту, що знаходиться у верхній частині сторінки! Отже ... чи є рішення? Або я застряг із цим жовтим відміткою на інакше майже ідеальній оцінці?

Раніше було задано відповідне питання: Що таке "вміст, що знаходиться вгорі", в Google Pagespeed?

По-перше, ви повинні помітити, що це все про " мобільні сторінки ".
Тож коли я правильно інтерпретував ваше запитання та скріншот, це не для вашого сайту!

Навпаки - виконання деяких речей, рекомендованих Google у своїх рекомендаціях, буде гірше, ніж краще для 'звичайних' веб-сайтів.
І не все, що надходить від Google, - це «святий грааль» лише тому, що він походить від Google. І вони самі не є хорошим прикладом для наслідування, якщо ви подивитеся на їх розмітку HTML.

Найкраща порада, яку я міг би дати вам:

• Встановіть ширину та висоту на замінені елементи у вашій CSS, щоб браузер міг розташувати елементи та не потрібно чекати заміненого вмісту!

Крім того, чому ви використовуєте різні файли CSS, а не один?
Додатковий запит гірший, ніж невеликий обсяг даних. І після першого запиту файл CSS все одно кешується.

Те, про що слід завжди дбати, це:

• максимально зменшити кількість запитів
• збережіть загальну вагу сторінки якомога меншою

І не ламайте голову про те, як отримати 100% інструменту PageSpeed ​​Insights від Google ...! ;-)

Додаток 1: Ось сторінка, на якій Google показує нам, що вони рекомендують для оптимізації доставки CSS .

Як було сказано раніше, я не вважаю, що це не є реалістичним і не має сенсу для "нормального" веб-сайту! Тому що в основному, коли ви маєте чуйний веб-дизайн , найпевніше, що ви використовуєте медіа-запити та інші стилі компонування. Тож якщо ви не збираєтесь спочатку завантажувати свій CSS, то ви блокуєте FOUT ( Flash Of Unstyled Text ). Я справді не вірю, що це "краще", ніж хоча б ще кілька мілісекунд, щоб візуалізувати сторінку!

Imho Google починає новий "ажіотаж" (коли я переглядаю все питання про це тут, на Stackoverflow) ...!

Як я отримав 99/100 на швидкості сторінки Google (для мобільних пристроїв)

TLDR: Стискайте та вставляйте весь скрипт css між вашими <style></style>тегами.

Я вже близько тижня переслідую цей невловимий 100/100 бал. Як і ви, останнім пунктом, що залишився, було видалення "css-блокування css для вмісту, що знаходиться вище складок".

Звичайно, це легко вирішити ?? Ні. Я випробував рішення loadCSS групи Filament . Занадто багато .js для мого вподобання.

А як щодо asyncатрибутів для css (наприклад, js)? Їх не існує.

Я був готовий здатися. Тоді на мене світало. Якщо посилання на сценарій блокувала візуалізацію, що робити, якщо я замість цього вклав увесь css у голову. Таким чином нічого не можна було перекрити.

Здавалося, абсолютно НЕ ПРАВИЛЬНО вставляти 1263 рядки CSS у мій тег стилю. Але я дав йому кружляння. Я стиснув його (і встановив попередньо) попередньо, використовуючи:

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ Дивіться пакунок Postcss NPM .

Тепер це був лише один LONG рядок css, що не має місця. Я розбив css <style>your;great-wall-of-china-long;css;here</style>тегами на своїй домашній сторінці. Потім я повторно проаналізував статистику швидкості сторінки.

Я їхав з 90/100 до 99/100 на мобільному !!!

Це суперечить усьому в мені (і, мабуть, ви). Але це вирішило проблему. Я просто зараз використовую його на своїй домашній сторінці, включаючи стислий css програмно через PHP, включають.

YMMV (ваш пробіг може змінюватись) в залежності від довжини вашого css. Google може завищити вас за занадто багато вмісту, що знаходиться над складкою. Але не припускайте; тест!

Примітки

1. Я зараз це роблю лише на своїй домашній сторінці, щоб люди отримували швидку візуалізацію на моїй найважливішій сторінці.

2. Ваш css не буде кешований. Я не надто переживаю, хоча. Другий вони потрапили на іншу сторінку на моєму сайті, то .css буде кешуватися (див примітку 1).

Кілька порад, які можуть допомогти:

• Я вчора зіткнувся з цією статтею щодо оптимізації CSS: Профілювання CSS для ... оптимізації
  Багато корисної інформації про CSS та те, що CSS викликає найбільше зниження продуктивності.

• Я побачив наступну презентацію на jQueryUK про "приховані секрети" в Googe Chrome (Canary) Dev Tools: DevTools Може це зробити . Перегляньте розділи « Час до першої фарби» , перефарбовування та дорогий CSS.

• Крім того, якщо ви використовуєте завантажувач на зразок requJS, ви можете ознайомитись із одним із плагінів завантажувача CSS , який називається requ -CSS , який використовує CSSO - оптимізатор, який також здійснює структурну оптимізацію, наприклад. злиття блоків з однаковими властивостями. Я використовував його кілька разів, і це може заощадити досить багато CSS від конкретного випадку.

Без запитання: Я другий @Enzino у створенні спрайту для всіх невеликих іконок, які ви завантажуєте. Розміри файлів настільки малі, що насправді не гарантує обертання кожної піктограми. Також пам’ятайте про загальну кількість одночасних запитів http, які браузер може робити. Тож запити на більшу кількість маленьких піктограм також "блокують візуалізацію". Хоча порожня сторінка порівнюється з вашою, мені подобається, як завантажується качка, наприклад.

Погляньте на наступну сторінку https://varvy.com/pagespeed/render-blocking-css.html . Це допомогло мені позбутися "Render Blocking CSS" . Я використовував наступний код, щоб видалити " Render Blocking CSS ". Тепер, коли я не знаходжу проблеми, пов’язані з блокуванням css, вимкнення сторінки в Google.

<!-- 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>

Я теж боровся з цією новою швидкістю показника швидкості сторінки.

Хоча я не знайшов практичного способу повернути свою оцінку до% 100, але деякі речі мені здаються корисними.

Об'єднання всіх css в один файл дуже допомогло. Усі мої сайти повертаються до% 95 -% 98.

Єдине інше, про що я міг придумати, - це вкласти всі необхідні css (що, здається, більшість із них - принаймні для моїх сторінок) на першій сторінці, щоб отримати солодкий високий бал. Хоча це може допомогти вашому швидкісному оцінці, але, ймовірно, зробиться завантаження сторінки повільніше.

Оптимальне рішення 2019 року для цього - HTTP / 2 Server Push .

Вам не потрібні якісь хиткі рішення JavaScript або стилі вбудованого. Однак вам потрібен сервер, який підтримує HTTP 2.0 (будь-яка сучасна версія сервера буде), який сам вимагає, щоб ваш сервер запускав SSL. Однак, давайте шифруємо Let’s Encrypt, немає причин не використовувати SSL так чи інакше.

Мій сайт https://r.je/ має 100/100 балів як для мобільних, так і для робочих столів.

Причиною цих помилок є те, що браузер отримує HTML, після чого доводиться чекати завантаження CSS, перш ніж сторінка може бути надана. За допомогою HTTP2 ви можете одночасно надсилати і HTML, і CSS.

Можна використовувати HTTP / 2 push, встановивши заголовок Link.

Приклад Apache (.htaccess):

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

Для NGINX ви можете додати заголовок до свого тегу місцезнаходження в конфігурації сервера:

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

За допомогою цього набору заголовків браузер одночасно отримує HTML і CSS, що зупиняє CSS від блокування візуалізації.

Ви хочете налаштувати його так, що CSS надсилається лише за першим запитом, але заголовок посилання є найбільш повним і найменш хакізним рішенням "Усунути блокування візуалізації Javascript та CSS"

Для детальної дискусії дивіться тут мій пост: Усуньте блокування візуалізації CSS за допомогою HTTP / 2 Push

Подумайте про використання пакету для автоматичного генерування стилів вбудованих файлів css. Гарний варіант - критичний Grunt або Critical css для Laravel .

Привіт для jQuery Ви можете користуватися лише таким чином

Використовуйте лише async і введіть = "text / javascript"