Разберем одну из важнейших тем для веба — как ускорить загрузку сайта. Существует множество различных теорий и практик, касающихся загрузки элементов сайта. Затронем также часто возникающий вопрос: "как ускорить загрузку сайта на Wordpress?"
В последние годы поисковые системы большое внимание уделают именно скорости веб-ресурсов, а также "чистоте" их кода. Проблема тут только в одном, — все сайты разные! Вы не сможете подобрать универсального метода. Даже в вопросе "как ускорить загрузку сайта на Wordpress" нет двух одинаковых мнений. Чего уж говорить про "самописные" сайты и различные cms с разным принципом работы backend'а. Здесь мы поможем всем, кто уже наступил в пришел к этому вопросу и не знает, с чего же начать, чтобы показания вашего сайта не выглядели вот так:
Перед дальнейшим описанием советуем вам ознакомиться с удобной услугой Ускоритель сайтов от Timeweb (доступна в панели хостинга). Она реально помогает без копаний в себе и сайте быстро ускорить работу ресурса. Легко проверить его работу на PageSpeed Insights от Google. Функционал очень простой: выбираем, что хотим улучшить и ставим галочку. А программа все сделает за вас, внося правки в front-end вашего ресурса. Самое главное, что с ней вы ничего не можете испортить, ведь всегда можно снять выбор ;)
Шаг 1. Уменьшаем размер изображений
Необходимо уменьшать размеры изображений на сайте с помощью дополнительных средств. В среднем они должны весить максимум до 30-100kb, если мы говорим про небольшие картинки. Вообще, нет строгого размера изображений. Они просто должны быть не тяжелыми и легко грузиться. Используйте ресурсы типа tinypng, чтобы уменьшать вес/качество изображения. Просто загружаете туда сразу несколько картинок и они сжимаются до подходящего размера.
Шаг 2. Задайте всем изображениям width и height в стилях
Пример: width: 600px, height: 300px. Это задача скорее для разработчика. Данное условие стало необходимо не так давно. Это связано с тем, что незаданные данные параметры в CSS могут повлечь за собой нестыковки в отображение картинок. Например, они могут выступать за границы основного контента. А это является недопустимым в отображении страниц.
Шаг 3. Убираем все скрипты JS в самый-самый низ сайта
Ссылки на файлы скриптов должны быть убраны в самый низ веб-страниц. То есть за пределы загрузки основного контента. Например, вот так:
В первую очередь это ускорит загрузку видимой части контента для пользователя, что важно.
Шаг 4. Минимизируем CSS и JS
Если вы делали сайт не сами, то можно воспользоваться специальными сервисами для минимизации файлов .CSS и .JS, чтобы увеличить скорость их загрузки. Данная процедура очень хорошо известна веб-разработчикам. В интернете много программ и сервисов, которые легко и быстро сожмут ваши файлы стилей и скриптов. Выглядит это некрасиво, зато ускорит их работу.
На всякий случай всегда под рукой имейте сохраненные файлы, чтобы в случае поломки, вы легко их восстановили.
Шаг 5. Увеличиваем жизнь кэша до 365 дней
Кэш — это временные файлы, которые сохраняются браузером в течение заданного сайтом срока на компьютере у пользователя в сжатом виде. Это делается для того, чтобы вы каждый раз не загружали весь сайт, открывая его. Это очень сильно экономит ресурсы и вашего хостинга и пользователя. Поэтому данная функция должна быть включена для любого сайта. Кто ее не использует, тот просто не жалеет ни себя ни пользователя.
Google требует, чтобы заданное время жизни кэша было 365 дней. Это вовсе не обязательное условие. Но, как показывает практика, пользователи заходят на сайт несколько раз в течение года, а то и чаще. Где искать эту настройку — зависит от cms, хостинга и доступных вам настроек на сервере. Если у вас не получилось сделать это самостоятельно, советуем сперва обратиться в техподдержку хостинга. Так будет быстрее.
Шаг 6. Убираем все лишние коды и "огрызки" со страниц
На любом сайте есть пустой/закомментированный/нерабочий код. Это как правило остатки от работы веб-разработчика. Браузеры устроены таким образом, что они считывают ВЕСЬ код, без исключения. А потом решают, что выводить, а что нет. Следует убирать подобные элементы, так как они увеличивают время загрузки страницы.
Пример:
Шаг 7. Обязательно используем HTTPS для своего сайта
О пользе SSL-сертификата в наше время знают все. Он нужен, чтобы ваш сайт был безопаснее для посещений пользователей. В строке поиска он будет начинаться с записи "HTTPS://..." Во-первых, это безопасность. Во-вторых, любая поисковая система сейчас лучше ранжирует ресурсы, которые заботятся о своей безопасности. Подробнее о выборе SSL-сертификата читайте в этой статье. А приобрести и установить SSL-сертификат можно на хостинге.
Средства для проверки скорости сайта
PageSpeed Insights
PageSpeed Insights — это, пожалуй, самый верный индикатор того, как качественно ваш сайт будет индексироваться поисковиком. Потому что сам Google вам предоставляет возможность узнать о вашем сайте больше и улучшить недостатки, допущенные при разработке. инструмент очень простой: копируем ссылку совей страницы и вставляем туда, смотрим на результат.
Обычно хорошим показателем считается цифра 80+. Но, если вы перфекционист, можете попытаться добить до 100%. Честно говоря, в этом нет большого смысла: если сайт кроме скорости ничем другим не обладает, толку от него будет мало.
Lighthouse (доступен в Chrome)
Еще один отличный инструмент, который быстро дает вам неплохой анализ "качества" любой страницы веб-сайта. В том числе и информацию о микро-разметке, а это очень и очень удобно. Также, в него входит показатели SEO, юзабилити и производительности. Все невозможно описать в двух словах, поэтому просто открывайте в Chrome ваш сайт, ПКМ - Просмотреть код, в списке выбираем инструмент "Lighthouse":
Вообще, данный инструмент не зря назван "Lighthouse". Он загружает страницу сверху вниз как башню и последовательно оценивает скорость загрузки элементов и прочие показатели. Скажем лишь о некоторых показателях в Perfomance, на которые вам в первую очередь стоит обращать внимание:
Speed Index — средний показатель скорости видимости всего контента на странице. Т.е. как быстро он показывается пользователю.
First Contentful Paint (FCP) - это насколько сколько времени потребовалось браузеру, чтобы отобразить первую часть видимого кода.
Time to Interactive - время полной загрузки контента страницы. Один из самых важных показателей.
Если все три эти показателя у вас светятся зеленым, считайте, что ваш сайт работает относительно быстро. Если же оранжевым, нужно смотреть, что тормозит его работу. Красный цвет - это совсем плохая загрузка, которая может повлечь за собой уход пользователя с вашего ресурса.
Как ускорить загрузку сайта на Wordpress?
Методы, описанные выше, работают и для Wordpress. Но, система Wordpress удобна тем, что позволяет без специальных знаний кода заниматься улучшением сайта с помощью плагинов. Часто достаточно знать нужные плагины для достижения нужных целей по сайту. Кстати, в этом разделе представлены лучшие хостинги для Wordpress.
Smush — плагин, который позволяет работать с изображениями. Уменьшает их размер, вес. Есть функция Lazy Load для изображений. Это функция, которая позволяет догружать изображения, находящиеся ниже на странице, чтобы не загружать все сразу. Также, есть уменьшение веса изображений "на лету" (т.е. во время загрузки на сайт).
The SEO Framework — очень удобный SEO плагин с огромным функционалом. Здесь есть все, что касается продвижения для сайта. Позволяет настраивать кэширование, минимизацию стилей и кодов, обращения к базе данных, добавляет мета-описания для любых соц сетей и многое другое. Это универсальный инструмент, который должен быть на любом Wordpress сайте. Так как он экономит десятки часов времени, которые вы потратите на вникание в ручные правки.
WP Fastest Cache — самый простой плагин кэширования из тех, что существуют на Wordpress. Без преувеличения. С этим плагином вы 100% увеличите скорость загрузки своих страниц.
Итог
Мы рассмотрели лишь самые основные принципы, которыми вам нужно руководствоваться при запуске своего веб-проекта. На самом деле WEB-разработка и публикации сайтов это очень глубокая тема, поэтому мы рассмотрели те случаи, в которых под силу разобраться любому начинающему оптимизатору. Высоких скоростей загрузки вам и вашим посетителям! :)
