Що таке "вміст, що знаходиться вгорі", в Google Pagespeed?

Донедавна мій сайт (www.heatexchangers.ca) набрав 98% швидкості сторінки Google. Я не міг нічого зробити, наприклад, рядок запитів із веб-шрифтів. Я був дуже задоволений цим, оскільки це представляло все, що я міг зробити.

Нещодавно Google додав щось інше, що впливає на показник швидкості сторінки, і тепер я отримую лише 89% на швидкості сторінки та отримую цю пропозицію:

• Усуньте зовнішнє JavaScript, що блокує JavaScript та CSS, у верхньому вмісті.

Пропозиція виправити це, мабуть, передбачає тролінг всіх моїх .css та .js файлів та розділення деяких частин з них та додавання їх в моє HTML. Це викликає у мене певну плутанину, оскільки я мав враження, що ми повинні уникати якомога більше JS та CSS від HTML.

Що саме є вмістом "Над складкою"? Якщо це кілька стилів, таких як шрифт, колір тла тощо; то я можу бачити, що це може бути не надто великою угодою, щоб включити вбудований. Я не зміг знайти перелік того, що це саме.

Це тому, що Google нещодавно змінив інструмент швидкості сторінки, щоб краще відображати все більш мобільну мережу. Мобільні мережі передачі даних відрізняються характеристиками продуктивності, ніж дротові або Wi-Fi, тому для оптимізації їх потрібно робити різні дії.

Нагорі (ATF) - це просто вартість першого екрана - все, що вам не потрібно прокручувати, щоб побачити. Очевидно, що це залежить від пристрою та його орієнтації, тому вам може знадобитися узагальнити і, можливо, знайти якісь загальнодоступні загальні варіанти, можливо, один орієнтований на смартфони, один на планшети та один на більші настільні комп'ютери.

Що стосується CSS, про який вони говорять, вони дійсно мають намір усі CSS, необхідні для повного стилю будь-якого вмісту, що відображається ATF. Щоб визначити час завантаження вмісту ATF, вони зроблять знімок екрана остаточної версії та порівняють його візуально зі сторінкою під час завантаження, і коли вона буде схожа, вони вважатимуть точку, де вміст ATF. завантажується.

Це відео-презентація від Google на цю тему:

http://www.youtube.com/watch?v=YV1nKLWoARQ

Акцент робиться на тому, щоб користувачі що-небудь робити протягом першої секунди. Міркування про введення CSS для вмісту ATF безпосередньо в HTML відображає їх дослідження щодо ефективності мобільних даних, показуючи, що якщо CSS не буде, він не завантажується досить швидко, щоб бути протягом першої секунди.

Вони також надають посилання на інструменти, які можуть бути в змозі автоматизувати щось із цього. Я не пробував їх і YMMV.

Інформація про сторінку google чітко покаже вам, скільки% css, що посилається на вміст, що знаходиться над складовою, завантажується надто пізно, і сторінка могла бути надана раніше. Чим би ви могли перемістити частини css для досягнення зеленого результату. я можу це зробити для вас: goo.gl/GsRxNc

посилання від Google, що описує https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery, описавши Google

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

джерело - https://www.c2experience.com/blog/passing-googles-abovethefold-css#:~:text=Above%2Dthe%2Dfold%20content%20is,first%20to%20be%20loaded%20first .

Вони посилаються на блокування візуалізації, таких як аналітика або код відстеження, і тому вони пропонують розмістити ці «сценарії мене до всього іншого» у нижньому колонтитулі, оскільки вони будуть завантажені, коли користувач з’явиться на екрані сайту.