Скорост на сайта: защо е важна и как да я подобрим

Какво е скорост на сайта

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

Когато някой каже „сайтът е бавен“, той може да има предвид различни неща: белият екран преди да се появи нещо, снимката, която се зарежда последна, бутонът, който не реагира веднага, или текстът, който подскача, докато се появяват рекламите. Всеки от тези проблеми има различна причина и различно решение.

Скоростта зависи от целия път на страницата: от сървъра на хостинга, през мрежата, до устройството на посетителя. Ако искате да си припомните какво се случва при отваряне на адреса, вижте Какво е DNS и как работи и Какво е хостинг.

Защо скоростта е важна

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

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

Как се зарежда една страница

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

TTFB (Time To First Byte) е времето до първия байт от отговора на сървъра. Ако то е голямо, проблемът обикновено е в хостинга, кеша или кода на сайта, а не в снимките.

Core Web Vitals: показателите на Google

Core Web Vitals са три показателя на Google, които измерват реалното изживяване на посетителите: колко бързо се появява основното съдържание (LCP), колко бързо страницата реагира (INP) и колко стабилна е визуално (CLS).

Google измерва тези показатели при реални посетители с браузъра Chrome и ги показва в Search Console и PageSpeed Insights. Затова е важно сайтът да е бърз не само на вашия мощен компютър, а и на обикновен телефон с мобилен интернет.

Как да измерите скоростта

Използвайте безплатните инструменти PageSpeed Insights и Lighthouse на Google, както и отчета за Core Web Vitals в Search Console. Те показват резултата и конкретни препоръки.

Как да тествате правилно

• Тествайте няколко различни страници: началната, статия, продукт, количка.
• Гледайте резултата за мобилни устройства, а не само за компютър.
• Повторете теста няколко пъти. Резултатите варират.
• Запишете резултата преди промяна и сравнете след нея.
• Тествайте в частен прозорец, без разширения на браузъра.

Хостингът: основата на скоростта

Хостингът определя колко бързо сървърът отговаря. Нито една оптимизация на снимки няма да компенсира претоварен или остарял сървър.

Ако клиентите ви са основно в България, сървър в Европа обикновено дава по-кратко време за отговор от сървър на друг континент. Повече за видовете хостинг и кога да преминете към по-мощен план прочетете в Видове хостинг. Плановете на CometRiders ще намерите на страницата Хостинг.

Кеширане

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

Кеширането на браузъра се настройва с HTTP заглавки, например във файла .htaccess:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

Снимки и видео

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

• Правилен размер: ако снимката се показва широка 800 пиксела, не качвайте файл от фотоапарата, широк няколко хиляди пиксела.
• Компресия: намалете качеството леко. Разликата обикновено не се вижда, а файлът става многократно по-лек.
• Модерни формати: WebP и AVIF са по-леки от JPEG и PNG при същото качество.
• Мързеливо зареждане: атрибутът loading="lazy" отлага снимките, докато посетителят не стигне до тях.
• Главната снимка: не я зареждайте мързеливо. Тя е обикновено елементът на LCP и трябва да се появи първа.
• Размери: задавайте ширина и височина на всяка снимка, за да няма подскачане (CLS).
• Видео: вграждайте видео от платформа за видео или показвайте само картинка, която зарежда плейъра при кликване.

<img src="tort-shokolad-800.webp"
     width="800" height="600"
     alt="Шоколадова торта с ягоди"
     loading="lazy">

Тема, плъгини и скриптове

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

Подробно за избора на тема и плъгини писахме в Какво е WordPress. Златното правило е същото: по-малко, но по-добре.

Компресия, HTTP/2 и HTTP/3

Компресията (gzip или Brotli) намалява размера на текстовите файлове при изпращане, а HTTP/2 и HTTP/3 позволяват много файлове да се изтеглят паралелно по една връзка.

HTML, CSS и JavaScript са текст и се компресират много добре. Повечето съвременни сървъри включват компресията автоматично, но е добре да проверите в PageSpeed Insights дали няма препоръка „Активирайте компресията на текста“.

HTTP/2 и HTTP/3 работят само през HTTPS. Това е още една причина сайтът да има SSL сертификат. Подробно за сертификатите прочетете в Какво е SSL сертификат и на страницата SSL.

Пренасочванията също струват време

Всяко пренасочване е допълнителна заявка. Ако посетителят отваря http://firma.bg, после се пренасочва към https://firma.bg, а после към https://www.firma.bg, губи време за две излишни стъпки. Настройте едно директно пренасочване към крайния адрес и използвайте него във всички връзки.

CDN

CDN (Content Delivery Network) е мрежа от сървъри на различни места по света, които пазят копия на файловете на сайта и ги доставят от най-близкото до посетителя място.

CDN е особено полезен, когато имате посетители от различни държави или много тежки файлове като снимки и видео. За местен бизнес с посетители основно от една страна добрият хостинг наблизо често е достатъчен, но CDN може да помогне и с допълнителна защита и намаляване на натоварването на сървъра. Ще разгледаме CDN подробно в отделна статия.

База данни и PHP

При динамичните сайтове всяка страница изисква заявки към базата данни и изпълнение на PHP. Актуалната версия на PHP и подредената база данни правят сайта по-бърз.

• Актуален PHP: новите версии изпълняват кода по-бързо. Сменете версията от контролния панел след бекъп.
• Почистване на базата: стари ревизии на статии, спам коментари и временни данни натрупват ненужни редове.
• Автоматично зареждани настройки: някои изтрити плъгини оставят данни, които WordPress зарежда при всяка страница.
• Тежки заявки: плъгини за статистика и свързани статии понякога натоварват базата много.

Как се сменя версията на PHP описахме в Какво е контролен панел на хостинга, а защо е важно да е актуална, в статията за уязвимостите в PHP.

Шрифтове и външни услуги

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

Скорост на мобилни устройства

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

• Използвайте адаптивни снимки, които дават на телефона по-малък файл.
• Намалете JavaScript, защото той се изпълнява бавно на по-слаби устройства.
• Избягвайте изскачащи прозорци, които покриват съдържанието.
• Направете бутоните достатъчно големи и раздалечени.
• Тествайте на реален телефон с мобилни данни, не само в симулатор.

План за ускоряване на WordPress

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

1. Измерете: запишете резултатите в PageSpeed Insights за началната страница и една статия.
2. Бекъп: направете пълен бекъп преди всяка промяна.
3. PHP: преминете на актуална версия на PHP 8, ако още не сте.
4. Кеш: включете сървърния кеш или един плъгин за кеширане.
5. Снимки: оптимизирайте съществуващите и настройте автоматична оптимизация за новите.
6. Плъгини: изключете и изтрийте ненужните, проверете кои зареждат тежки файлове.
7. Тема: ако темата е тежка, изпробвайте лека тема на тестов поддомейн.
8. Външни услуги: премахнете ненужните джаджи и шрифтове.
9. База данни: почистете ревизиите, спама и остатъците от стари плъгини.
10. Измерете отново: сравнете с първоначалните резултати.

Примери от практиката

Ето три типични ситуации и какво реално помага във всяка.

Фотограф с бавно портфолио

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

Магазин с много плъгини

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

Блог с подскачащо съдържание

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

Чести грешки

Повечето проблеми със скоростта идват от няколко повтарящи се причини.

• Огромни снимки. Най-честата и най-лесно поправима причина.
• Няколко плъгина за кеширане наведнъж. Те си пречат и могат да счупят сайта.
• Гонене на 100 точки. По-важни са реалните показатели при посетителите.
• Тестване само на компютър. Посетителите са основно на телефони.
• Слайдер на началната страница. Тежък, бавен и рядко гледан докрай.
• Стар PHP. По-бавен и по-несигурен.
• Кеширане на количката. Опасно за данните на клиентите.
• Промени без бекъп. Оптимизацията може да счупи сайта.
• Евтин претоварен хостинг. Никоя оптимизация не компенсира бавен сървър.

Често задавани въпроси

Обобщение

Скоростта на сайта влияе на посетителите, продажбите и класирането в Google. Измерете я с инструментите на Google, следете трите показателя Core Web Vitals и започнете с промените с най-голям ефект: добър хостинг с актуален PHP, кеширане, оптимизирани снимки, лека тема и малко плъгини. Правете бекъп преди промени и проверявайте резултата след всяка. В следващата статия ще разгледаме CDN: какво е, как работи и кога ви трябва.