Бавният сайт се усеща още при първото отваряне на страницата. Ако се чудите как да ускорите WordPress, започнете с измерване, за да видите какво точно забавя сайта, вместо да инсталирате плъгини наслуки.
В това ръководство първо измерваме сайта с PageSpeed Insights. После минаваме през пет промени и след всяка проверявате дали е помогнала. Това са кеш на страниците, по-леки снимки, нов PHP, по-малко плъгини и Cloudflare. Накрая има чеклист.
Как да измерите колко бавен е сайтът
Отворете PageSpeed Insights, въведете адреса на страницата и натиснете Analyze. Проверете началната страница и поне още една, която носи клиенти, например страница с продукт или с контакти.
Резултатът има две части. Първата показва данни от реални посетители в Chrome за последните 28 дни. При нов сайт или при малко посещения тя може да липсва. Втората е тест с Lighthouse, който зарежда страницата в симулирана среда, отделно за мобилно устройство и за компютър.
Най-важни са трите показателя на Google, наречени Core Web Vitals. Оценяват се на 75-ия процентил от зарежданията, тоест поне три от всеки четири посещения трябва да са в добрата зона.
| Показател | Какво мери | Добро | Лошо |
|---|---|---|---|
| LCP | Кога се показва най-големият елемент на екрана, обикновено снимка или блок с текст | до 2,5 секунди | над 4 секунди |
| INP | Колко бързо сайтът реагира на клик, докосване и клавиш | до 200 милисекунди | над 500 милисекунди |
| CLS | Колко скача съдържанието, докато страницата се зарежда | до 0,1 | над 0,25 |
Към тях добавете и времето до първия байт (TTFB). То не е част от Core Web Vitals, но показва колко бързо сървърът започва да отговаря. Добрата стойност е до 0,8 секунди.
Как да ускорите WordPress с кеш на страниците
Без кеш WordPress изпълнява PHP и пита базата данни при всяко зареждане, за да сглоби страницата. Плъгинът за кеш запазва готовата страница като статичен файл и я показва на следващите посетители, без да повтаря тази работа. Според документацията на WordPress така натоварването на сървъра намалява.
Един плъгин за кеш е достатъчен. Кой точно, зависи от сървъра, затова първо проверете какъв е.
Кой плъгин да изберете
Командата изпраща заявка към сайта и показва само реда с името на сървъра. Пуснете я от компютъра си или, ако сте на Windows, от Terminal в cPanel.
# Компютър или cPanel > Terminal. Показва уеб сървъра на сайта.
curl -sI https://primer.bg/ | grep -i '^server:'
Ако видите LiteSpeed, изберете LiteSpeed Cache. Ако видите nginx или Apache, изберете общ плъгин от таблицата по-долу. Ако видите cloudflare, сайтът е зад Cloudflare и заглавието не показва сървъра зад него, затова попитайте хостинга си.
| Плъгин | Какво да знаете |
|---|---|
| LiteSpeed Cache | Кешът на страниците му изисква LiteSpeed или услугата QUIC.cloud. Останалите му настройки работят на всеки сървър. |
| WP Super Cache | Прави статични HTML файлове. Авторът е Automattic, а препоръчаният режим Simple не променя .htaccess. |
| W3 Total Cache | Кешира страниците, кешира файловете в браузъра и се свързва с CDN. |
| WP Fastest Cache | Има безплатна и платена версия, като част от функциите са само в платената. |
| Cache Enabler | Записва готовите страници като статични HTML файлове на диска. |
Ако нямате предпочитания, WP Super Cache в режим Simple е лесно начало, защото не променя .htaccess.
Как да го включите и да проверите дали работи
Направете бекъп на сайта преди промяната. После отворете менюто Plugins, изберете Add New, потърсете плъгина и натиснете Install Now и Activate. Оставете настройките по подразбиране и разгледайте сайта в частен прозорец, за да го видите като посетител.
Минимизирането и обединяването на CSS и JS файлове понякога разваля външния вид. Включвайте тези опции една по една и след всяка отваряйте сайта. Ръководството на LiteSpeed показва как да откриете файла, който създава проблема.
При магазин с WooCommerce страниците Cart, Checkout и My Account (количка, плащане и профил) не бива да се кешират, защото показват данни на конкретния клиент. Много плъгини ги изключват сами, но все пак проверете.
За да видите дали кешът работи, измерете времето до първия байт два пъти подред.
# Компютър или Terminal. Пуснете го два пъти, втората стойност е по-малка.
curl -s -o /dev/null -w "%{time_starttransfer}\n" https://primer.bg/
# Само за LiteSpeed Cache. При второто зареждане трябва да върне hit.
curl -sI https://primer.bg/ | grep -i '^x-litespeed-cache:'
Първото зареждане след включване на кеша е по-бавно, защото плъгинът още записва страницата. Ако и двете стойности са високи, кешът не работи.
Как да направите снимките по-леки
WordPress създава няколко по-малки копия на всяка качена снимка и оставя браузъра да избере подходящото за екрана. Въпреки това няма смисъл да качвате оригинал с размери, които никой екран няма да покаже. Започнете, като проверите кои снимки са най-тежки.
# cPanel > Terminal, в папката на сайта. Само чете, нищо не променя.
find wp-content/uploads -type f -size +500k -exec du -h {} + \
| sort -rh | head -n 20
Командата показва до двадесет файла над 500 KB, като най-големите са първи. Намалете тези снимки до ширината, в която се показват на най-широкия екран, и ги качете наново.
Следващата стъпка е форматът. WordPress приема WebP от версия 5.8, а според екипа на WordPress WebP файловете са средно около 30% по-малки от JPEG и PNG. Ако сървърът не поддържа WebP, WordPress връща грешка при качване и тогава трябва да попитате хостинга.
За новите снимки ползвайте плъгина Modern Image Formats на екипа по производителност на WordPress, който добавя поддръжка на WebP и AVIF при качване.
За снимките, които вече са в библиотеката, ползвайте плъгин за оптимизация, например EWWW Image Optimizer или ShortPixel. EWWW конвертира цялата библиотека в WebP наведнъж. ShortPixel изисква акаунт и дава ограничен брой безплатни кредити на месец. Един плъгин за снимки е достатъчен.
WordPress сам прави отложено зареждане (lazy loading). От версия 5.5 той добавя loading="lazy" към снимките в съдържанието, които имат зададени width и height, така че не Ви трябва отделен плъгин за това.
Снимката, която се вижда веднага при отваряне на страницата, обаче не бива да се зарежда отложено. От версия 6.3 WordPress сам отбелязва най-вероятната LCP снимка с fetchpriority="high" и не отлага зареждането ѝ.
Ако темата или конструкторът на страници извежда снимките със собствен код, правилото може да не важи. Отворете страницата, от менюто с десния бутон изберете View page source и потърсете loading="lazy" до първата голяма снимка.
Каква PHP версия ползва сайтът и трябва ли да я смените?
PHP е езикът, на който работи WordPress. Според документацията на WordPress новите версии на PHP обикновено са по-производителни, а страницата на WordPress за обновяване на PHP добавя, че сайтът може да стане по-бърз и по-защитен.
Проверете версията през Tools, Site Health, раздела Info и секцията Server. WordPress препоръчва PHP 8.3 или по-нова. Най-старата версия, с която още работи, е PHP 7.4, но тя вече не се поддържа и според WordPress може да изложи сайта на уязвимости.
Всяка версия на PHP получава две години пълна поддръжка и още две години само поправки за сигурност. Затова версията, която е нова днес, след няколко години ще остарее и ще трябва да я смените отново.
Преди промяната направете бекъп, обновете WordPress, темата и плъгините и проверете дали сайтът работи. Как се сменя версията в cPanel, е описано стъпка по стъпка в ръководството Нова PHP версия за WordPress в cPanel, без да счупите сайта.
След смяната отворете началната страница, входа и една страница с форма. Ако се появи грешка, върнете старата версия и проверете кой плъгин или тема създава проблема.
Как да откриете плъгина, който бави сайта
Една от първите мерки в документацията на WordPress е да деактивирате и изтриете ненужните плъгини. Според нея броят на плъгините и качеството им силно влияят на скоростта.
Отворете Plugins, после Installed Plugins, и за всеки плъгин се запитайте дали сайтът би работил без него. Списъците с неактивните плъгини и теми са и в Tools, Site Health, раздела Info.
Ако плъгинът Ви трябва, но подозирате, че бави сайта, инсталирайте Query Monitor. Той показва бавните и повтарящите се заявки към базата данни, групирани по плъгин или тема, и заявките към външни адреси с времето, което са отнели. Отворете бавната страница, докато сте влезли като администратор, и вижте кой компонент стои зад най-много и най-бавни заявки. След проверката деактивирайте Query Monitor.
Не изключвайте плъгини на живия сайт само за да видите разликата. Направете го на копие в поддомейн, както е описано в ръководството за бекъп.
Как Cloudflare помага като CDN?
CDN държи копия на статичните файлове, тоест снимки, стилове и скриптове, в центрове за данни по-близо до посетителите. Според документацията на Cloudflare така намалява натоварването на сървъра и сайтът се зарежда по-бързо.
По подразбиране Cloudflare кешира файловете по разширение, като снимки, шрифтове, CSS и JS, но не кешира HTML и JSON. Затова кешът на страниците от плъгина остава нужен. Документацията на WordPress също казва, че CDN работи най-добре заедно с плъгин за кеш.
Безплатният план на Cloudflare също включва CDN, затова можете да започнете с него.
След промяна на снимка или стил Cloudflare може още известно време да връща старата версия. В таблото му отворете Caching, после Configuration и секцията Purge Cache. Purge Everything изчиства всичко и след това всяка заявка стига до сървъра Ви, затова, ако е възможно, изчистете само променените адреси.
Чеклист
- LCP, INP и CLS на мобилния резултат са записани преди първата промяна.
- Има бекъп на сайта преди промените.
- Работи един плъгин за кеш, а второто измерване на времето до първия байт е по-малко от първото.
- Ако има магазин, страниците Cart, Checkout и My Account не са в кеша.
- Най-тежките снимки са намалени или заменени с WebP.
- Първата голяма снимка на страницата няма
loading="lazy". - Сайтът работи на PHP 8.3 или по-нова версия.
- Ненужните плъгини са деактивирани и изтрити.
- Резултатът е измерен отново и е сравнен със старите числа.
Трябва ли Вие да правите всичко?
Ако LCP, INP и CLS на мобилния резултат вече са в добрата зона, няма какво да ускорявате. Измервайте отново след по-голяма промяна, например смяна на темата.
Ако числата остават лоши и след кеша, снимките и новия PHP, обърнете внимание на хостинга. Документацията на WordPress посочва, че процесорът, паметта и типът дискове влияят на скоростта и че преминаването към SSD или NVMe може да има голям ефект.
Ако не искате да се ровите в това, при ускоряването на WordPress работим по кеша на няколко нива, базата, изображенията и Core Web Vitals и мерим преди и след, където и да е хостнат сайтът. Ако проблемът се окаже в самия хостинг, преместването на собствен сървър е следващата стъпка.
Често задавани въпроси
Откъде да започна, ако искам да ускоря WordPress?
Започнете с измерване, за да видите какво наистина е бавно, вместо да слагате плъгини напосоки. Отворете PageSpeed Insights, проверете началната страница и поне още една, която Ви носи клиенти, и запишете трите числа от резултата за мобилно. Lighthouse дава различни числа при всяко пускане, затова пуснете теста няколко пъти и вземете средния резултат.
Какви са добрите стойности на LCP, INP и CLS?
LCP, моментът, в който се появява най-големият елемент на екрана, е добър до 2.5 секунди. INP, колко бързо сайтът реагира на щракване или докосване, е добър до 200 милисекунди, а CLS, колко подскача съдържанието при зареждане, е добър до 0.1. Стойностите се оценяват при 75-ия персентил, тоест поне три от всеки четири посещения трябва да са в добрия диапазон.
Кой плъгин за кеш да избера за WordPress?
Зависи от сървъра. Ако заглавката server показва LiteSpeed, изберете LiteSpeed Cache, а ако показва nginx или Apache, изберете общ плъгин като WP Super Cache, W3 Total Cache или Cache Enabler. Ако нямате предпочитание, WP Super Cache в режим Simple е лесно начало, защото не променя .htaccess, а един плъгин за кеш стига.
Кои страници на WooCommerce не бива да се кешират?
Количката, поръчката и страницата My Account, защото показват данните на един конкретен клиент. Много плъгини за кеш ги изключват сами, но проверете в настройките.
Как да направя изображенията в WordPress по-леки?
Качвайте изображенията с размера, в който се показват на най-широкия екран, и във формат WebP, който WordPress приема от версия 5.8. Според екипа на WordPress файловете WebP са средно с около 30% по-малки от JPEG и PNG. За изображенията, които вече са в библиотеката, ползвайте един плъгин за оптимизация, например EWWW Image Optimizer или ShortPixel.
Трябва ли ми плъгин за lazy loading?
Не. От версия 5.5 WordPress сам добавя loading="lazy" към изображенията в съдържанието, които имат зададени ширина и височина. От версия 6.3 WordPress отбелязва изображението, което най-вероятно е LCP, с fetchpriority="high" и не го зарежда отложено. Ако темата или редакторът на страници изписва изображенията със свой код, правилото може да не важи, затова проверете кода на страницата.
Как да намеря плъгина, който забавя WordPress?
Инсталирайте Query Monitor, отворете бавната страница като администратор и вижте кой плъгин или тема стои зад най-много и най-бавни заявки към базата и външните адреси. След проверката деактивирайте Query Monitor. Не изключвайте плъгини на живия сайт само за да видите разликата, а го правете на копие в поддомейн.
Стига ли Cloudflare вместо плъгин за кеш?
Не. По подразбиране Cloudflare кешира файлове по разширение, като изображения, шрифтове, CSS и JS, но не кешира HTML и JSON, затова кешът на страниците от плъгина пак е нужен. Документацията на WordPress също казва, че CDN работи най-добре заедно с плъгин за кеш, а безплатният план на Cloudflare включва CDN.
Източници
- web.dev, Web Vitals
- web.dev, Largest Contentful Paint (LCP)
- web.dev, Interaction to Next Paint (INP)
- web.dev, Cumulative Layout Shift (CLS)
- web.dev, Time to First Byte (TTFB)
- Google, About PageSpeed Insights
- Lighthouse, Variability
- WordPress, WordPress Optimization
- WordPress, Requirements
- WordPress, Update PHP
- WordPress, Site Health screen
- WordPress, Responsive Images
- WordPress, Plugin Uninstall Methods
- WordPress Core, Lazy-loading images in 5.5
- WordPress Core, WordPress 5.8 adds WebP support
- WordPress Core, Image performance enhancements in WordPress 6.3
- PHP, Supported Versions
- WooCommerce, Configuring caching plugins
- LiteSpeed, Troubleshooting Guide
- LiteSpeed, CSS/JS Issues
- WordPress.org plugins, LiteSpeed Cache, WP Super Cache, W3 Total Cache, WP Fastest Cache, Cache Enabler
- WordPress.org plugins, Modern Image Formats, EWWW Image Optimizer, ShortPixel Image Optimizer, Query Monitor
- Cloudflare, Cache overview
- Cloudflare, Default cache behavior
- Cloudflare, Purge everything