Зашто ово пишем

Сада водим неколико веб-сајтова, и од почетка мој учинак је био веома висок и низак. С времена на време сматрао сам да је то потпуно досадно. Чини се да ми све функционише тако добро на локалном нивоу, али онда проверим аналитику свог сервера и видим да је за одређене земље моја брзина била ужасна.

Увек се чинило да је било и једно и другоЦЛСилиЛЦПто је било питање за мене. Зато сам мислио да ћу поделити своје искуство и покушати да помогнем другима да схвате ово, посебно ако и ви пролазите кроз исту ствар. Или сте можда имали проблема са овим и имате јединствену перспективу или решење? Волео бих да чујем о томе.

ПремаСеарцх Енгине Јоурнал, оптимизација ова два показатеља може значајно побољшати видљивост вашег сајта и задовољство корисника. То је у теорији звучало сјајно, али заправо поправљање је била друга прича. Дозволите ми да вас проведем кроз оно што сам научио.

Шта су тачно ЦЛС и ЛЦП?

Пре него што се упустим у своје проблеме, дозволите ми да објасним шта су то заправо, јер када сам први пут видео ове акрониме у Гоогле Сеарцх Цонсоле-у, нисам имао појма шта значе.

Кумулативни помак распореда (ЦЛС)мери колико скаче изглед ваше странице док се учитава. Знате када се спремате да додирнете дугме и цела страница се помери, па кликнете на погрешну ствар? То је ЦЛС проблем. То је невероватно фрустрирајуће као корисника, а испоставило се да вас претраживачи такође кажњавају због тога.

Највећа боја која садржи садржај (ЛЦП)мери колико времена је потребно да се највећи видљиви елемент на вашој страници учита. Обично је то слика хероја или велики блок текста. Ако је ваш ЛЦП спор, ваши посетиоци буље у напола учитану страницу и многи ће једноставно отићи.

Обе ове спадају под ГооглеОсновни показатељи за веб, which directly affect your search rankings. Дакле, чак и ако је ваш садржај бриљантан, лоши ЦЛС и ЛЦП резултати могу да вас спуте.

Оптимизујте своју веб локацију за ЦЛС и ЛЦП

🖼

Подесите димензије слике
Одредите ширину и висину за слике

📢

Користите огласе одговорно
Избегавајте неочекивану промену величине огласа

⚡

Унапред учитајте важне ресурсе
Обезбедите да се критични садржај брзо учитава

🔄

Смањите динамички садржај
Ограничите садржај који се мења током учитавања

📊

Редовно пратите перформансе
Користите алате за праћење ЦЛС и ЛЦП резултата

Моја ЦЛС ноћна мора

ЦЛС је био први проблем на који сам налетео. Моје странице су ми изгледале добро, али резултати су ми били ужасни. После доста копања, нашао сам главне кривце:

Слике без димензија:Нисам постављао ширину и висину на својим сликама. Прегледач није имао појма колико простора да резервише, па се све променило када су се слике учитале.
Фонтови се касно учитавају:Моји прилагођени фонтови су се учитавали након приказивања странице, због чега је сав мој текст скочио док је нови фонт заменио резервни. Овај је био суптилан, али се сабрао.
Динамички садржај:Имао сам неке компоненте које су убацивале садржај након што се страница учитала, гурајући све испод себе.

Решење за већину мојих ЦЛС проблема било је изненађујуће једноставно. Почео сам да дефинишем експлицитне димензије за све слике и медије. Додао сам замену приказа фонтова у учитавање фонтова тако да се резервни приказ одмах приказује. И резервисао сам простор са ЦСС-ом за било који садржај који се динамички учитава.

Алати попутГоогле ПагеСпеед Инсигхтсбили су од велике помоћи овде. Они вам показују тачно који елементи изазивају промене распореда, тако да не погађате.

Онда је дошао ЛЦП проблем

Баш кад сам мислио да сам средио ствари, мојЛЦП резултатипочео да означава. Фрустрирајуће је било то што се мој сајт брзо учитавао за мене у УК, али моја аналитика је показала страшне брзине у другим земљама. То је оно што се тиче ЛЦП-а - то у великој мери зависи од тога где су ваши корисници и колико су удаљени од вашег сервера.

Главни проблеми које сам пронашао су:

Велике неоптимизоване слике:Моје слике хероја су биле превелике. Отпремао сам фотографије у пуној резолуцији без компримовања.
Време одговора сервера:Без ЦДН-а, корисници далеко од мог сервера чекали су годинама на први одговор.
ЈаваСцрипт који блокира приказивање:У глави су ми се учитавале скрипте које су блокирале приказивање странице док се не заврше.

АсБацклинкова студијапоказује, сајтови са добрим ЛЦП резултатима имају приметно бољи ангажман и ниже стопе посете само једне странице. Када сам почео да решавам ове проблеме, могао сам да видим разлику у сопственој аналитици.

Шта је заправо помогло мом ЛЦП-у

Почео сам да компримујем све своје слике и користим ВебП формат где је то могуће. Такође сам померио небитне скрипте да се учитавају асинхроно или их у потпуности одложио. Моји сајтови су хостовани на Верцел-у, који за мене обрађује много ствари на ивичним мрежама, али ако користите традиционални хостинг, подеситеЦДНможе направити огромну разлику за међународни саобраћај.

ЦДН чува копије вашег сајта на локацијама широм света, тако да се посетиоци опслужују негде ближе њима, а не са вашег јединственог изворног сервера. Ако видите лоше брзине у одређеним регионима, то је једна од првих ствари које вреди размотрити.

Досадни део - никада није стварно "поправљен"

Ево о чему вам нико не говориЦЛС и ЛЦП. Не поправљате их једном и идете даље. Сваки пут када додам нову функцију, нову слику или променим изглед, резултати се могу поново променити. То је стална ствар.

Имао сам недеље када је све било зелено у Гоогле Сеарцх Цонсоле-у, а онда сам додао једну нову компоненту и одједном је мој ЦЛС поново означен. То је потпуно неугодно, али научио сам да проверавам своје основне Веб витале након сваке значајне промене сада.

Утицај ЦЛС-а и ЛЦП-а на корисничко искуство

0,1 секунди

Толеранција корисника

32%

Повећање стопе одбијања

Пад стопе конверзије

Основни показатељи за веб

Значај СЕО рангирања

Извештај одФинансијски бренднаглашава како споре веб странице могу директно довести до губитка прихода. То је довољна мотивација да останете на врху, чак и када вам је досадно.

Алати који су ми највише помогли

Ако се бавите истим проблемима, ево алата које заправо користим и сматрам корисним:

Гоогле Сеарцх Цонсоле:Овде сам први пут приметио своје проблеме. Приказује ваше резултате Цоре Веб Виталс-а рашчлањене по страницама и говори вам тачно на шта треба обратити пажњу.
ПагеСпеед Инсигхтс:Провлачим сваку страницу кроз ово након уношења измена. Даје конкретне, делотворне препоруке, а не нејасне савете.Схопифи-јев водич за веб перформансеје такође одличан пратећи ресурс.
Додатак за веб виталс:Ово проширење за Цхроме приказује ваше ЦЛС, ЛЦП и друге метрике у реалном времену док претражујете свој сајт. Стално га држим укљученим током развоја.

Када идентификујете проблеме са перформансама, користите нашуАлат за рангирање Гоогле Сеарцх АИда проверите да ли се ваша побољшања заправо претварају у бољу видљивост претраге. Нема смисла поправљати резултате ако то не помаже вашем рангирању.

Мој савет ако пролазите кроз ово

Ако је ваш учинак био горе и доле као мој, ево шта бих предложио:

Не паничите.ЦЛС и ЛЦП проблеми су невероватно чести. Не радите све погрешно – ови показатељи су само осетљиви.
Проверите своју аналитику по земљи.Ваш сајт може бити брз за вас, али спор за посетиоце на другим местима. ЦДН то може брзо да реши.
Прво поправите слике.По мом искуству, неоптимизоване слике и недостајуће димензије узрок су већине ЦЛС и ЛЦП проблема.
Тестирајте након сваке промене.Стекните навику да покрећете ПагеСпеед Инсигхтс сваки пут када правите значајна ажурирања.
Будите стрпљиви.Ажурирање података Гоогле Сеарцх Цонсоле може потрајати данима или недељама. Немојте претпостављати да ваше исправке не функционишу само зато што се контролна табла још није променила.

Још увек учим и још увек се бавим овим. Моји резултати су бољи него што су били, али их не бих назвао савршеним. Ако сте пронашли решења која су радила за вас, искрено желим да чујем о њима. Такође можете покушати да визуелизујете своје податке о учинку са нашимбесплатни онлајн креатор графиконада бисте пратили побољшања током времена.

Суштина је следећа:ЦЛС и ЛЦПне одлазе. Они су важни за СЕО, важни су за корисничко искуство, а ако водите веб странице као ја, они ће вас држати на ногама. Али они су поправљиви, и свако побољшање које направите је вредно тога.