Ускорение загрузки сайта на WordPress

Основная проблема с системам управления — их неповоротливость. Современный вордпресс в этом плане сделал огромный шаг, да и скорость генерации первой страницы зависит еще и от хостинга, на котором расположен ваш сайт.

Допустим у нас установлена современная устойчивая версия вордпресс и хостинг отвечает всем современным требованиям, например снабжен ssd накопителем.

В результате такой связки, даже с установленным плагинами мы имеем вот такое время генерации страницы — 480 мс.

И вот здесь очень важно понять, что скорость генерации кода страницы на сервере и загрузка страницы на конечном устройстве — это разные вещи. Воспользуемся гугловским анализатором скорости загрузки страниц сайта: PageSpeed Insights

Судя по отчету у нас устойчивая троечка по производительность — скорости загрузки на конечном устройстве пользователя. И вот почему:

В файлах заголовков полно css и js из библиотек, плагинов и темы. Больше 10 шт, скорость которых в отдельности приемлемая, но все вместе они дают очень долгую загрузку первой страницы на мобильном устройстве (3800 мс.) и компьютере (1100 мс.)

Самым правильным решение, в данном случае будет установить плагин, который собирает css в один файл и js тоже.

После нескольких неудачных тестов мы нашли плагин Hummingbird, совместимый с нашей версией вордпресс. Смотрим результат, сначала по скорости генерации страницы на сервере:

Вот тут первый сюрприз с плагином кеша, первый раз он стартует очень медленно, тормозя генерацию страницы на 4000 мс. В результате экспериментов с плагинами кеширования такая ситуация была замечена еще у нескольких плагинов.

После третьего запуска аналитики скорости получаем устойчивую картину — 470 мс.

Изучив документацию ответ на вопрос о том, почему первые несколько раз при запуске такая длительная задержка. Оптимизация файлов происходит при первых заходах на сайт по ссылке, поэтому стоит сначала посетить ссылку через браузер, а потом уже запускать гугловскую аналитику.

Смотрим как изменилась картина на стороне пользователя с помощью PageSpeed Insights:

Здесь не видно какого реального прироста индекса, по сравнению с начальным значением 52, разберемся почему:

Плагин, несмотря на настройки, по каким-то причинам решил не сливать вместе все css, мы по-прежнему имеем 6 файлов css с большим временем задержки при обращении. Причем, обратите внимание — мы подключили минифицированную fontawesome и положили файл bootstrap.min.css на наш сервер на не на CDN, что в общей сложности дало прирост скорости загрузки в 780 мс.

Ну что же, отключаем HummingBird и подключаем Fast Velocity Minify, данный плагин занимается только минифицированием файлов темы вордпресс.

Code Profiler выдает нам приятную скорость генерации страницы в 220 мс:

Для теста скорости мы настроили минификацию только css файлов:

Здесь мы видим, что в нашем проекте теперь загружается единственный css.

Результат для мобильной версии:

Результат для десктопной версии:

Выводы: часть плагинов, занимающихся кешированием и минификацией дают плохой результат для мобильной версии. В нашем случае хороший результат был достигнуть простым минификатором и переносом всех файлов проекта на наш хостинг, без использования CDN.

Прирост производительности на мобильной версии составил 27%, на десктопной 31%.

© BW36 (2018-2024) Робот 3 icon by Icons8