Как да оптимизирате уебсайта си за Core Web Vitals (Adsense)

Състезанието за подобряване на Core Web Vitals не е лесно. Става по-трудно, ако разчитате на рекламна програма като Google AdSense, за да осигурите приходи от уебсайта си.

Уебсайтовете, работещи с Google AdSense, са 10 пъти по-склонни да се провалят на теста Core Web Vitals, отколкото същият уебсайт без Google AdSense в него. Това се дължи най-вече на броя заявки и активи от трети страни, които Google AdSense добавя към вашия уебсайт. Повечето от тези активи са неоптимизирани, големи и неудобни за потребителя.

Извън AdSense и рекламните платформи, ако имате много неоптимизирани изображения, JavaScript и CSS, особено на видимата на екрана част от страницата, тогава е много вероятно да се провалите на теста Core Web Vitals.

Ако сте се борили да преминете теста Core Web Vitals и да подобрите потенциала си за класиране в търсачката, в тази статия ще намерите практически решения.

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

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

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

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

Най-голямата съдържателна боя (LCP): LCP измерва времето, необходимо за зареждане на най-голямото видимо изображение или текстов блок на уеб страница. Ако най-големият видим текст или изображение се зареди бързо, се възприема, че останалите ви изображения и текст ще се заредят бързо. Необходимото време за зареждане за преминаване е 2.5 секунди.

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

Кумулативно изместване на оформлението (CLS): CLS измерва изместване на оформлението, което се случва на уеб страница. Когато една уеб страница се зареди и след това внезапно нещо се появи или изчезне и страницата трябва да се приспособи, за да бъде по-голяма или по-малка, тази промяна е това, което се измерва. Това е ужасно за потребителското изживяване и съм съгласен. Резултатът, който трябва да преминете, е 0.1.

Как да оптимизирате уебсайта си за Core Web Vitals

Следвайте тези стъпки, за да оптимизирате уебсайта си:

1. Започнете с бърз уеб хост

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

Защо е важен уеб хост с бързо време до първия байт (TTFB)? Някои ще възразят, че TTFB няма значение, но има. Това е основата на всичко останало. Ако имате потребители в градове с бавен интернет, колко бързо вашият уеб хост може да отговори ще означава всичко. Всеки уеб хост може да се представи добре, ако имате потребители предимно от градове със свръхбърз интернет.

Опитайте да тествате как вашият уеб хост ще реагира на 3G или 2G вместо на 4G. Защото, ако получите много потребители, които се свързват чрез 3G или 2G, това се добавя към резултата ви от Core Web Vitals. Така че всяка милисекунда е от значение. Разликата между получаването на 100ms във вашия FID и получаването на 101ms е, че със 100ms преминавате, но със 101ms се проваляте. Така че, ако някой ви каже, че 1 ms няма значение, този човек може просто да греши.

При бране на a уеб хост, винаги се уверявайте, че центърът за данни е по-близо до повечето потребители на вашия уебсайт. Можете да намерите местоположението им, като погледнете вашите анализи. Откъде идват повечето от вашите потребители? Изберете център за данни по-близо до тях. Колкото по-близо, толкова по-добре.

Лично забелязах значителна промяна в полевите данни на уебсайта на Core Web Vitals след смяна на уеб хоста. нищо друго не съм правил.

Ако търсите бърз уеб хост, има много препоръки, които се ръководят само от партньори без искреност. Ако използвате WordPress и можете да си го позволите, силно препоръчвам Kinsta. Те са най-добрите за WordPress. Ако имате нужда от нещо по-евтино или не използвате WordPress тогава Cloudways също е много ефективен.

2. Използвайте лека и оптимизирана за скорост тема

Този съвет е особено полезен за хора, които не програмират и дори за програмисти с по-малко време. Особено ако използвате WordPress, където има толкова много опции, уверете се, че използвате лека и оптимизирана за скорост тема.

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

Има дълъг списък с най-добри практики, които трябва да търсите в дадена тема. Някои от най-често срещаните лоши практики са прекалено зависими от JQuery, зареждане на твърде много CSS/JS, когато не са необходими, голям размер на темата и др. Винаги можете да използвате инструмент като Жълти лаборатории, за да тествате демонстрацията.

Ако използвате WordPress, можете да проверите списъка с най-бързите WordPress теми.

3. Оптимизирайте вашите изображения

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

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

Аз лично предпочитам да оптимизирам всяко изображение, преди да го кача. Не използвам външни услуги за оптимизация на изображения. Въпреки това, ако използвате WordPress или подобна CMS, има плъгини и решения за автоматично оптимизиране на изображения. Има и облачни решения, независимо от това какво използвате.

4. Премахнете или намалете размера на фоновите изображения

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

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

5. Използвайте кеширане на браузъра

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

За потребителите на WordPress повечето добавки за кеширане могат да ви помогнат да постигнете това.

6. Минимизирайте JavaScript и отложете неизползвания JavaScript

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

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

За потребителите на WordPress има добавки като Autoptimize, WP Rocketи други, които могат да направят това вместо вас.

7. Задайте атрибут за размер на AdSense

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

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

Най-добрият начин да се справите с това е да редактирате малко своя код на AdSense. Без притеснения, това е много законно. Просто посочете атрибута размер за рекламата, особено височината. След като направите това, вече няма да забелязвате промяна на оформлението, когато рекламата се зарежда.

По-долу е даден пример за адаптивен рекламен елемент, който използвах в моя блог точно под заглавката. Замених ИД на издател и рекламното си място с XXXXXX. Забелязах, че добавих атрибута за височина (min-height: 300px). В момента, в който го направих, всички проблеми с CLS изчезнаха завинаги.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header ad -->
<ins class="adsbygoogle"
     style="display:block; min-height: 300px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

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

8. Задайте атрибут за размер за вашите изображения и други медии

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

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

9. Мързеливо зареждане на изображения.

Може да сте видели съвета на PageSpeed ​​Insight за отлагане на изображения извън екрана. Това, което просто означава, е да зареждате вашите изображения мързеливо.

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

Това по-специално ще помогне за подобряване на LCP.

10. Оптимизирайте CSS чрез минимизиране и генериране на критичен CSS

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

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

Критичният CSS може да помогне, като зареди само CSS, който е необходим за зареждане на страницата. Докато останалата част от CSS може да се зарежда асинхронно.

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

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

Ако използвате WordPress, има добавки като WP Rocket, LiteSpeed ​​Cache, FlyingPress и други, които могат да ви помогнат да постигнете това.

11. Внедрете интелигентно зареждане на AdSense

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

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

Има много добавки за WordPress, които могат да ви помогнат да направите това, WP Rocket и Flying Scripts са пример. Този метод, доколкото знам, не нарушава правилата на Google AdSense.

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

12. Използвайте шрифта System Stack, ако можете

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

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

13. Използвайте CDN

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

CDN в просто обяснение прави много копия на вашия уебсайт и ги съхранява в различни точки на присъствие (POP) в различни части на света. Когато някой поиска вашия уебсайт, той обслужва вашия уебсайт от най-близкото местоположение.

Например, ако вашият сайт се хоства в Съединените щати и имате посетител от Обединеното кралство, вместо да извлича сайта ви от Съединените щати, CDN ще обслужва вашия сайт от Обединеното кралство. Ефектът от това ще бъде бърза доставка. Скорост.

Можете да проверите най-добрите CDN Там.

14. Настройте DNS предварително извличане

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

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

15. Оптимизирайте скриптове на трети страни

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

Можете да замените решение със заявки от трети страни, забавящи вашия сайт, с по-добро решение.

Когато става въпрос за Google AdSense, друг скрипт на трета страна, можете да направите малко. Най-добрата практика е да използвате максимум 3 реклами, обединени на една страница. Избягвайте съответстващо съдържание, тъй като носи нисък доход, но увеличава времето за зареждане.

16. Премахнете AdSense от горната част на екрана

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

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

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

17. Превключете към AMP

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

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

AMP страниците са постоянно по-бързи от мобилните или настолните страници, понякога с над 100% според нашите наблюдения.

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

Заключение

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

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