Улучшение скорости загрузки страниц сайта – это не загадочное и темное искусство для избранных. Специалист из США с 18-летним опытом в digital-сфере описывает все особенности, влияющие на скорость сайта, которые вы можете проработать без каких-либо чудо-методик.
На сегодняшний день скорость загрузки страниц является важным фактором ранжирования в мобильном поиске Google. Это очень важный момент в SEO, который непосредственно влияет на опыт пользователей, встретившихся с вашим сайтом.
Согласно исследованию Financial Times, задержка в загрузке сайта длительностью в 1 секунду снижает на 5% активность читателей.
Компания Google говорит о том, что при загрузке сайта более 3 секунд на мобильных устройствах приводит к тому, что более 50% пользователей просто не станут ее дожидаться и покинут сайт.
Вывод простой – скорость загрузки страниц играет важную роль во всех аспектах эффективности в онлайн – неважно, что мы имеем в виду — платный или органический трафик, продажи, лидогенерацию. Скорость сайта касается абсолютно всего.
Оптимизация скорости страниц не является каким-то сакральным знанием. Вам достаточно просто понимать некоторые технологии и потратить какое-то время, чтобы использовать их вместе для достижения цели.
Первый шаг – определить текущую скорость сайта
Определите текущую скорость загрузки страниц вашего сайта, чтобы понимать, с чем именно необходимо работать для получения результата. Некоторые из популярных инструментов:
- WebPageTest.org.
- GTmetrix.com.
- Google PageSpeed Insights.
После тестирования принимайтесь за работу.
Поймите, как работают сайты
Большинство людей – включая тех, кто хочет стать или уже считает себя разработчиком – не имеют реального понимания, как в действительности работает сайт. Именно поэтому мы с вами сталкиваемся с медленными, неэффективными сайтами.
Мы с вами находимся в интересном историческом моменте, когда практически любой желающий может самостоятельно сделать сайт за пару кликов. В этой возможности множество преимуществ, но в тоже время она влечет за собой огромное количество проблем.
Представьте себе следующую ситуацию: если человек, не имеющий ни малейшего представления об архитектуре, с помощью специального программного обеспечения подготовит за несколько кликов чертежи для постройки моста. Как вы себя будете чувствовать, зная это, когда будете ехать по этому мосту? Скорее всего, не очень комфортно, как минимум.
Это все потому, что архитектура намного шире собственных представлений обычного человека. Для конкретных целей требуются конкретные конструкции. Необходимы точные расчеты несущей способности используемых материалов. Есть законы зонирования, которые обеспечивают безопасную эксплуатацию объекта и так далее.
То же самое и с веб-сайтами.
Для того, чтобы ваш сайт загружался быстро, вам необходимо понимать HTML, JavaScript и CSS, как минимум. В идеале, у вас дополнительно должны быть знания в PHP и особенностях функционирования того же WordPress. Хорошее знание этих элементов позволит вам достать до винтиков и болтиков вашего сайта и исправить то, что делает его медленным.
Минимизируйте количество HTTP-запросов
Когда-то давным-давно скорость интернет-соединения была настолько низкой, что необходимо было нарезать большие изображения на отдельные кусочки, и пользователи вместо загрузки одного изображения видели загрузку изображений по частям.
Сегодня пропускная способность даже базового интернет-соединения намного лучше, что привело к ленивым разработчикам и нетерпеливым пользователям.
Каждый отдельный HTTP-запрос увеличивает время загрузки сайта. Часто очень сильно. Например, небольшой сайт с большим количеством запросов может загружаться медленнее большого ресурса, но с меньшим количеством HTTP-запросов.
Как уменьшить количество HTTP-запросов? Настало время засучит рукава и покопаться в коде сайта. В коде мы будем искать возможности соединения и устранения определенных HTTP-запросов.
Файлы CSS и JavaScript часто являются причиной медленной загрузки, так как на многих сайтах их чрезвычайно много. Есть три варианта управлять ими:
- объединить все CSS и JavaScript файлы в один CSS файл и в один JavaScript;
- установить плагин, имитирующий функциональность, фактически оставив нетронутыми CSS и JavaScript;
- где возможно, удалить запросы к CSS и JavaScript.
В большинстве случаев вам потребуется комбинировать эти варианты. Вот почему на WordPress объединение CSS и JavaScript через плагины может вызвать проблемы после их обновления.
В первую очередь стоит выявить CSS и JavaScript файлы, которые не нужны и удалить их. После данной операции вы можете получить значительный положительный результат в скорости, так как большинство тем для WP загружают большое количество ненужных файлов. Они могут включать в себя шрифты, которые вы не используете, разделение CSS по цветам, файлы JavaScript функционала, который вам не нужен и так далее.
Далее удостоверьтесь, что все CSS и JavaScript файлы объединены в один файл CSS и в один файл JavaScript.
И в самом конце уже устанавливайте плагин, имитирующий функциональность, не затрагивая CSS и JavaScript.
Рекомендовано эффективно оптимизировать изображения, которые используются на всем сайте, например, логотип.
Идея в том, чтобы объединить все эти изображения в один файл, а потом использовать CSS, чтобы определить контейнер для этого элемента и поместить изображение в него. Теперь вместо дюжины отдельных запросов, вы можете сделать один. Насколько это эффективно?
Вам также стоит рассмотреть возможность замены некоторых изображений веб-шрифтом, например, таким как FontAwesome.com, который достаточно гибкий и имеет небольшой размер.
Если вы пойдете этим путем, то вам следует загрузить и разместить файлы локально, а не удаленно. Запросы к внешним файлам могут очень отрицательно отразиться на скорости сайта. Есть случаи, когда разница в скорости загрузки страницы достигает 1 и более секунд при запросе файлов из внешних источников.
Не бойтесь использовать плагины
Плагины делают WordPress лучше, но в то же время могут все испортить из-за плохой проработки, которая приводит к снижению производительности. Также они часто загружают по несколько CSS, JavaScript файлов и изображений, которые уже загружены, например, JQuery.
Эти проблемы могут стать настоящим бедствием.
Каждый модуль, неважно, сколько он «весит», будет создавать дополнительную нагрузку на сервер сайта. Подключите одновременно несколько модулей и увидите разницу, не говоря уже о CSS, JavaScript и изображениях, которые тоже надо загрузить.
Проблема в следующем: количество подключенных модулей часто увеличивается как снежный ком и становится неконтролируемым, а все потому, что веб-дизайнеры не знают, как реализовать необходимую функцию программным путем, но часто считают себя при этом разработчиками. Из-за нехватки знаний, они добавляют один плагин здесь, другой там, а в итоге на сайте их может оказаться десятки.
Автор статьи говорит о том, что он участвовал в проекте, в котором агентство хотело привлечь собственного «разработчика», который был тем парнем, который просто устанавливает плагины и больше ничего не делает. Чтобы реализовать весь функционал, который хотел видеть клиент, этот парень установил 46 (!) модулей. Как вы уже догадались, сайт стал очень медленным, а поскольку «разработчик» не знал как программировать, а полагался только на модули, он сказал клиенту ни в коем случае не обновлять плагины, чтобы ничего не «слетело».
Вот такой беспорядок.
Автор рекомендовал потратить время на изучение PHP и JavaScript, либо найти действительно грамотного разработчика, который может реализовать все необходимые функции без установки огромного количества дополнений на сайт, замедляющих его работу.
Забудьте про дешевый хостинг
Мы все хотим сэкономить, но веб-хостинг не самый лучший способ это сделать. Есть огромная разница между самым дешевым хостингом за 10 долларов в месяц и более дорогим за 30 долларов.
Дешевый веб-хостинг дешев не просто так, у этого есть причина.
Эконом-хостинги не созданы для производительности, они созданы для того, чтобы впихнуть как можно больше сайтов на каждый сервер, не задумываясь о скорости. Результатом будет низкая скорость загрузки сайта.
Данный вопрос обсуждался со многими клиентами, и ответ чаще всего был что-то типа «Для меня и так он грузится быстро».
Правда: на самом деле нет, не быстро.
Большинство людей предвзято относятся к своему сайту, потому что они привязаны к нему. Они не видят недостатки. Это похоже на отношение родителей к своим детям.
В любом случае, не верьте на слово, когда вам говорят про низкую скорость вашего сайта – проверьте ее с помощью специальных инструментов.
Несколько лет назад автор поставил хостинг на одно из приоритетных мест в вопросах скорости работы сайтов клиентов. Ему порекомендовали специализированный хостинг для WordPress, который оправдал все его ожидания. Ранее он по большей части пытался оптимизировать скорость сайтов с помощью кэширования модулей. Но специализированный хостинг для WP работает на невероятных скоростях и окупает вложения. По некоторым проектам результат был +40% еще до внедрения кэширования и других тонких настроек сайта.
Инвестируйте в качественный хостинг и дополнительно используйте тонкие настройки скорости, и вы получите результат лучше, чем у большинства, если не у всех ваших конкурентов.
Используйте минификацию, кэширование и CDN
Пройдя, все предыдущие шаги, на пути к этому, будьте готовы к тонкой настройке. Последующие шаги могут давать значительный прирост, но надо быть готовым, что это будет путь проб и ошибок.
Минификация – процесс чистки файлов CSS и JavaScript от ненужных символов, включая пробелы, комментарии, конечные точки с запятой. Цель данного процесса – уменьшить размер файла.
Это рискованная операция, так как часто нарушает корректную работу сайта, поэтому необходимо экспериментировать с тем, в какие файлы можно внести изменения, а в какие не стоит.
Минификацию можно проводить вручную, а можно с помощью специального модуля, который значительно упрощает процесс. На некоторых хостингах эта возможность уже встроена в систему.
Кэширование – значительно улучшает скорость сайта, потому что сохраняет динамически генерируемые HTML-файлы и подгружает их из кэша. Другими словами – повторно использует ранее сгенерированные данные, вместо постоянной загрузки PHP-скриптов.
Кэширование наравне с минификацией является рискованной операцией и может стать причиной ошибок в работе сайта.
Есть два варианта:
- Если вы до сих пор используете обычный хостинг, то можете воспользоваться подключаемыми модулями такими как, например, W3 Total Cache, WP-Rocket.me, or WP Super Cache.
- Если вы используете оптимизированный хостинг, например, под WordPress, то на нем наверняка есть встроенная возможность кэширования.
Content Delivery Network (CDN) – сеть доставки содержимого, которая размещает копии ваших файлов (HTML, CSS, JavaScript, изображения, шрифты и так далее) на разных серверах по всему миру. Вместо того, чтобы посетители сайта загружали их напрямую с вашего сервера, они загружают их с того сервера, который ближе к ним. Результатом использования данной технологии будет значительное улучшение скорости загрузки сайта.
Есть бесплатные и платные варианты реализации описанных выше способов – сравните их и выберете подходящий именно вам.
Скорость имеет решающее значение для успеха
Улучшение скорости работы сайта не мистический процесс. Он очень важен для SEO, пользователей и увеличения конверсии. Инвестируйте свое время в обучение тонкостям улучшения скорости работы сайта или привлеките профессионала в помощь. Делая это, вы увеличите ваши доходы, улучшите ранжирование и удержите клиентов.