По поисковым системам
Условия
CMS
По типам сайтов
По тематикам
С возрастом время течет быстрее. По крайней мере, мы так это воспринимаем. Профессор Адриан Бежан изучил данную проблему и пришел к выводу, что восприятие времени субъективно и основывается на внешних стимулах. Чем старше человек, тем медленнее мозг обрабатывает информацию, поэтому у нас создается ощущение быстротечности. Также есть зависимость от внешних стимулов. Например, в детстве у нас мало информации о мире, практически на каждом шагу мы познаем что-то новое. Поэтому нам кажется, что тогда время текло быстрее, так как за одинаковое количество времени мозг фиксировал больше интересного и нового. Ну и не будем забывать о городской суете, заботах, постоянной занятости. Ведь с возрастом у нас и забот прибавляется.
Когда мы создаем сайт, мы создаем его для пользователя, поэтому нам нужно позаботиться о нем: не только принести пользу, но и сделать удобным процесс использования, сэкономить его время. За такую заботу аудитория нас непременно вознаградит. Низкая производительность сайта увеличивает процент отказов, ухудшает поведенческие факторы, что является плохим знаком для поисковых систем. Они тоже стремятся улучшать выдачу для своей аудитории, так как конкурируют за пользователя с другими поисковыми системами.
Прежде чем попасть на сайт, посетитель проходит два этапа. Чтобы он начал изучать наш ресурс, мы должны победить на каждом из них.
Обычно нет избытка функций, поэтому вносить изменения проще
Пользователю удобно просматривать страницы, он нен натыкается на лишнее
Сайт может загружаться быстрее, поскольку неперегружен данными
Несложно реализовать
Не надо создавать новые URL
Не надо использовать редиректы
Его любят поисковики (особенно Google)
Первый этап: конкуренция в поиске. Посетитель вводит запрос и получает выдачу. Наша задача – привлечь внимание, стимулировать кликнуть по нашей ссылке. Как правильно написать заголовок и составить описание для SEO-выдачи, мы рассказывали в этой статье.
Второй этап: открытие сайта. Пользователь, как правило, открывает несколько ресурсов, а после начинает переходить на те, что прогрузились быстрее. Хотя разница в скорости загрузки порой составляет доли секунды, для восприятия пользователя это очень важно. Аудитория не любит ждать, поэтому наш сайт должен открываться быстрее. Опередив конкурентов в этой гонке, мы выиграем в битве.
В данном примере мы открыли все ссылки из выдачи, и, как заметно по скриншоту, 4-я и 6-я загрузились быстрее остальных. Но мы еще не переходили по ссылкам, далее будет важна скорость загрузки контента страницы.
Прежде чем говорить об оптимизации скорости, давайте ответим на вопрос, что же происходит после ввода URL (ссылки) в адресную строку браузера.
1. Отправление DNS-запроса по имени сайта.
2. Инициация TCP-подключения к серверу.
3. Установление соединения http или https.
4. Запрос нужной части страницы и прогрузка ее HTML-кода.
5. Стартовый парсинг HTML.
6. Подгрузка внешних ресурсов (изображений, стилей, скриптов и т. д.).
7. Рендеринг финальной версии страницы со всем содержимым.
8. Исполнение JS-кода. Может потребоваться обработка дополнительных сетевых запросов, изменение страницы или ее шаблона, а это значит не исключен и еще один рендеринг.
Практически на каждом из этих этапов мы можем поспособствовать ускорению процесса. Логично предположить, что чем больше мы проведем работ над их оптимизацией, тем быстрее будет загружаться сайт.
Один из главных инструментов – бесплатный сервис Google PageSpeed Insights. Как им пользоваться? Вводите ссылку на ресурс и нажимаете «анализировать».
Получаете детальную информацию по ситуации со скоростью загрузки на десктопах и мобильных устройствах. Оптимизировать нужно все пункты, выделенные красным.
Расскажем об основных пунктах, оптимизировав которые вы ускорите сайт в разы.
Данная проблема часто возникает у ресурсов на 1С-Битрикс. Они требуют больших ресурсов при работе, поэтому нужно иметь буфер, особенно когда объем трафика сильно увеличивается. Наиболее важными являются показатели нагрузки на CPU (центральный процессор сервера) и скорость дисковой системы. Выбирайте провайдеров с качественным оборудованием.
Если у вас высокий процент повторных заходов на сайт, стоит использовать кеш в браузере пользователей. Сохраняя важные данные, при повторном заходе мы можем загружать страницу быстрее. Благодаря кешированию не только падает нагрузка на сервер, но и уменьшается количество запрашиваемых данных, так как часть из них уже доступна в браузере. Недостаток этого способа в том, что не все данные можно закешировать. Также это актуально только для сайтов с повторными заходами (если пользователь впервые зайдет к вам на страницу, скорость все равно будет низкая, так как кеша еще нет). И нужно заранее подумать, как потом очищать кеш.
Увеличьте скорость ответа от базы данных. Для этого оптимизируйте запросы и схемы данных. Узнать, какие запросы замедляют процесс, можно, собрав статистику по нагрузке за определенный промежуток времени и проведя анализ лога. После этого вы сможете определить параметры, которые помогут ускорить работу.
Оптимизация TCP актуальна для крупных платформ и серверов со скоростью от 10 G. С выпуском новых ядер сетевая подсистема обновляется, поэтому и вам нужно обновляться.
Корректировка TLS (HTTPS) помогает ускорить подключение защищенного соединения и повышает безопасность.
HTTP/2 используют все чаще. Хотя этот протокол был создан для ускорения работы, специалисты утверждают, что скорость все равно увеличивается не всегда.
Чем дальше находится сервер, тем дольше будет доставляться информация. Поэтому лучше выбирать провайдера, оборудование которого расположено в том же регионе, в котором большая часть вашей аудитории. Конечно, многое зависит еще и от качества оборудования: есть случаи, когда более далекие сервера отвечают быстрее.
Это сети доставки контента, состоящие из серверов, установленных в разных уголках мира. При подключении сайта создаются копии файлов проекта, а после каждому пользователю подгружаются сведения с того сервера, который находится к нему ближе. В результате скорость доставки контента многократно вырастает. Также большой плюс CDN в том, что число серверов, отвечающих на запросы пользователей, больше, чем при обычном размещении. Поэтому при росте трафика скорость ответа на запросы не замедляется и оборудование успевает обрабатывать информацию.
Это два самых распространенных веб-сервера. Причина популярности первого в мощи, второго – в скорости. Из минусов: у Apache ограничена память, а Nginx нуждается в помощи php-fhm или похожих модулей для загрузки динамического контента. Объединив эти два веб-сервера, можно значительно ускорить сайт. Например, Apache можно использовать как бэкенд, а Nginx как фронтенд.
Если сайт тяжелый, лучше использовать VPS, а если очень тяжелый, понадобится выделенный сервер. Для простых сайтов подойдут обычные хостинги. Как правило, на VPS переходят интернет-магазины, крупные порталы, информационные площадки, СМИ и прочие сервисные и контентные проекты.
Если у вас на сайте используется тяжелый файл, например видео, загрузите его через сторонние сервисы (YouTube и прочие). Не нужно грузить через FTP видео весом 1 Гб. Это позволит сэкономить ресурсы вашего сервера и улучшить юзабилити. На Ютубе, к примеру, плеер очень хороший, даже при просмотре на низкой скорости видео обычно не прерывается и грузится корректно.
Пожалуй, один из главных тормозов всех сайтов – это тяжелые изображения. Это банально, всем известно, но актуально до сих пор. Существует множество способов оптимизации, за счет которых можно уменьшить вес файла, сохранив качество. Дополнительно, если качество все же важно, загрузите картинку по ссылке без сжатия. Если кому-то нужна полная версия, то он найдет ее, перейдя по ссылке. Можно попробовать конвертировать изображение в формат WebP, который, по данным Google, легче PNG и JPEG.
Чаще всего скорость работы CMS замедляют плагины, расширения, модификации. Оптимизируйте их или используйте только по мере надобности, отключите ненужные (особенно актуально для 1C-Bitrix и WordPress). Также обычно коды платных CMS «чище», чем коды бесплатных. Потому что платными на регулярной основе занимаются штатные специалисты и постоянно их совершенствуют, бесплатными занимаются волонтеры и вносят изменения, если появляется такое желание.
Поисковыми системами лучше воспринимаются сайты на платных CMS, потому что на них редко создаются сомнительные проекты. Сайты, созданные на конструкторах, не стоит всерьез рассматривать для SEO-продвижения. Там очень сильно смешаны шаблонные коды, причем так, что легче написать заново, чем оптимизировать имеющиеся.
Это утилита для сжатия базы данных. Несмотря на дополнительную нагрузку сервера, обеспечивается повышение скорости сайта и уменьшение объема загружаемых данных. Это позволяет сэкономить ресурсы. С помощью Gzip браузер загружает страницу быстрее, так как сначала загружает архив, а потом распаковывает его и отображает контент. Для использования алгоритма нужно всего лишь добавить в файл .htaccess несколько строчек кода, что занимает не так много времени.
Это упрощение кода, исключение лишних процессов. Иногда 10 строчек можно легко заменить на одну, результат не изменится, а скорость повысится. Это особенно актуально для старых сайтов и бесплатных CMS, так как разработчики, как правило, не заинтересованы раскручивать бесплатные проекты, поэтому не оптимизируют их.
CSS рекомендуется размещать в начале страницы (некоторые там оставляют главный CSS, а остальное убирают вниз), а скрипты лучше спустить ниже, чтобы они подгрузились позже всего важного. Счетчики аналитики публикуют в начале, лучше в теге <head>, а дополнительные виджеты – в конце. Таким образом браузер начнет грузить страницу с самого важного, второстепенное может подождать, ведь его позднее появление ничего, по сути, не изменит.
Избавьтесь от редиректа (переадресации). Даже переход с site.com -> www.site.com -> m.site.com замедляет работу. Происходят лишние процессы, выполняются лишние запросы – все это впустую тратит ценное время.
Для удобства некоторые программисты вставляют комментарии в код, используют пробелы, отступы, разделители блоков, иногда оставляют разрывы строк, ненужные фрагменты, неиспользуемые библиотеки JavaScript, лишние шрифты, избыточные CSS. Все это можно удалить и ускорить тем самым загрузку страницы. Но справедливости ради отметим, что после этого код будет труднее читать и операции с его правкой, редактированием, доработкой займут больше времени. Удаление ненужных символов и называется минификацией. Лучше начать минификацию с HTML, CSS и JavaScript, так как они важны и определяют, как будет выглядеть ваш сайт.
Довольно распространенная ситуация, когда для красоты добавляют анимированные элементы. Старайтесь их использовать минимально, только там, где это действительно необходимо. Не перегружайте ими страницу.
После чистки кода можно перейти к настройке отображения скриптов. CSS и JavaScript можно загружать синхронно или асинхронно. В первом случае скрипты подгружаются по порядку, как они идут в коде, сверху вниз. А во втором – некоторые из скриптов могут запускаться одновременно. Асинхронная работа ускоряет загрузку страницы.
Некоторые скрипты можно отложить до тех пор, пока не загрузится самое важное. Так вы сэкономить ресурсы, и скорость загрузки увеличится.
Это процесс, когда сначала грузится шапка и первый экран, а потом все остальное. Похожая оптимизация используется в компьютерных играх, когда грузится только место вокруг игрока. Таким образом оптимизируется работа ЦП и грамотно используется оперативная память устройства, так как одновременно загружать всю карту большой игры очень тяжело, нам бы просто не хватило мощности.
«Ленивая» загрузка раньше использовалась на AliExpress. При скроллинге главной страницы после «дна» сайта открывался новый блок с товарами. После пролистывания этого блока открывался еще один и так далее. Если бы такое огромное количество товаров открывалось сразу, страница грузилась бы несколько десятков секунд.
Напоследок рассмотрим вопрос двух версий сайтов. Процент пользователей, заходящих с мобильных устройств, очень высокий, и во многих тематиках такого трафика даже больше, чем десктопного. Существуют два популярных способа оптимизации под мобильные устройства – мобильная версия, доступная на отдельном поддомене, и адаптивная верстка, при которой один и тот же код отображается по-разному в зависимости от параметров устройства пользователя.
Сайт грузится быстрее.
Пользователь легко может перейти на нужную версию.
Возможна полноценная оптимизация. Это большой плюс. Юзабилити, дизайн, текстовый контент и многое другое можно разработать специально под смартфоны, потому что чаще всего в варианте для десктопов есть блоки, ненужные при использовании с телефона или планшета. При адаптивной верстке страница на мобильном устройстве будет перегружена.
Содержание обходится дороже, так как ведется двойная работа. Кроме того, существуют сложности при администрировании, добавляются расходы на создание, по сути, двух сайтов. Да и с точки зрения SEO, это не так удобно, придется проделывать лишнюю работу.
Двойной расход времени.
Проблемы для пользователей при передаче ссылок. Например, через WhatsApp кто-то отправит ссылку с мобильной версии, а получатель откроет ее на десктопе и увидит вариант для смартфонов, что не очень удобно. Можно, конечно, изменить адрес вручную, но не каждый догадается так сделать.
Интерфейс не меняется.
Адрес сохраняется.
Содержание и обслуживание обходятся дешевле.
Скорость загрузки ниже.
Нет возможности для полноценной оптимизации под мобильные устройства. Если страница на десктопе длинная, на смартфоне она будет выглядеть как рулон, который при скроллинге никак не заканчивается.
Есть проблемы с повышением скорости загрузки. Можно скрыть отображение некоторых скриптов, но это не решит всех задач по оптимизации.
Исходя из перечисленного понятно, что выигрывает мобильная версия. Поэтому, если вам важна скорость сайта и удобство для пользователей, смело выбирайте этот вариант.
Как бы мы ни старались увеличить скорость сайта, не забывайте о контенте и содержимом, а если у вас коммерческий проект, то и о ценности продукта и выгодах, которые получает клиент при работе с вами. Потому что страница может загружаться быстрее всех, но пользователи будут сразу уходить, если они не получат то, за чем пришли. Все описанное в этой статье будет важным только в том случае, если вы создадите сильное предложение, а ваш бизнес или проект будут конкурентоспособными. После того как вы этого достигнете, можно будет начинать завоевывать пользователей скоростью работы платформы.
Иногда возникают конфликтные ситуации. Например, у нас был скрипт от сервиса аналитики, который сильно замедлял загрузку. Сервис важный, так как с его помощью мы собирали аудиторию и показывали ей рекламу напрямую или находили похожую (look-a-like). Убрать его мы не могли, так как основные заявки получали за счет использования этого инструмента. Отключив код, мы бы потеряли 90% заявок. В результате мы оставили его, сосредоточившись на оптимизации других направлений. То есть при возникновении конфликтной ситуации отталкивайтесь от ценности и потерь, взвешивайте за и против и только после этого принимайте решение.
Если вам нужно повысить скорость загрузки сайта или вы хотите получить SEO-аудит, обращайтесь в digital-агентство «Поисковая индустрия». Будем рады сотрудничеству!
Если у вас есть вопрос
