„Ако можех просто да махна с вълшебна пръчка и да имам супер бърз уебсайт!“ Това вероятно е минало през ума Ви, нали? Оптимизирането на скоростта на сайта и потребителското изживяване е много работа и става все по- сложно изпълнимо технически. Повечето собственици на сайтове или мениджъри трябва често да анализират и следят рейтинга на своите сайтове и да възлагат на разработчиците задачи за своевременно оптимизиране. Сега новите показатели на Core Web Vitals ви дават повече информация и указания за това какво да коригирате. Нека разгледаме пет неща, които можете да направите, за да подобрите резултата си от Core Web Vitals.
Първо, отказ от отговорност
Няма едно единствено нещо, което гарантирано да коригира един конкретен проблем. Трябва да имате по-широк поглед върху оптимизирането на вашия сайт. Много малки поправки понякога водят до големи резултати.
Това, което ви дава Google, е вникване в това, което забавя нещата или какво вреди на потребителското изживяване. Много инструменти също дават съвети как да коригирате нещата. Web.dev/measure, например, не дава задълбочени резултати, но ви дава представа какво е въздействието на конкретна корекция.
Ние публикувахме вече статия за потребителското изживяване, така че можете да започнете от тук, ако се нуждаете от повече информация.
През годините постоянно се говори за значението на скоростта на сайта и потребителското изживяване. Но въпреки че има много материал за това как да оптимизирате сайта си, прилагането на тези знания е трудно. През последните няколко месеца Google за пореден път постави скоростта на първо място наред с актуализацията за “изживяването” на страница, която ще бъде актуална през следващата година. За да ви помогне да се подготвите за това, той разработи инструменти, които да ви дадат ясна представа за това и много документация за четене.
По повечето въпроси – съветите не са се променили много. Всичко се свежда до това вашите потребители да могат да стигнат до основното съдържание възможно най-бързо. Преминете през теста, за да видите как се представя вашия сайт, опитайте се да поставите приоритет на поправките и започнете! По-долу ще ви покажем комбинация от стари и нови начини за подобряване на вашия сайт, за да подобрите основните си Core Web Vitals.
Пет неща, които вие или вашият разработчик можете да направите:
Оптимизирайте вашите изображения
Ще започнем този списък със старото златно правило: оптимизиране на изображенията. Едно от най-важните неща, които можете да направите за вашия сайт е правилното оптимизиране на вашите изображения. Да, казвали сме това милион пъти, но ще го кажем отново: направете го. Това голямо неоптимизирано изображение на вашата начална или целева страница може да ви навреди. Големите изображения често са най-голямата съдържателна “картина” (LCP) за всеки даден сайт. Уверете се, че приветствате посетителите си, като ги направите да зареждат бързо!
Но накратко, уверете се, че ги “сервирате” в необходимия размер и ги компресирате добре. Има много инструменти, които да ви помогнат да направите това. Пример за такъв инструмент е squoosh.app. Не мислете, че трябва да поддържате такава масивна разделителна способност, за да бъде изображението ви с добро качество на най-често срещаните екрани.
Също така се опитайте да приемете модерните формати като WebP. Тези формати могат да предоставят висококачествени изображения с по-малък размер. WebP е добре поддържан, дори и от Apple! Предстоящата версия на Safari 14 – както на MacOS, така и на iOS – ще поддържа WebP. Също така и новият браузър на Microsoft Edge – Chromium също поддържа WebP.
Вашият CMS е също инструмент, който ще ви помогне да подобрите зареждането на изображения.От август WordPress 5.5 ще поддържа “lazy loading” на изображения. Това означава, че ще зарежда само онези изображения, които се появяват на екрана и ще остави останалите да се зареждат, чак когато потребителят взаимодейства с останалата част от екрана.Това казва на браузъра да зарежда големи изображения само когато са необходими.
Друго старо, но винаги актуално правило за скоростта на сайтове е използването на CDN, но знаете ли, че можете също да използвате CDN специално за изображения? Изображение с CDN ви дава повече контрол върху това за какво искате да служи то и как искате да се показва. Едно CDN изображение, получава низ от свойства в URL адреса си, които казват на браузъра как то трябва да се държи.
Стабилизирайте зареждането, като определите място за изображения и други подобни
Един от новите показатели е кумулативното изместване на оформлението или CLS за по-кратко. Пример за това е, когато мобилна страница изглежда готова и точно когато искате да натиснете бутон, съдържанието се измества и на това място се появява бавна зареждаща реклама. Това се случва често и е една от основните причини за неудовлетвореност на потребителите. Сега, докато оптимизирате вашия CLS, вашата страница няма задължително да стане по-бърза, но със сигурност ще се усеща по-бърза.
CLS се причинява от изображения без размери в CSS. Тя може да бъде причинена от реклами и вграждания без размери или динамично имплементирано съдържание. Когато не са правилно зададени размери, тези елементи са склонни да отскачат по време на процеса на зареждане, което го прави да изглеждат резки и нестабилни. Това може да се дължи и на това, че ново съдържание се вмъква над съществуващото. Не правете това, освен може би след изрично взаимодействие от страна на потребителя.
Един от начините да подобрите Core Web Vitals и да предотвратите CLS е като добавите ширина и височина на изображенията в CSS. По този начин браузърът ще запази място за изображението, което вероятно ще се появи по-късно от текста. Трептенето ще изчезне, защото браузърът ще знае, че нещо ще бъде добавено след известно време. Бихте могли да помислите за добавяне на някакъв заместител с ниска разделителна способност, ако искате някой път да се появи бързо.
Затова просто се уверете, че вашите изображения имат зададени атрибути с подходяща ширина и височина. Разбира се, можете да направите това и с обикновени респонзив изображения. Просто се уверете, че използвате една и съща пропорция за всички размери.
За да се справите със скачащите реклами или вмъкнатото съдържание, моля, запазете място и за тях. В крайна сметка вашия CLS може просто да слезе малко.
Ускорете вашия сървър, за да намалите времето за зареждане
Колкото по-бързо вашият сървър отговаря на заявките, толкова по-добре. Бързият отговор директно подобрява много показатели за скоростта на сайта ви. На сложните сайтове сървърът е зает с обработката на заявки и обслужването на файлове и скриптове, така че е най-добре да оптимизирате тези процеси.
Оптимизирането на вашия сървър се състои от няколко части.
- Първо, надстройте вашия хостинг план. Не спестявайте от хостинг. Изберете такъв, който предлага добри резултати на справедлива цена.
- Използвайте най-нова версия на PHP!
- Надстроите хардуера.
- Проучите как работят вашите бази данни и вижте дали можете да направите подобрения. Използвайте инструменти като Query Monitor WordPress плъгин, за да продължите да анализирате заявките на вашия сайт.
Можете също така да разгледате как сървърът ви изпраща файлове към клиенти. Има няколко начина за подобряване на този процес, като например rel = preload например, или HTTP / 2 push сървър. Това са по-модерни решения, които ви позволяват да прецизирате как вашият сървър отговаря на заявките. И тук, CDN може да направи чудеса за подобряване на вашите Core Web Vitals.
Оптимизирайте CSS, HTML и Javascript файловете
Когато браузърът зареди страница, той трябва да получи HTML, да го разбере, да получи CSS, отново да го разбере, да получи JavaScript и пак да го разбере, и т.н., и т.н. Колкото повече файлове трябва да зареди вашия сайт и колкото са по-големи те, толкова по-бавно ще се зарежда сайта ви.Често, докато браузърът е зает да обработва заявки, той не може да зарежда нещата на заден план. Определени елементи блокират процеса. Така наречените блокиращи визуализация JavaScript и CSS влияят на всичко.
Тъй като CSS се зарежда късно, често може да отнеме известно време част от съдържанието на сайта да се зареди на екрана. Като вземете критичните битове на вашия дизайн – частта, която се появява над сгъването, извън основния CSS файл и го вмъкнете във вашия код, можете да получите нещо на екрана много по-бързо. Поправянето на това отново не прави вашия сайт по-бърз, но го прави да изглежда така. Всичко това е за едно първокласно потребителско изживяване.
За да получите набор от критични CSS, можете да изберете от редица инструменти или да го направите на ръка. В допълнение можете да използвате WordPress кеширащи приставки като WP Rocket. WP Rocket има прост бутон, наречен Оптимизиране на доставката на CSS. Активирането на това помага да се премахне блокирането на визуализация CSS и да се подобри зареждането на вашия сайт. Разбира се, WP Rocket прави и други готини неща като минимизиране на CSS и JavaScript и отлагане на зареждането на JavaScript.
Подобрете зареждането на скриптове на трети страни
За много сайтове забавянето идва и отвън. Ако например вашият сайт разчита на рекламни скриптове, вие по същество сте в ръцете на рекламния доставчик. Можете само да се надявате, че те правят рекламите си ефективни. Ако рекламите им се зареждат наистина бавно, може би е време да намерите друг доставчик.
Ако откриете, че скриптове на трети страни забавят вашия сайт, трябва да разгледате това. Запитайте се, наистина ли имате нужда от тази конкретна реклама? Каква е стойността на тези скриптове? Там може да има различна опция, която е малко по-оптимизирана и по-малко стресираща за вашия сървър. Може би трябва да пробвате това?
Ако е възможно, можете сами да експериментирате с хостинг на скрипта. По този начин вие контролирате малко повече процеса на зареждане. Ако не можете да направите това, вижте дали можете да го накарате да се зареди по-бързо.
Най-малкото, не забравяйте да заредите скриптовете асинхронно или да ги отложите до последния момент. По този начин браузърът може първо да изгради страницата, преди да получи и стартира външния скрипт. Използвайте async, ако скриптът, който зареждате, е важен, като аналитичен скрипт. Можете да използвате отлагане за по-малко критични ресурси. Има много документация за оптимизиране на скриптове на трети страни.
Подобряване на Core Web Vitals: Всички малки подобрения се броят
С предстоящата актуализация на изживяването на страниците Google отново поставя скоростта на сайта и потребителското изживяване на първо място. Винаги сме гледали на SEO цялостно – има много движещи се части и трябва да работите върху всички тях, за да създадете най-добрия сайт. Въпреки че съветите, споменати по-горе, могат да ви помогнат да подобрите тези резултати на Core Web Vitals, добре е и да правите това, за да предложите на посетителите си по-добро потребителско изживяване.
