Как оптимизировать сайт? Повышаем скорость загрузки страниц

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

Чем можно измерить скорость загрузки сайта?

Прежде чем думать об измерении и оптимизации, нужно понять, какую скорость загрузки сайта вообще можно считать нормой. Хотя однозначного ответа на вопрос “какая должна быть скорость загрузки сайта?” не существует, большинство исследований говорит о том, что для пользователей является оптимальным, когда мобильные версии сайтов загружаются 3-4 секунды, а десктопные — до 2 секунд. Если загрузка затягивается, в сфере электронной коммерции до 40% пользователей закрывают сайт и начинают искать альтернативные варианты. Таким образом, чтобы не терять потенциальных клиентов, надо стараться делать работу своего интернет-ресурса как можно более быстрой.

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

Чтобы разобраться, с какой же скоростью работает ваш сайт, что влияет на скорость загрузки сайта, и что конкретно можно оптимизировать, ничего не сломав, сегодня вы можете воспользоваться рядом инструментов — как коммерческих, так и бесплатных — для проведения нагрузочного тестирования и оценки скорости загрузки. При этом, проводя тестирование, желательно стремиться запускать его из той же локации, в которой находится ядро вашей аудитории, а в идеале — эмулировать разные места по всему земному шару, чтобы понять, насколько ваш сайт доступен из разных уголков земли. Рассмотрим несколько таких инструментов подробнее.

PageSpeed Insights

Один из самых популярных в русскоязычном сегменет инструментов — сервис от Google PageSpeed Insights, который, несмотря на на не самую высокую точность измерений, неизменно пользуется спросом. Причин тому несколько. Во-первых, PageSpeed Insights имеет русскую локализацию. Во-вторых, этот инструмент обладает интуитивным интерфейсом, позволяющим формировать отчеты отдельно по страницам мобильных и десктопных версий сайта, а также получать персонализированные советы по оптимизации для повышения скорости загрузки. В третьих — начиная с 2021 года, после апдейта Page Experience, алгоритмы Google при ранжировании сайтов с учетом скорости их загрузки ориентируются именно на метрики PageSpeed Insights, что объясняет повышенное внимание к данному инструменту со стороны вебмастеров и CEO-специалистов.

GTMetrix

Если вы хорошо владеете английским и готовы экспериментировать с тонкими настройками, то вас может заинтересовать GTMetrix — благодаря этому веб-инструменту для анализа производительности сайтов вы сможете получить внушительный объем данных по разным метрикам. К вашим услугам будет возможность указывать локацию ядра аудитории, используемый браузер и многое другое. Помимо результатов анализа вы также будете получать развернутые рекомендации по оптимизации.

WebPageTest

Этот фундаментальный опенсорсный сервис во многом схож с предыдущим, однако оценить его по достоинству смогут только компетентные CEO-специалисты. Отчеты, формируемые WebPageTest, могут показаться слишком сложными для новичков, но именно они отражают результаты глубоко анализа производительности сайта. Кроме того, большинство экспертов от CEO отмечате, что именно WebPageTest дает самые точные результаты измерений скорости загрузки страниц — вы точно будете знать, от чего зависит скорость загрузки сайта.

Pingdom

Этот сервис имеет более низкий порог вхождения, чем рассмотренные выше GTMetrix и WebPageTest. При этом, несмотря на относительную простоту интерфейса, он демонстрирует впечатляющую точность измерений. Лаконичность настроек и бесплатный доступ делают его популярным среди многих начинающих CEO-специалистов. В минусы можно записать, пожалуй, достаточно схематичные отчеты, делающие анализ производительности несколько поверхностным.

Load Impact

На закуску — наиболее профессиональный веб-сервис, предназначенный для полноценного нагрузочного тестирования. Это платный инструмент (есть триальный период, есть гибкая система тарифов), который анализирует работу не только фронтэнда, но и бэкенд сайтов. Воспользовавшись Load Impact, вы узнаете чувствительность вашего сервера к нагрузкам и то, как это влияет на скорость загрузки вашего интернет-ресурса.

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

Как оптимизировать скорость загрузки сайта?

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

С точки зрения SEO, контент сайта может быть идеально оптимизирован под поисковики, однако программная часть интернет-ресурса может сделать все усилия копирайтеров бесполезными, если страницы сайта весят неоправданно много и загружаются с черепашьей скоростью. Тоже самое будет происходить, если скорость ответа сервера будет низкой из-за аппаратных ограничений или специфики его местоположения.

В общем случае это лечится сжатием или переконвертированием изображений, редактированием html-кода и удалением из него мусорных строчек, задействованием технологий ускорения мобильных страниц, таких как турбо-страницы от «Яндекс» и accelerated mobile pages, настройками сжатия и кэширования данных (о последнем мы подробнее писали в статье, посвященной оптимизации сайтов на «Битрикс») и т.д. Также может помочь оптимизация ответа сервера с помощью, например, подключения CDN, о чем мы поговорим чуть ниже.

При этом важно помнить, что никакая оптимизация сайта не ускорит его загрузку, если вы используете серверное оборудование, не справляющееся с нагрузками. Кроме того, т.к. реалии пользовательского поведения и конфигурации сетей постоянно меняются, измерять скорость работы сайта нужно регулярно; в идеале хорошо бы делать это по расписанию и сопоставлять результаты, полученные в разные периоды — это поможет вам лучше понять, как оптимизировать сайт в долгосрочной перспективе.

Рассмотрим теперь подробнее конкретные меры по оптимизации сайта.

I. Облегчаем код

Массивность кода сайта прямопропорциональна скорости, с которой он будет загружаться. Соответственно, если вы хотите, чтобы сайт работал быстрее — из кода необходимо убрать все лишнее. В первую очередь это касается главной страницы проекта, на которую многие необдуманно вешают скрипты JavaScript и Ajax сильно замедляющие работу. Правило KISS («keep it simple, stupid») сформулированное полвека назад ВМС США работает и в IT — код должен быть лаконичным, ведь «краткость — сестра таланта».

Если вы уже протестировали сайт с помощью упомянутого выше PageSpeed Insights, то наверняка видели рекомендацию либо по переносу внешних JavaScript-файлов в нижнюю часть главной страницы, либо по встраиванию их кода в HTML — это может существенно повысить скорость загрузки. Тоже самое относится и к CSS-коду, например, внешним таблицам стилей — по возможности их лучше интегрировать в основной HTML страниц. Общее правило здесь такое: чем меньше HTTP-запросов к разынм элементам сайта, тем быстрее все работает. Соответственно, число компонентов страницы надо сокращать, например объединяя CSS-файлы и скрипты в один файл, встраивая картинки в таблицы стилей и объединяя их в единые CSS-спрайты и т.д.

Помочь разобраться в том, как работает ваш JavaScript, может бесплатный CEO-инструмент Varvy SEO.

II. Производим сжатие данных

Чем меньше весят данные на странице сайта, тем быстрее он будет загружаться. На сегодняшний день существует несколько технологий сжатия данных, широко использующихся при оптимизации интернет-ресурсов. Воспользовавшись этим инструментом, вы можете проверить, отправляет ли ваш сервер какой-либо способ сжатия данных. Как правило, речь идет о gzip (GNU Zip) — утилите сжатия и восстановления (декомпрессии) файлов, работающей на алгоритме Deflate. Работая по протоколу HTTP она уменьшает число запросов от браузера к серверу, что уменьшает объем загружаемых файлов до 70%, серьезно повышая скорость загрузки страниц.

III. Уменьшаем число редиректов

В одной из предыдущих публикаций мы уже писали о настройке редиректа 301 для перенаправления пользователей с почивших адресов на актуальные. Однако мы почти не коснулись проблемы того, что при редиректе цепочки сетевых запросов удлиняются и это может существенно замедлять скорость загрузки страниц. Если у вас есть возможность структурировать контент таким образом, чтобы уменьшить число редиректов, а то и вовсе избавиться от них — это будет хорошим вкладом в оптимизацию вашего сайта. Т.к. новые специалисты не всегда знают, есть ли на сайте, работающем годами, редиректы, им можно посоветовать отследить их с помощью CEO-сервиса Screaming Frog SEO Spider.

IV. Убираем лишние плагины

Сайты на таких популярных CMS, как Wordpress, Joomla, Bitrix часто оснащены солидным обвесом в виде плагинов и расширений — далеко ходить не надо, вся наша предыдущая статья была посвящена мощному плагину Woocommerce для электронной коммерции. Бывает так, что подключенные плагины теряют актуальность, и тогда требуется своевременно отключать их т.к. они существенно замедляют загрузку сайтов. Это можно сделать как вручную, так и с помощью разных инструментов. Например в Wordpress есть плагин, охотящийся на другие плагины — P3, он же Plugin Performance Profiler. Установив его, вы получите доступ к данным о производительности остальных ваших WP-плагинов и сможете отключить ненужные.

V. Оптимизируем изображения

Один из важных факторов скорости работы сайта, на котором следует заострить внимание — размеры графических изображений и мультимедийных файлов. Часто их загружают, не думая ни о форматах, ни о весе, хотя как ускорить загрузку картинок на сайте давно не является тайной для большинства контент-менеджеров. По уму надо устанавливать оптимальные параметры сжатия и следить за расширениями. Кроме того изображения нужно чистить от разной мусорной информации и мета-данных, которые иногда остаются в них после обработки.

Воспользовавшись PageSpeed Insights, вы сможете получить рекомендации по поводу того, сколько должно весить изображение в каждом конкретном случае. Если же говорить об общих советах, то они таковы: размер изображения для сайта должен колебаться в пределах 100 - 250 Kb. Каждый пиксель весит 4 байта. Зная разрешение загружаемых изображений легко самостоятельно рассчитать их оптимальный вес и, если в реальности он окажется слишком большим, уменьшить, например, глубину цвета.

Также разный контент будет воспроизводиться с оптимальной скоростью, будучи сохраненным в оптимальных форматах. Для кнопок интерфейса и логотипов в векторе это будет SVG, для инфографики и растровых лого — PNG, для иллюстраций и фотографий оптимален JPG, а видеофайлы до сих пор проще всего заливать в MPEG4. В качестве более современной альтернативы для видео можно вспомнить о таком открытом формате контейнера, как WEBM, позволяющим уменьшать размеры файлов без потери качества, однако он не воспроизводится браузером MacOS / iOS Safari, что отекает часть аудитории.

VI. Настраиваем браузерное кэширование

Существенный вклад в ускорение работы вашего сайта может внести браузерное кэширование. Если вы корректно настроите HTTP-заголовок Expires, то посетитель, заходя на сайт повторно, сможет видеть некоторые JavaScript и CSS-файлы, подгружающиеся из кэша его браузера, а не с вашего сайта, что будет существенно экономить время загрузки. Главное прописать в файле .htaccess, хранящейся в корневом каталоге сайта, время хранения кэша — разброс может составлять от нескольких дней до лет. Многие CMS, например тот же WP, предлагают специальные расширения для настройки кэширования, благодаря которым вам не придется заниматься его настройкой вручную — это можно будет сделать в два клика в настройках плагина W3 Total Cache и увеличить скорость загрузки сайта Wordpress.

VII. Оптимизируем скорость ответа сервера

Часто проблема со скоростью загрузки сайта, ведущая к понижению его поискового рейтинга, может быть связана с удаленностью сервера от пользователя. Это частично лечится подключением сети доставки содержимого CDN (content delivery network), благодаря которой файлы можно подгружать с сайтов на сервере, расположенном географически ближе всего к посетителю. Также можно посоветовать использовать облачный DNS или сети DNS-серверов для кэширования, работающие как в РФ, так и в странах ближнего и дальнего зарубежья.

VIII. Ищем оптимального хостинг-провайдера

Бывает так, что проблема скорости загрузки страниц не может быть решена внутри сайта т.к. слабые мощности используемого серверного оборудования или низкая скорость интернета сводят все ваши усилия по оптимизации на нет. В этом случае остается только одно — менять оборудование или хостинг-провайдера. Команда инженеров Максиплейс готова сопровождать вас на всех этапах миграции в наше облако: от планирования переезда до развертывания инфраструктуры в облаке и дальнейшей оптимизации и администрирования ваших сервисов.

Резюме

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

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

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

Также нужно понимать и то, что в ряду случаев качественное повышение скорости работы сайта может потребовать не только пережатия каких-то данных и сокращения нескольких строчек кода, но и радикальной перестройки всей структуры проекта, что может стоить серьезных денег. Если ваш интернет-ресурс демонстрирует конкурентную скорость загрузки не следует гнаться за рекордами — возможно лучше потратить бюджет на контекстную и таргетинговую рекламу или иные способы привлечения посетителей.