Изображения, PHP и други подобрения в скоростта

Модул 6: Скорост · Време за четене: 9 минути

Учебна цел: След този урок ще можете да приложите най-значимите останали подобрения в скоростта и да измерите техния ефект.

Ключови понятия: оптимизация на изображения, WebP и AVIF, lazy loading, LCP изображението, fetchpriority, PHP версия, почистване на базата данни (версии, transients, autoload), WP-Cron, истински cron, DISABLE_WP_CRON, външни шрифтове, Heartbeat

Работете в правилния ред

След кеш на страниците (урок 6.2), това са подобренията, които носят най-много полза, приблизително подредени по съотношение усилие към ефект:

1. изображенията са в ред;
2. актуална PHP версия;
3. по-малко външни елементи и тежки разширения;
4. почистена база данни;
5. планирани задачи на истински cron.

Измервайте преди и след всяка стъпка (урок 6.1), иначе няма да знаете какво е помогнало. И правете едно нещо наведнъж.

Изображения: най-голямата полза в браузъра

На повечето страници изображенията са най-голямата част от това, което посетителят изтегля. Това, което научихте в урок 4.4, тук си заслужава:

• Правилен размер: не качвайте по-голямо от необходимото и оставете WordPress да предлага по-малки размери чрез srcset.
• Компресия и формат: WebP обикновено е значително по-малък от JPEG при еднакво качество; AVIF често е още по-малък. Разширение може да преобразува съществуващите изображения и да подаде по-малката версия на браузърите, които я поддържат. Проверете дали преобразуването става на Вашия собствен сървър или при външна услуга.
• Lazy loading, но не за всичко. WordPress автоматично задава на изображенията loading="lazy", с изключение на първото голямо изображение в горната част. Това изображение често е LCP елементът (урок 6.1): най-голямата част от съдържанието, която посетителят вижда първа. Ако то се зарежда забавено (lazy), браузърът изчаква именно с него и Вашият LCP се влошава. Затова WordPress често дава на LCP кандидата fetchpriority="high", за да може браузърът да го изтегли пръв.

<img src="hero-1536x864.webp" width="1536" height="864"
     fetchpriority="high" alt="Работилница с подредени велосипеди">
<img src="team-768x512.webp" width="768" height="512"
     loading="lazy" alt="Екипът пред магазина">

Един капан: някои теми, конструктори на страници и разширения за оптимизация поставят lazy loading и на първото изображение, или зареждат голямото изображение като фон чрез CSS (което се открива по-късно). В PageSpeed Insights в частта за LCP виждате кой елемент е това и дали се зарежда забавено.

PHP: безплатна скорост

Всяка нова голяма версия на PHP е по-бърза от предишната и WordPress сайтовете се възползват от това директно, без да променяте нищо по Вашия сайт. Освен това старите версии вече не получават актуализации за сигурност (урок 8.4). Ако преминавате към нова версия, проверете дали Вашите разширения и тема я поддържат и направете го първо в тестова среда (staging), ако е възможно.

Погледнете в PHP настройките също и:

• OPcache: при повечето хостинг доставчици е включен по подразбиране. Последица: може да отнеме известно време, преди PHP да започне да използва променен PHP файл.
• memory_limit: твърде ниска стойност предизвиква грешки при тежки страници; твърде висока не прави сайта Ви по-бърз.

Външни елементи и тежки разширения

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

• Необходим ли е? Видео, което почти никой не пуска, може да бъде заменено с изображение с линк.
• Може ли локално? Шрифтовете обикновено можете да поставите на собствения си сървър (с разширение или чрез theme.json при блок тема). Това спестява връзка и е по-добре за Вашата поверителност (урок 9.3).
• Може ли по-късно? Чат уиджет или видео може да се зарежда едва след клик.

При разширенията помага измерване с X-Ray (при хостинг с CloudLinux) или с разширение като Query Monitor (включете временно, видимо само за администратори). Те показват кое разширение отнема най-много заявки към базата данни или време.

Почистване на базата данни

Базата данни расте с неща, които не виждате:

• Версии (урок 4.1): всяка запазена версия на всяка страница. Ограничете ги с WP_POST_REVISIONS и изчистете старите.
• Спам и коментари в кошчето, и публикации в кошчето.
• Transients: временни данни от разширения в wp_options, които понякога не се изчистват.
• Autoload: опции в wp_options с включен autoload се зареждат наведнъж при всяка заявка. Разширения, които отдавна сте премахнали, понякога оставят там големи количества данни. Състояние на сайта (урок 5.4) предупреждава, ако autoload данните са твърде големи.
• Таблици с логове на разширения (статистики, логове за сигурност, имейл логове), които никога не се изчистват.

Почистването може да стане с разширение за почистване, с WP-CLI (wp transient delete --expired, wp post delete $(wp post list --post_type=revision --format=ids) --force), или с функцията за оптимизация на phpMyAdmin за самите таблици. Винаги първо резервно копие. Не премахвайте нищо, за което не знаете какво е.

Планирани задачи: WP-Cron

WordPress има задачи, които трябва да се изпълнят в определен момент: публикуване на планирана публикация, проверка за актуализации, работа на разширение за резервни копия. Това се нарича WP-Cron. По подразбиране WP-Cron не работи по часовник, а при посещение: при всяка заявка за страница WordPress проверява дали има задача, готова за изпълнение. Два недостатъка:

• При малко посетители задачите се изпълняват твърде късно (планирана публикация се появява едва при първото посещение след планираното време).
• При много посетители се проверява много често, а тежка задача може точно да забави страницата на посетителя.

По-добре: изключете WP-Cron при посещения и оставете истинска cron задача на сървъра да го изпълнява на всеки пет или десет минути. В wp-config.php (над „stop met bewerken“):

define( 'DISABLE_WP_CRON', true );

И в екрана за cron на Вашия хостинг панел задача на всеки 10 минути:

*/10 * * * *  /usr/local/bin/php /home/gebruiker/domains/example.com/public_html/wp-cron.php >/dev/null 2>&1

Пътят до PHP и до Вашия сайт се различава при различните хостинг доставчици; проверете в упътването на Вашия панел. Или използвайте WP-CLI: wp cron event run --due-now. Проверете впоследствие в Състояние на сайта, че няма изоставащи планирани задачи.

Heartbeat и администрацията

Таблото на WordPress, докато е отворено, комуникира със сървъра на всеки 15 до 60 секунди (Heartbeat): за автоматично запазване, за да съобщи, че някой друг редактира същата публикация, и за известия. Ако държите десет раздела с администрацията отворени през целия ден, това са хиляди заявки. Затваряйте раздели, които не използвате. Някои разширения за кеширане могат да забавят Heartbeat; пълното му изключване не е необходимо и нарушава автоматичното запазване.

Обобщение

• След кеша на страниците: изображения, PHP версия, външни елементи и разширения, база данни, cron. Измервайте преди и след, по една стъпка наведнъж.
• Lazy loading за всичко освен голямото изображение най-отгоре; то по-добре получава fetchpriority="high".
• По-нова PHP версия е безплатна скорост, стига разширенията Ви да я поддържат.
• Почиствайте версии, transients, спам и големи autoload данни, винаги с резервно копие.
• Поставете WP-Cron на истинска cron задача с DISABLE_WP_CRON и задача във Вашия панел.

Тест

Задача

Задача A6.3: Lazy loading и формати на Вашата начална страница. Въведете адреса на Вашия сайт. Програмата чете началната страница и разглежда изображенията: дали първото голямо изображение НЯМА loading="lazy" (и за предпочитане има fetchpriority="high"), дали изображенията по-надолу имат lazy loading, и каква част от изображенията са WebP или AVIF?

Задача D6.3: Преди и след. Измерете страница от Вашия сайт три пъти в PageSpeed Insights (мобилна версия) и запишете средния LCP, INP (или лабораторната стойност Total Blocking Time, ако няма данни от полето), CLS и TTFB от задача A6.1. След това приложете едно подобрение от този урок (изображения, PHP версия, премахване на външен елемент, почистване на базата данни или истински cron). Измерете отново три пъти и запишете новите стойности. Опишете какво сте направили и дали разликата е по-голяма от обичайните колебания между измерванията.

Допълнително четене

Тези статии описват стъпките в панелите на WebOké; в други панели те работят по подобен начин.

• Ръководство за DirectAdmin 14.1: Избор на версия на PHP (Select PHP version)
• Ръководство за DirectAdmin 12.7: Проверка, поправка и оптимизиране на база данни
• Ръководство за DirectAdmin 15.1: Cron Jobs: автоматично изпълнение на задачи
• Създаване на cron задача (и какво да направите, ако не се изпълнява)
• Ръководство за DirectAdmin 17.4: X-Ray: откриване на бавни страници
• Свързване на WP-Cron със системния cron (developer.wordpress.org, Английски): https://developer.wordpress.org/plugins/cron/hooking-wp-cron-into-the-system-task-scheduler/
• Lazy loading и LCP (web.dev, Английски): https://web.dev/articles/lcp-lazy-loading