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

Защо скоростта има значение

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

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

Core Web Vitals с прости думи

Google измерва изживяването на страницата с три основни показателя, наречени Core Web Vitals. Граничните стойности за „добро“ са:

• LCP (Largest Contentful Paint) ≤ 2,5 секунди — колко бързо се показва най-големият елемент в първия екран, обикновено голямата снимка или заглавието.
• INP (Interaction to Next Paint) ≤ 200 милисекунди — колко бързо страницата реагира, когато натиснете бутон или отворите меню. INP замени по-стария показател FID през март 2024 г.
• CLS (Cumulative Layout Shift) ≤ 0,1 — колко „скача“ съдържанието, докато се зарежда. Класическият пример: искате да натиснете връзка, а в последния момент отгоре се зарежда банер и натискате нещо друго.

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

Снимките — най-честият виновник

В повечето малки сайтове снимките са по-голямата част от изтегляните данни. Снимка, качена направо от телефона или фотоапарата, може да е няколко мегабайта, а да се показва в карэ с ширина 400 пиксела.

• Преоразмерете снимките до размера, в който реално се показват (с резерв за екраните с висока плътност).
• Използвайте WebP или AVIF — обикновено дават значително по-малки файлове от JPEG при сходно качество.
• Слагайте loading="lazy" на снимките под първия екран, но не и на главната снимка най-горе — тя трябва да тръгне веднага.
• Задавайте width и height на всяка снимка, за да резервира браузърът място и съдържанието да не скача (това подобрява CLS).
• Не слагайте слайдер с десет огромни снимки в началото. Една добре подбрана снимка работи по-добре.

Шрифтовете

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

• Използвайте два шрифта най-много и само начертанията, които наистина ползвате.
• Зареждайте само нужните азбуки (subset) — например латиница и кирилица, без гръцки и виетнамски.
• Задайте font-display: swap, за да се покаже текстът веднага със системния шрифт, а избраният да се появи, щом се зареди.
• Ако е възможно, хоствайте шрифтовете на собствения си сайт вместо от външен сървър — така се спестява допълнителна връзка.

Чуждите скриптове: тихите крадци на скорост

Чат прозорец, вградена карта, видео от YouTube, бутони за споделяне, няколко системи за статистика, пиксел за реклами — всяко от тях е код, който се изтегля от чужд сървър и работи на телефона на посетителя. Често именно те, а не самият сайт, развалят INP.

• Направете списък на всички външни скриптове и попитайте за всеки: кой гледа данните от него и кога за последно?
• Махнете всичко, което никой не ползва. Няма нужда от три системи за статистика.
• Картите и видеата могат да се заменят с картинка, която зарежда истинското съдържание едва при натискане.
• Чатът може да се зарежда след няколко секунди или при първото действие на посетителя, а не веднага.

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

Кеширане, CDN и хостинг

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

При сайтове на WordPress и подобни системи страницата често се сглобява от базата данни при всяко отваряне. Добър кеширащ модул или хостинг, който го предлага, прави голяма разлика. Евтиният споделен хостинг е напълно достатъчен за малък сайт, но ако сървърът отговаря бавно още преди да е изпратил нещо, никаква оптимизация на снимките няма да помогне. Повече за избора — в статията за архивите и хостинга.

Плъгините

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

• Премахвайте (не само деактивирайте) плъгините, които не ползвате.
• Избягвайте два плъгина за едно и също нещо.
• Преди да добавите нов плъгин, проверете дали темата или системата вече не правят същото.
• Обновявайте редовно — освен за сигурност, новите версии понякога са и по-бързи.

Как да измервате и месечен списък

Безплатните инструменти са достатъчни. PageSpeed Insights показва и лабораторен тест, и данни от истински посетители (ако сайтът има достатъчно трафик). Lighthouse е вграден в Chrome и дава подробни препоръки. Не гонете 100 точки — целта е зелените стойности на Core Web Vitals и сайт, който се усеща бърз. И винаги отваряйте сайта и от обикновен телефон, с мобилни данни.

Отделяйте по 20–30 минути веднъж месечно:

1. Пуснете PageSpeed Insights за началната страница и за една-две от най-посещаваните.
2. Проверете новите снимки, качени през месеца: размер и формат.
3. Прегледайте списъка с външни скриптове — добавено ли е нещо ново?
4. Обновете системата, темата и плъгините (след като имате свеж архив).
5. Отворете сайта от телефон с мобилни данни и изпълнете основното действие — обаждане, запитване, резервация.
6. Запишете резултатите, за да виждате кога нещо се е влошило.

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