PageSpeed ​​Insights и как можете цялостно да оптимизирате скоростта на зареждане на вашия сайт

Скоростта и производителността на вашия уебсайт имат голямо влияние върху бизнеса. Той може да подобри вашето класиране при търсене и SEO, да увеличи ангажираността на уебсайта и да стимулира повече реализации – и приходи.

Но преди да оптимизирате скоростта на уебсайта си, трябва да знаете как работи той.

Този безплатен инструмент от Google ви помага да разберете ефективността на уебсайта.

В крайна сметка какво означават всички тези различни термини и оценки? Как да знаете какво да правите или откъде да започнете?

Това ръководство е съсредоточено върху това какво да правите с резултатите от вашия отчет PageSpeed ​​Insights и как стратегически да работите чрез конкретни решения за подобряване на всеки от вашите резултати, без значение какви проблеми трябва да бъдат решени!

Днес ще разгледаме всеки от ключовите фактори и ще покажем стратегии за подобряване на ефективността ви с всеки от тях.

Какво е Google PageSpeed ​​Insights?

PageSpeed ​​Insights е инструмент, който тества, измерва и отчита ефективността на вашия уебсайт. Той улавя жизненоважни данни за начина, по който потребителите се ангажират с вашия сайт, като анализира неща като скорост на сайта, време за зареждане и потребителско изживяване.

В допълнение към оценяването на уебсайта ви по стабилни ключови показатели за ефективност, PageSpeed ​​Insights провежда набор от диагностики и също така препоръчва конкретни стъпки за действие, които да ви помогнат да подобрите ефективността на уебсайта си.

PageSpeed ​​Insights се захранва от машината за анализ на Google с отворен код, Lighthouse .

Това, което прави PageSpeed ​​Insights особено важно за уеб администраторите и собственици на онлйан бизнеси, е, че ефективността на сайта е тясно свързана с потребителското изживяване (UX), SEO, трафика, реализациите и всички други KPI, които са най-важни за бизнеса.

Ефективност на уебсайта

Ефективността на уебсайта се отнася до скоростта и времето на работа на сайта. По-добре работещият сайт има по-бързо време за зареждане, работи по-гладко и има малко или никакво прекъсване.Получаването на 100% от PageSpeed ​​Insights е нещо като постигане на SAT.

Скорост на страницата и SEO

Нека първо отговорим на основния въпрос.

Да, скоростта и ефективността на вашия уебсайт могат да повлияят на оптимизацията за търсачки (SEO).

По-специално, лошото представяне може да навреди на вашето SEO. Полезно е да мислите за PageSpeed ​​Insights като за „управител“ за вашия уебсайт. Ако резултатите ви са ниски, това означава, че уебсайтът е бавен – което също забавя растежа ви в SERPs (страницата с резултати от търсачката)!

Google заяви публично, че използва сигнали за скорост на уебсайта , които наричат ​​„изживяване на страницата“, като фактор за SEO класиране.

Има три основни фактора, включени в алгоритъма за търсене, които Google нарича Core Web Vitals :

1. Зареждане –зареждане на най-голямо съдържание (LCP)
2. Интерактивност – закъснение при първо въвеждане (FID)
3. Визуална стабилност – Кумулативно изместване на оформлението (CLS)

Какво представляват Core Web Vitals?

Core Web Vitals (CWV) е разработен от Google и представлява трио от показатели за потребителското изживяване, предназначени да помогнат за създаването на по-бързо, по-достъпно и по-висококачествено изживяване при сърфиране в мрежата. Трите основни показателя за уеб показатели включват (LCP), забавяне при първо въвеждане (FID) и (CLS).

Всички тези фактори измерват колко бързо се зарежда вашият уебсайт и скоростта и качеството на потребителското изживяване, което също може да повлияе на достъпността.

Тези три фактора са част от шестте общи показателя, измерени от PageSpeed ​​Insights.

Как работи PageSpeed ​​Insights

Сега, когато разбираме кой, какво, къде и защо… всичко, което остава, е как .

Как работи PageSpeedInsights и как използвате информацията, която предоставя?

Първо, малко за това как инструментът функционира зад кулисите, директно от Google:

С други думи, PageSpeed ​​Insights разглежда две неща.

Първо, компютрите на Google зареждат вашия уебсайт, за да видят как работи.

Второ, тъй като компютрите на Google не са същите като лаптоп, който може да използвате у дома или на работа, те разглеждат регистър с исторически данни от потребители от реалния свят, които са посетили вашия сайт през последните 28 дни. (Тези данни идват от отчета за потребителското изживяване на Chrome, често наричан „CrUX“, и се събират от потребители, които използват браузъра Chrome.)

След това PageSpeed ​​Insights комбинира тези два теста и оценява вашия уебсайт въз основа на начина, по който реалните потребители биха го изпитали.

Резултатът на PageSpeed ​​Insights е колекция от показатели за ефективността на вашия сайт, която разбива кои области са добри и кои може да се нуждаят от работа.

Има 6 резултата, които трябва да знаете:

1. (FCP)
2. (FID)
3. (LCP)
4. (CLS)
5. (INP)
6. (TTFB)

Всеки от тези показатели се измерва и след това се оценява според нивото на ефективност.

Когато стартирате отчет на PageSpeed ​​Insights на сайта си, ще получите резултат и „оценка“ за всеки от тях, които ще попаднат в една от три групи:

1. добре
2. Нуждае се от подобрение
3. зле

Тези оценки се определят от предварително зададени диапазони, които Google задава:

	добре	Нуждае се от подобрение	зле
FCP	[0, 1800ms]	(1800ms, 3000ms]	над 3000ms
ДОВЕРИЕ	[0, 100ms]	(100ms, 300ms]	над 300ms
LCP	[0, 2500ms]	(2500ms, 4000ms]	над 4000ms
CLS	[0, 0.1]	(0.1, 0.25]	над 0,25
INP (експериментален)	[0, 200ms]	(200ms, 500ms]	над 500ms
TTFB (експериментално)	[0, 800ms]	(800ms, 1800ms]	над 1800ms

Как да използвате това ръководство, за да подобрите резултата си от PageSpeed ​​Insights

Разбирането на PageSpeed ​​Insights е първата част от битката.

След това трябва да разберем как да превърнем всички резултати, числа и предложения в приложим план за подобрение.

Ето как да използвате това ръководство:

• Стартирайте отчета PageSpeed ​​Insights на уебсайта си .
• Потърсете неуспешни CWV тестове или показатели в „лошия“ край на скалата.
• Намерете раздела по-долу, който се отнася до тези конкретни показатели.
• Изпълнете стъпките (представени в ред от най-високото към най-слабото въздействие).
• Пуснете отново отчета PageSpeed ​​Insights.
• Ако е необходимо, повторете процеса за всички показатели, които все още са маркирани като „Лош“.
• Преминете към показателите, означени като „Нуждае се от подобрение“.
• Повторете отначало.

#1 (FCP)

Нека се потопим в първия показател в списъка на Google.

Това е First Contentful Paint или FCP и измерва колко бързо потребителят може да види вашия уебсайт, докато се зарежда.

Какво е First Contentful Paint?

First Contentful Paint (FCP) е времето, необходимо на първия обект да се зареди в браузъра на потребителя. Това е различно от скоростта на зареждане на страницата или времето за зареждане, защото не е времето за изобразяване на цялата страница — това е само първата част от страницата, която се появява на екрана.

Това е важно от гледна точка на потребителя, защото той може да види напредъка, когато страницата започне да се показва.

Това също означава, че стратегиите за ускоряване на FCP са уникални, тъй като просто карат цялата страница да се зарежда по-бързо.

FCP се измерва в секунди.

• Добър: < 1,8 секунди
• Нуждае се от подобрение: 1,8 – 3 секунди
• Слабо: > 3 секунди

Техники за подобряване на FCP

Да приемем, че сте постигнали 2,2 секунди във вашия FCP резултат. Надявате се на 1.8s.

Какви инструменти са на ваше разположение?

Минимизиране на ресурсите, блокиращи изобразяването

Не забравяйте, че First Contentful Paint не е само колко време отнема зареждането на цялата страница. Става дума за това първите пиксели да се появят на екрана възможно най-бързо.

Една ключова стратегия е просто да промените реда на съдържанието на вашата страница.

Оставете браузъра да рендира най-важния текст, изображения и стилове, преди да започне да зарежда тежки скриптове, фантастични анимации и съдържание, което е „под видимата страница“.

Първото нещо, което трябва да направите: Изтрийте всички неизползвани стилове или скриптове от вашата страница.

Ако зареждате JavaScript или CSS на страницата (обикновено в секцията Head на уебсайта), това ще забави FCP. Ако не ги използвате, тогава това просто ви забавя за нищо.

JavaScript

JavaScript е език за програмиране, който ви позволява да създавате неща в рамките на уеб страница или на уеб сървър. Когато разглеждате уеб страница, JavaScript кодът ще се изпълни автоматично.

В WordPress сайт обикновено можете да постигнете това, като деактивирате неизползваните приставки, които могат да заредят код на страницата, дори ако приставката не се използва или показва.

Ако погледнете констатациите в отчета си PageSpeed ​​Insights, той ще маркира код, който е зареден в страницата, но не се използва:

Това трябва да ви каже кой код или добавки можете безопасно да премахнете.

(Забележка: Това, че кодът не се използва на една страница, не означава, че не е и на други страници на вашия уебсайт! Бъдете внимателни, преди да започнете да хаквате и изрязвате неща от страниците си.)

Следващ: Отлагане или зареждане на скриптове асинхронно.

Ако имате нужда от скриптове или стилове на вашата страница, но те не са незабавно жизненоважни за първото съдържание, което потребителят вижда, тогава можете да направите това, което се нарича отлагане или зареждането им асинхронно. Това казва на браузъра да изчака да ги зареди, вместо да ги зарежда в реда, в който се показват на страницата.

Това е доста просто – можете да добавите малко допълнителен код към уебсайта си, който ще инструктира браузъра да отложи или да зареди async (или и двете):

<script src="app.js" async></script>

Накрая: Реструктурирайте CSS (стил).

Ако сте запознати с CSS, ще знаете, че е обичайно да хвърлите всичките си стилове в едно голямо петно ​​код и да го заредите в стандартен файл като style.css.

Не е грешно . Просто не е много производителен.

За да подобрите FCP, можете да оптимизирате вашата CSS структура:

1. Премахнете всички стилове, които се прилагат към съдържание, което е част от FCP (всичко „на видимата на екрана част от страницата.“)
2. Добавете тези стилове като вграден стилов блок в заглавката на уебсайта си.
3. Заредете останалите стилове асинхронно с функция „предварително зареждане“ (показана по-долу.)

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Като алтернатива, ако имате много отделни стилове за различни устройства и браузъри, може да искате да разделите своя лист със стилове на няколко файла и да използвате медийна заявка @import, за да заредите само подходящите стилове .

Оптимизиране на изображения и видеоклипове

Тъй като FCP е най-вече за оптимизиране за първите няколкостотин пиксела в горната част на страницата, няма да навлизаме в твърде много подробности относно оптимизирането за изображения и видеоклипове тук.

Но ако заглавката ви има много изображения или имате видеоклип в горната част на страницата, тогава може да си струва да проучите как да оптимизирате тези активи, за да подобрите първоначалната скорост на зареждане. Вижте по-долу за повече подробности как да подходите към оптимизирането.

Използване на (CDN)

Същото като по-горе. CDN могат да помогнат за по-бързото зареждане на цялата ви страница, което дава малък тласък на FCP. Вижте по-долу за повече подробности относно използването на CDN.

#2 – Закъснение при първо въвеждане (FID), общо време на блокиране (TBT) и време до интерактивност (TTI)

Сега нека поговорим за компромисите.

Ако сте обърнали внимание само на First Contentful Paint, може да си помислите, че всичко, което трябва да направите, за да смажете резултата си от PageSpeed ​​Insights, е да отложите и заредите всичките си ресурси по-късно, за да накарате тази горна част от уебсайта ви да се зареди бързо.

Но ако изглежда, че уебсайтът се зарежда бързо, но всъщност не мога да взаимодействам с него, това също е лошо потребителско изживяване.

Въведете: Закъснение при първо въвеждане.

Закъснението при първо въвеждане също е свързано с показателите Общо време на блокиране (TBT) и Време до интерактивност (TTI).

Нека разопаковаме всяко от тях и как те са свързани, но различни.

Какво е закъснение при първо въвеждане?

Закъснение при първо въвеждане (FID) е времето, необходимо на браузъра да отговори на първото въвеждане или взаимодействие на потребителя (напр. щракване върху връзка или бутон). Ефективността на вашия уебсайт влияе върху забавянето, тъй като повечето взаимодействия не могат да бъдат обработени, докато браузърът зарежда или изобразява код.

С други думи, ако вашият код отнеме много време, за да завърши зареждането, това ще попречи на потребителя да взаимодейства с уебсайта и ще има забавяне или време на забавяне между момента, в който кликне, и момента, в който се извърши действието.

Този показател се измерва в милисекунди и се основава на потребителски данни от реалния свят.

• Добър: < 100ms
• Нужда от подобрение: 100 – 300ms
• Слабо: > 300ms

Какво е време за интерактивност (TTI)?

Time to Interactive е времето, необходимо на страницата да стане „надеждно интерактивна“.

Google определя „надеждно интерактивен“ като когато основната нишка на браузъра е свободна за поне 5 секунди, което прави страницата напълно интерактивна за потребителя.

Това е показател, измерен от Lighthouse на Google, така че не се основава на действителни потребителски данни. Вместо това се измерва по специфични, контролирани критерии.

Какво е общо време на блокиране (TBT)?

Общото време на блокиране измерва пълния период от време между FCP и TTI.

С други думи, часовникът не започва да работи, докато горната част на страницата не бъде изобразена и след това спира, след като страницата се счита за „надеждно интерактивна“ или 5 секунди след като основната нишка е свободна.

Първо забавяне на входа спрямо времето до интерактивност спрямо общото време на блокиране

Тези три показателя са свързани, но не идентични.

Първото забавяне на въвеждане се основава на потребителски данни от реалния свят и Core Web Vitals. TTI и TBT се измерват от отчета за ефективността в PageSpeed ​​Insights, поддържан от Lighthouse на Google.

По отношение на подобряване на ефективността на тези три показателя, решенията също са сходни, но не идентични. Най-вече решенията за подобряване на FID, които включват отлагане на рендирането на JavaScript, няма да подобрят TTI или TBT, защото JavaScript все още трябва да се зареди.

Но решения като премахване, минимизиране и кеширане трябва да помогнат за подобряването и на трите показателя.

Техники за подобряване на FID, TTI и TBT

Досега най-значителното въздействие върху FID е JavaScript, зареден на вашата страница.

Можете да мислите за JavaScript като отделна железопътна линия за браузъра. Докато изобразява или изпълнява JavaScript код, той не може да изпълнява други задачи или да отговаря на въведени данни като потребител, който кликва върху връзка („главната нишка“ трябва да е свободна, за да може браузърът да отговори).

Така че колкото по-дълго време прекарва в четене и изпълнение на JavaScript, когато страницата се зарежда за първи път, толкова по-дълго ще бъде забавянето, ако потребителят започне да взаимодейства със страницата.

Намаляване на въздействието на кода на трета страна

Един обичаен заподозрян за бавен отговор на въвеждане е, че уебсайтът все още се зарежда във всички видове инструменти, джаджи и приложения на трети страни към вашия уебсайт.

Всеки път, когато добавяте неща като Facebook, Drift, Intercom, HotJar или други инструменти и услуги на трети страни към уебсайта си, той добавя малко код, който ще трябва да бъде зареден и изобразен на страницата.

Ако имате много от тези услуги, зареждането на всички може да отнеме много време.

Още по-лошо е, че нямате никакъв контрол върху това колко бързо се зареждат тези ресурси на вашия сайт. Така че, ако браузърът се опитва да извлече малко JavaScript от уебсайт на трета страна на бавен сървър, това може да причини значителни забавяния.

Нека го оправим.

Вариант №1: Изтрийте всички неизползвани инструменти на трети страни.

Вероятно сте инсталирали всякакви услуги, плъгини и инструменти на уебсайта си през годините. И вероятно използвате само няколко от тях.

Сега е моментът да изтриете или деинсталирате тези, които не използвате активно.

За да получите пълен списък на зареждането на JavaScript на трета страна на вашата страница, вижте вашия отчет PageSpeed ​​Insights или изпълнете отделен отчет Lighthouse .

Трябва да видите списък с всички скриптове, които се зареждат и колко време отнемат:

Сега, като използвате тази информация, можете да решите кои от тях са критични и кои могат безопасно да бъдат премахнати.

В зависимост от услугите, които искате да изтриете, може да се наложи ръчно да премахнете кода от уебсайта си, да деинсталирате приставка за WordPress сайт или да премахнете кода, добавен чрез Google Tag Manager, за да подобрите ефективността на страницата.

Опция №2: Заредете асинхронен JavaScript .

Освен ако не е жизненоважно за изобразяването на FCP, почти винаги е препоръчително да изобразявате скриптове на трети страни асинхронно. Ако имате жизненоважен JavaScript, който забавя FID, но не можете да го премахнете, опитайте вместо това да го накарате да зарежда async .

Минимизиране на времето за изпълнение на JavaScript

Кодът на трета страна може да бъде негодник, но какво ще кажете за нашия собствен код, който сме поставили на нашия уебсайт?

Вероятно това не е невинно в бавното време на зареждане.

Ако имате несъществен JavaScript, който сте добавили към собствения си уебсайт, може да искате да го премахнете.

Разглеждайки отчета PageSpeed ​​Insights, трябва да видите раздел, който препраща към неизползван JavaScript:

• Ако JavaScript е 100% неизползван, помислете дали да го изтриете
• Ако JavaScript се използва на други страници, помислете дали да не го доставяте избирателно само на страниците, където е необходимо (известно още като „ разделяне на код “)

Можете също така да проучите опции за подобряване на времето за зареждане на JavaScript.

Най-често срещаният начин за ускоряване на времето за зареждане е намаляване на размера на файла. И с JavaScript има две основни стратегии:

• Минимизиране – Премахване на всички интервали, прекъсвания на редове и т.н. в кода
• Компресиране – „компресиране“ на файла, за да стане по-малък

Приоритет на видимото съдържание

Ако сте загрижени основно за подобряването на FID, тогава може да искате да се съсредоточите върху отлагането на JavaScript и други елементи на страницата, за да се съсредоточите само върху съдържанието в рамките на първото боядисване със съдържание.

В края на краищата, потребителите не могат да взаимодействат с елементи, които не са изобразени.

#3 (LCP)

Ако FCP е времето от 0 до 60 на вашия автомобил, тогава LCP е неговата четвърт миля.

Добре, за не-gearheads, това, което имам предвид е, че LCP измерва колко бързо потребителят може да види „основното“ съдържание на вашата уеб страница.

Largest Contentful Paint (LCP) е показател, който измерва колко време е необходимо на най-големия блок от съдържание на страницата да бъде видим за потребителя. За разлика от FCP, той разглежда времето за зареждане на най-големия блок от изображение или текст на страницата, независимо от неговата позиция или ред.

Той измерва най-големия блок от съдържание въз основа на неговите размери в прозореца за изглед на потребителя. С други думи, ако има един <div> с много текст или едно изображение, което заема голяма част от екрана, това може да се счита за най-големия блок от съдържание и да се използва за изчисляване на LCP.

Измерва се в секунди и се основава на потребителски данни от реалния свят (или „на полето“):

• Добър: < 2,5s
• Нуждае се от подобрение: 2,5 – 4s
• Слабо: > 4s

Техники за подобряване на LCP

Преди да започнете да работите за оптимизиране на вашия LCP, може да искате да определите коя част от вашата страница се счита за най-големия блок от съдържание.

Това може да ви помогне да насочите усилията си към подобряване на ефективността на конкретна страница или шаблон.

Можете да направите това, като използвате Chrome DevTools в браузъра си, за да идентифицирате LCP ресурса на всяка конкретна страница.

Оптимизиране на приоритета на зареждане

В горните раздели обсъдихме опции като използване на асинхронни или отложени стратегии за ускоряване на изобразяването на ключови части от страницата.

Може да разгледате тези тук като опция от първа линия.

Премахването или отлагането на блокиращи изобразяването ресурси може да помогне на основното съдържание да се зареди по-бързо. Но имайте предвид, че ако тези ресурси значително променят оформлението или структурата на страницата, това всъщност може да промени кой блок се счита за най-голям и да забави LCP, вместо да го подобри!

Можете да направите тази стратегия една крачка напред. Особено ако най-големият блок от съдържание е изображение.

Можете да приложите това, което е известно като PRPL (Preload, Render, Precache, Lazy load) рамка за насочване към конкретни ресурси на вашата страница и за зареждане първо в опашката. Ако това изображение е най-големият блок със съдържание, то ще подобри драстично вашия LCP резултат.

Lazyload

Мързеливото зареждане е модел на проектиране, използван в разработката на софтуер за подобряване на производителността и намаляване на потреблението на ресурси. Това включва отлагане на инициализацията или зареждането на обект, докато не стане необходим.

В допълнение към опциите за асинхронно изобразяване, тази рамка предоставя други стратегии за оптимизиране на пътя за изобразяване.

Един от най-простите е предварителното зареждане на критични активи.

Можете да направите това, като просто добавите малък фрагмент към заглавката на уебсайта си, който казва на браузъра да даде приоритет на критични изображения, шрифтове, стилове или скриптове, които може да са критични за най-голямата ви секция със съдържание.

Например, ако имате главно изображение, което е най-големият блок на страницата, тогава може да искате да заредите предварително това изображение на всяка страница, като използвате фрагмент като този:

<link rel="preload" as="image" href="image1.png">

Това казва на браузъра да започне да зарежда този ресурс веднага, преди да бъде открит на страницата.

Оптимизиране на размера на файла (ресурса).

Сега нека поговорим за размера на файла.

Зареждането на по-големите файлове отнема повече време. Това се отнася за изображения, скриптове, видеоклипове, шрифтове и всичко друго на вашата страница, което може да бъде заредено като част от най-големия блок със съдържание.

Един от начините за ускоряване на LCP резултата е оптимизирането на размера на файла.

Стратегиите за оптимизиране на размера на файла ще зависят от формата на файла.

Оптимизиране на изображения

Обикновено ще намерите големи печалби чрез компресиране и оптимизиране на вашите изображения.

Започнете с оценка на тези области за подобрение:

• Формат : Различните формати на изображения предлагат различни нива на компресия и качество. За повечето случаи на уеб употреба JPEG, PNG и WebP са най-често срещаните формати.
  • JPEG обикновено е най-подходящ за снимки.
  • PNG обикновено е най-подходящ за проектирани изображения с текст или остри ръбове.
  • WebP е по-ефективен формат, който осигурява по-добра компресия, без да се жертва качеството, но може да не се поддържа от всички браузъри.
• Компресия : В много случаи можете да компресирате размера на файла на изображението, без да губите много или никакво визуално качество.
  • Онлайн инструменти за компресиране на изображения: TinyPNG (за PNG и JPEG), Squoosh (за WebP).
  • Инструменти за компресиране на изображения на WordPress: ShortPixel , Imagify .
• Размер на изображението : Ако качвате необработени изображения или снимки на уебсайта си и след това ги добавяте към страницата си, има вероятност те да са много по-големи, отколкото трябва, забавяйки времето за зареждане.
  • Преоразмерете вашите изображения и качете само размера, от който се нуждаете.
  • Използвайте приставка за WordPress за автоматично преоразмеряване на изображения, когато бъдат качени.
  • Използвайте атрибутите „srcset“ и „sizes“ в тага „img“, за да посочите множество източници и размери на изображения. Браузърът автоматично избира най-подходящото изображение въз основа на размера и разделителната способност на екрана на потребителя.

Оптимизиране на скриптове и стилове

Всички ресурси, необходими за изобразяване на най-големия блок със съдържание, ще трябва да бъдат напълно заредени, преди да се изчисли LCP.

Това включва скриптове и стилове, които оказват влияние върху най-големия ви блок със съдържание.

Използвайки някои от техниките, които обсъждахме преди, можете да подобрите LCP чрез оптимизиране на размера на файла и пътя за изобразяване за JavaScript, CSS и т.н.:

• Минимизирайте файловете.
• Разделяне на кода за намаляване на размера на файла.
• Добавете стилове и скриптове на линия.
• Предварително зареждане или кеш.

Оптимизиране на видеоклипове

Ако вашият LCP ресурс може да е видео, тогава трябва да обмислите начини за оптимизиране на видеоклипове.

• Хоствайте видеоклипа в YouTube или друга услуга с бърз CDN, вместо да качвате директно.
• Компресирайте размера на видео файла.

Оптимизиране на шрифтове

Ако въпросният LCP ресурс е текст и този текст използва импортиран шрифт (напр. от Google Fonts), тогава можете да оптимизирате, като подобрите скоростта на зареждане на файла с шрифтове.

• Използвайте само WOFF и WOFF2.0 файлови шрифтове за уеб.
• Предварително заредете файла с шрифта, като използвате маркер за връзка rel (вижте по-горе).
• Разгледайте още опции за допълнително намаляване на времето за зареждане на размера на файла с шрифта .

Внедрете CDN

Мислете за CDN като HOV лента на магистралата.

Той помага на браузъра да изтегля ресурси по-бързо, като ги кешира в сървъри по целия свят.

CDN

CDN е съкращение за „Мрежа за доставка на съдържание“. Отнася се за географски разпределена мрежа от уеб сървъри (и техните центрове за данни). Субектите, които съставят CDN, си сътрудничат, за да осигурят бърза доставка на съдържание през интернет.

Основното нещо, което трябва да знаете, е следното: внедряването на CDN може драматично да подобри ефективността на уебсайта навсякъде. И особено когато става въпрос за LCP, той може да помогне за изобразяване на изображения, скриптове и други активи по-бързо от нормалния сървър на вашия уеб хост.

За да внедрите CDN:

• Изберете CDN доставчик : На пазара има няколко популярни CDN доставчици, като Cloudflare , Amazon CloudFront , Google Cloud CDN и Fastly .
• Настройте акаунт и конфигурирайте CDN : След като сте избрали CDN доставчик, регистрирайте се за акаунт и конфигурирайте настройките на CDN. Това обикновено включва създаване на CDN зона, конфигуриране на правила за кеширане и настройка на SSL/TLS криптиране.
• Интегрирайте CDN с уебсайта си : За да интегрирате CDN с уебсайта си, ще трябва да актуализирате URL адресите на съдържанието, което искате да обслужвате чрез CDN. Това включва промяна на сървърите за имена, така че да сочат към CDN вместо вашия нормален сървър.
• Тествайте CDN : След като интегрирате CDN с уебсайта си, изпълнете тестове, за да се уверите, че съдържанието се обслужва през CDN и че производителността на LCP се е подобрила.

За по-подробно ръководство вижте нашата статия относно използването на CDN с WordPress .

Подобрете производителността на сървъра

И накрая, но със сигурност не на последно място, производителността на сървъра на вашия уеб хост също играе ключова роля в LCP.

Ще разгледаме това напълно, когато се потопим в TTFB; достатъчно е да се каже, че браузърът може да изтегля ресурси толкова бързо, колкото позволява сървърът. Ако отговорът на сървъра отнема много време, зареждането на ресурса ще отнеме много време.

#4 (CLS)

Знаете ли, че уебсайтовете могат да танцуват?

Е, нещо като. И не много добре.

По-точно, те могат да се изместят. Елементите на страницата се движат, докато различни изображения, скриптове, стилове и текст се изобразяват, докато страницата се зареди напълно.

Какво е кумулативно изместване на оформлението?

Кумулативното изместване на оформлението измерва колко далеч се движат изображенията, текстът, бутоните и другите елементи на вашата страница по екрана, докато потребителят чака страницата да се зареди. По-ниският CLS се счита за по-добър за потребителското изживяване.

Това не е изненадващо, ако вземете предвид собствените си навици на сърфиране.

Ако чувствате, че играете на къртица, докато се опитвате да щракнете върху връзка, която продължава да се движи по-надолу в страницата, вероятно ще се разочаровате и ще напуснете сайта напълно. (Здравей, степен на отпадане!)

Това изживяване може да бъде особено вбесяващо, докато сърфирате на мобилно устройство.

CLS са полеви данни от реални потребители и се измерват като резултат, който съчетава „фракцията на въздействието“ (колко процента елементи в прозореца за изглед са се изместили) и „фракцията на разстоянието“ (колко разстояние са се преместили спрямо общия размер на екрана).

Съществува и специално обозначение за „очаквани смени“ (напр. щракване върху бутон, който отваря нов раздел на страницата) и „неочаквани смени“, които не са подканени от потребителско въвеждане.

CLS се измерва чрез умножаване на фракцията на удара и фракцията на разстоянието:

• Добър: < 0,1
• Нуждае се от подобрение: 0,1 – 0,25
• Слабо: > 0,25

Техники за подобряване на CLS

Вероятно е, че ако не се опитвате умишлено да подмамите потребителите си, като местите неща на страницата си, вашият CLS е доста нисък по подразбиране, но има няколко невинни грешки, които можете да направите и си струва да ги коригирате.

Определете размерите на всички изображения и видеоклипове

Едно малко нещо с голямо въздействие. Ако не дефинирате изрично размера на изображенията и видеоклиповете на вашата страница, това може да доведе до промяна в оформлението, тъй като браузърът не е сигурен колко място да резервира за този ресурс.

Това е толкова просто, колкото добавянето на атрибут за всяко изображение или видео на страницата:

<img src="hero_image.jpg" width="400" height="400">

Избягвайте реклами и изскачащи прозорци, които причиняват промени в оформлението

Трябва да платите сметките по някакъв начин, но избягвайте да използвате изскачащи прозорци или изскачащи прозорци, които изместват оформлението на страницата. Ако не друго, използвайте поле за съотношение на CSS, за да „запазите“ място за реклами или други съобщения, зареждащи се в страницата, докато потребителят взаимодейства.

Изберете анимации разумно

С модерен CSS и JavaScript можем да внедрим всякакви страхотни и фантастични анимации на страницата.

Но от гледна точка на потребителя функцията винаги надделява над формата.

Премахнете всички анимации, които задействат промени в оформлението, тъй като всяка промяна на състоянието може да допринесе за цялостното изместване на оформлението и да повлияе на вашия CLS резултат.

#5 (INP)

Както Джей Зи веднъж каза: „Нямам търпение. И мразя да чакам.

Не всички ли?

Въпреки че вече разгледахме забавянето на въвеждането при първото взаимодействие с вашия уебсайт (FID), INP е по-широк показател, който оценява цялостната реакция на вашия уебсайт.

Interaction to Next Paint измерва колко време е необходимо на следващия „paint“ или актуализиран кадър на вашия уебсайт да се появи, след като потребителят взаимодейства с бутон или елемент на страница. Той измерва цялостната отзивчивост на уебсайта и колко течни са взаимодействията.

Това е особено важно за уеб приложения, които изискват значително потребителско взаимодействие и могат да изглеждат бавни и объркващи, ако има твърде дълго забавяне на въвеждането или забавяне между действието и резултата.

INP се измерва в милисекунди:

• Добър: < 200ms
• Нуждае се от подобрение: 200 – 500ms
• Лошо: > 500ms

Техники за подобряване на INP

Ако имаш проблеми с INP, съжалявам за теб, синко. (Съжалявам, това е друг текст на Jay-Z.)

1. Забавяне на входа
2. Забавяне на взаимодействието
3. Забавяне на презентацията

Това е наистина трудната част; За да диагностицирате проблема по-отблизо, ще трябва да използвате или Google Chrome профилиране на производителността, или функцията за запис на Lighthouse .

Тук можете да увеличите мащаба на отделно взаимодействие и да видите къде се случва най-дългото забавяне.

Оттам нататък можем да търсим някои решения за всеки един.

Фиксиране на входното забавяне

Забавянето на входа се причинява, когато основната нишка е заета по време на взаимодействието. Това означава, че се случва нещо друго, когато се извърши щракване или натискане на клавиш.

За да го поправите, трябва да разберете кои процеси се изпълняват като част от основната нишка:

• Премахнете или оптимизирайте JavaScript на трети страни.
• Използвайте JavaScript извън основната нишка.
• Използвайте слушатели като isInputPending(), за да получите основната нишка (това е най-разширената опция.)

Коригиране на забавяне на взаимодействието

Ако самото взаимодействие е виновникът – което означава, че отнема много време за действителното изпълнение на взаимодействието – тогава ще трябва да преработите кода за този вход.

Основната препоръка тук е да отложите несъществените изчисления.

С други думи, изпълнете частта от взаимодействието, която потребителят веднага вижда и очаква. След това, след като актуализирате рамката, извършете всякакви други изчисления или взаимодействия зад кулисите.

Да кажем, например, че потребителят щраква върху бутон, който отваря прозорец и също така регистрира събитие, показващо, че е щракнал върху бутона. Бихте искали вашият код първо да отвори прозореца, „завършвайки“ взаимодействието от гледна точка на потребителя.

След това, след като взаимодействието приключи, регистрирайте събитието, което потребителят няма да види или преживее директно.

Коригиране на забавяне на презентацията

Възможно е както въвеждането, така и взаимодействието да се случват доста бързо, но на браузъра отнема много време, за да актуализира презентацията с новата рамка.

За съжаление, няма много рефакторинг , който да помогне с това.

Но няколко неща могат да причинят по-дълго от нормалното забавяне:

• Прекалена употреба на requestAnimationFrame() . Всеки път, когато се извика тази функция, тя създава малко забавяне. Така че потърсете случаи, в които може да се използва твърде често или ненужно.
• „Асинхронните“ атрибути не работят добре. В зависимост от контекста някои ресурси, които сте маркирали за асинхронно изобразяване, може да игнорират директивата или да се заредят неочаквано. Ако това се случи, това ще забави други елементи от пътя на изобразяване и следващия кадър.

#6 (TTFB)

Сега се замисляме за този първи момент, когато се зарежда уеб страница.

Преди страницата дори да започне да се изобразява, браузърът на потребителя трябва да се свърже с уеб сървъра, да разбере с кого се свързва и да получи нареждания за това какво да започне да зарежда в какъв ред.

Това първоначално ръкостискане съдържа първия байт информация. Колко бързо пристига този байт е като пистолетен изстрел в началото на конно състезание.

Какво е времето до първия байт?

Времето до първия байт е времето, необходимо на вашия браузър да премине през процеси като DNS търсене, TCP и SSL ръкостискания и настройка на връзката, за да поиска – и получи – първите байтове информация от уеб сървър. Скоростта на установяване на връзка с уеб сървъра зависи почти изцяло от самия сървър и от това как се хоства уебсайтът.

Измерва се в милисекунди:

• Добър: < 800ms
• Нуждае се от подобрение: 800 – 1800ms
• Слабо: > 1800ms

Техники за подобряване на TTFB

Можете да мислите за TTFB като времето, което прекарвате на стартовата линия, преди пистолетът да бъде изстрелян. Всичко, което забавя първоначалната зелена светлина, ще добави време към TTFB и общото време за зареждане на страницата.

И така, какви са вашите възможности за подобрение?

Премахнете пренасочванията

Първо и най-важно, елиминирайте пренасочванията към страницата, когато е възможно. Ако пренасочвате потребители от една страница към друга, времето, необходимо за изпълнение, попада в прозореца на TTFB, което означава, че ще добавите значително време към резултата си.

Това включва 301 пренасочвания от стари URL адреси към нови, както и временни пренасочвания и други реализации.

Надстройте своя уеб хостинг

Хостингът играе огромна роля в цялостната скорост и оценка на производителността на вашия уебсайт, особено когато става въпрос за TTFB.

Хостинг доставчик

Хостинг доставчикът е бизнес, който начислява такса в замяна на „наемане“ на сървърно пространство и ресурси. Можете да изберете който и да е хостинг доставчик, който искате да стартирате нов уебсайт.

Ще искате да разгледате спецификата на вашия доставчик на уеб хостинг, като обърнете голямо внимание на неща като:

• Споделен срещу специализиран хостинг : Вашият уебсайт хоства ли се на собствен екземпляр или споделя ресурси с други потребители и техните уебсайтове? Специализираният хостинг обикновено струва повече, но осигурява по-последователна производителност.
• Памет (RAM) : Паметта, която вашият сайт има достъп на сървъра, играе основна роля в цялостната му производителност. Ако паметта е изчерпана, тогава сървърът няма да може да обработва и отговаря на нови заявки.
• CPU / Процесор: Скоростта на процесора на сървъра също играе роля в неговата скорост на отговор и време за обработка.
• Актуализации на инфраструктурата : Софтуерът, работещ на сървъра, поддържа ли се актуален и без грешки или конфликти? Актуализирайте най-новите версии на PHP, MySQL и други основни приложения, за да увеличите максимално производителността.

Внедрете кеширане

На така наречените „динамични уебсайтове“, като сайтове изработени на WordPress, кеширането на вашите страници може да направи огромни подобрения на времето за зареждане на страницата и TTFB.

Кеширането по същество означава, че вместо да извлича информация от базата данни на вашия сайт при всяко зареждане на страница, сайтът ще съхранява копие на страницата и ще го предоставя на потребителя. Това е много по-бързо, отколкото да търсите информация всеки път.

Заключение

В това ръководство сме покрили почти всичко, което трябва да знаете за отчета PageSpeed ​​Insights и как можете цялостно да оптимизирате скоростта на зареждане на вашия уебсайт, това са стъпки през които минаваме и други. Ние сме тук, за да ви помогнем да постигнете високи резултати при скоростта на зареждане на вашият уебсайт. Потърсете ни още днес.