Тъй като скоростта на страницата се превръща във важен показател както за SEO, така и за UX през годините, концепцията за a бюджет за уеб ефективност също излезе на преден план. Вече е по-очевидно, че представянето в мрежата е тема, която изисква споделена гледна точка във всички отдели, а не просто да бъде приоритет на отделен отдел или индивид.

За да обясня това с пример: маркетинг отделите може да искат да внедрят преобразуване и кодове за ремаркетинг/пренасочване, заедно с инструменти като Criteo и RTB House, които използват продуктово базирано пренасочване. Те също могат да очакват привличащи вниманието снимки и анимации. Междувременно продуктовите отдели могат да поискат интегрирането на инструменти като Hotjar и Clarity. Софтуерните отдели, от друга страна, се стремят да се развиват възможно най-бързо както във фронтенда, така и в бекенда. Търсенето и разходите, свързани с тези изисквания към скоростта на страницата, всъщност са в баланс. Бюджетът за уеб ефективност се появи, за да установи този баланс ефективно.

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

 

образ-5.png
Източник: https://wp-rocket.me/blog/performance-budgets/

 

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

  • Може ли началната страница да се отвори в под 2 секунди при бърза 3G мобилна връзка (1.6 Mbps)?
  • Може ли страницата с резултати от търсенето да се отвори в под 5 секунди при бавна 3G връзка (780 Kbps)?

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

Освен предложения, може да има и други бюджетни цели за изпълнение. Например:

  • Увеличаване на мобилния Lighthouse оценка на страницата с подробности над 80
  • Намаляване на размера на всички изображения на сайта за настолни компютри до под 500 KB

Бюджетни показатели за изпълнение

Има три различни гледни точки, приети за определяне на показателите на бюджета за ефективност:

Базирани на числа показатели

  • Максимален брой шрифтове / Максимален размер на шрифта
  • Максимален брой изображения / Максимален размер на изображението
  • Максимален брой скриптове, стилове, видеоклипове и т.н. / Максимален размер на скрипт, стил, видеоклип и т.н.
  • Максимален HTML размер
  • Максимален брой HTTP заявки
  • Максимален брой скриптове на трети страни

 

образ-7.png
Източник: https://web.dev/vitals/

 

Метрики, базирани на времето

  • Първо време за рисуване със съдържание (FCP).
  • Най-голямо време за боядисване на съдържание (LCP).
  • Време за закъснение при първо въвеждане (FID).
  • Време до интерактивно време (TTI).
  • Общо време на блокиране (TBT).
  • Кумулативен резултат за изместване на оформлението (CLS).
  • Резултат от индекса на скоростта

Метрики, базирани на правила

  • Лайтхаус резултат
  • GTmetrix резултат
  • Резултат от теста на уеб страницата
  • Yslow резултат
performance-budget-calculator.png
Източник: https://www.performancebudget.io/

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

Оценете отделно типовете страници

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

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

  • Homepage
  • Статични страници със списъци
  • Страници с динамични списъци
  • Страници с подробности
  • Страници за поръчка
  • Страници с резултати от търсенето
  • Страници на кампанията
  • Страници в блогове

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