Email *

Оптимизация сайта

Оптимизация сайта

Оптимизация сайта

Оптимизация сайтов – это основная задача современной веб-индустрии и основной фактор, влияющий на успешный онлайн-бизнес. Медленная загрузка вашего сайта заставляет пользователей ждать или искать альтернативные ресурсы, что неизменно ведет к уменьшению посещаемости. Результат – потеря клиентов.

Скорость сайта увеличивает продажи!

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

Согласно исследованиям Aberdeen Group, каждая секунда ожидания загрузки снижает удовлетворенность пользователя на 16%, количество просмотров – на 11% и конверсию – на 7% (конверсия – это отношение общего числа посетителей сайта к количеству посетителей, совершивших целевые действия: подписка на новости, регистрация, покупка товара, отзыв, комментарий и т.д).

Скорость сайта

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

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

Для наглядности разделим этот процесс на три этапа:

  1. Ответ сервера на запрос браузера на загрузку контента.
  2. Загрузка всех данных страницы с сервера.
  3. Обработка кода страницы и всех графических элементов браузером.

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

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

Скорость загрузки

Быстро или медленно – как оценить?

Если пользователь успел моргнуть (0,4 секунды), а страница не загрузилась – это медленно, считают специалисты Google. Компьютерные технологии с 90-х годов шагнули далеко вперед. В то время всемирную сеть часто называли World Wide Wait (всемирное ожидание). Сейчас, по словам специалиста Microsoft Гарри Шума, преимущество в скорости загрузки всего в 0,25 секунды дает огромное преимущество в индексации в сравнении с аналогичным сайтом. То есть, если сайт вашего конкурента загружается на 0,25 секунды быстрее, вы окажетесь позади.

Скорость сайта

Другие цифры, подтверждающие роль оптимизации сайта в развитии бизнеса, согласно статистике. 1 из 4 пользователей закроют страницу, если она загружается более 4 секунд. 3 из 4 посетителей с мобильных устройств закрывают страницу, если она загружается более 5 секунд. При этом у владельцев сайта есть всего 5 секунд для того, чтобы заинтересовать посетителя, который уже загрузил страницу! 46% пользователей не посещают медленные сайты повторно. Каждая лишняя секунда загрузки сайта для таких крупных интернет-магазинов, как Amazon, может стоить больших финансовых потерь (до 1,6 млрд. долларов в год).

47% посетителей интернет-магазинов ждут загрузки не более 2 секунд. Еще 40% уйдут с сайта на третьей секунде загрузки. При этом их посещение даже не успевает регистрироваться счетчиком на сайте. Средняя минимальная скорость загрузки для обеспечения оптимальной конверсии – 2 секунды. Более медленные интернет-магазины будут сильно проигрывать конкурентам.
Восприятие времени ожидания

Восприятие скорости сайта на нейронном уровне.

0,1 секунды – именно столько времени требуется затылочной доле головного мозга для обработки и формирования цветного оптического изображения. То есть, такая скорость даст пользователю иллюзию мгновенной загрузки. От себя добавим, что даже для современных интернет-магазинов с большим количеством изображений товара (пусть и оптимизированных) такая скорость фактически невозможна. И надо сказать, что время загрузки в пределах 1 секунды – это вполне приемлемая скорость, дающая пользователю ощущение непрерывности действий.

Восприятие времени ожидания.

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

В этом и состоит психологический парадокс восприятия времени – мы не хотим ждать 10 секунд в бездействии, но готовы потратить 10 минут в активном поиске.

Аэропорт Хьюстон

С такой же ситуацией столкнулись однажды сотрудники Аэропорта Хьюстон. Пассажиры постоянно жаловались на долгое ожидание багажа. Примерно 1 минуту они тратили на то, чтобы дойти до зала выдачи – и ждали свой багаж примерно 7 минут. Администрация аэропорта была завалена жалобами на плохой сервис.

И тогда было изобретено следующее решение. Вход в здание аэропорта для прибывших пассажиров был перенесен дальше от пункта выдачи багажа. Теперь пассажиры тратили 6 минут на путь до зала – и в течение 2 минут получали свой багаж. Результат – отсутствие жалоб!

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

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

Поэтому все же наша основная задача – увеличение скорости загрузки.

Распространенные ошибки, снижающие скорость загрузки страниц.Качество хостинга

1. Посредственное качество хостинга

Неправильный выбор хостинг-провайдера может повлечь за собой серьезные проблемы. По данным подсчетам, в настоящее время на просторах сети зарегистрировано около 1 миллиарда сайтов. Можно сказать, что интернет-пространство захламлено и перенасыщено. Огромное количество хостинг-провайдеров предлагает множество услуг по обслуживанию интернет-проектов как для бизнеса, так и для любительских ресурсов.

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

Многие хостинг-провайдеры говорят, что у каждого в наше время должно быть наличие высокоскоростного интернет-соединения, но это далеко не так. Думая так, мы сразу теряем аудиторию пользователей мобильных устройств (вне мощных сетей), посетителей из отдаленных регионов и просто нетерпеливых пользователей. Кроме того стоит помнить, что более 3 секунд загрузки – это потеря 40% любой аудитории (источник). И около 80% пользователей больше никогда не вернутся на медленный сайт интернет-магазина.

Поэтому размещение сайта на качественном хостинге – это правильное вложение средств. Более высокая цена в этом случае окупится за счет довольного покупателя.

Виджеты и плагины

2. Большое количество виджетов и плагинов

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

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

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

Перенасыщение рекламной

3. Перенасыщение рекламой

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

Согласно данным исследований, в среднем один рекламный баннер увеличивает скорость загрузки на треть (если до этого сайт был свободным от рекламы и хорошо оптимизированным).

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

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

Перегруженный дизайн

4. Перегруженный дизайн

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

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

Избегайте объемных растровых изображений на фоне сайта. Фон лучше оставить однородным, без текстур. Если же дизайнерская задумка требует изображений на фоне, их можно сделать векторными (SVG) – в таком случае это будет минимальная нагрузка на сервер.

Минималистичный интерфейс принесет гораздо больше, чем обилие мигающих кнопок с надписями «Купить», «Акция», «Скидки», «Только сегодня» и т.д. Обратитесь к хорошему маркетологу, который знает, как правильно и удобно расположить графические элементы на сайте для наилучшей конверсии.

Другая проблема – воспроизводимость контента. Разработчики должны всегда проверять качество отображения графических элементов в различных браузерах. Кроме того, нужно учитывать и географические особенности. Например, некоторые видео с YouTube или Vimeo запрещены к просмотру в отдельных регионах.

Лишний код

5. Лишний код

Это также относится к дополнительным функциям – формы заполнения, онлайн-консультанты, счетчики посещаемости, интерактивные карты – все это несет в себе дополнительный код. Казалось бы, счетчик метрики можно уместить в одну строку. Но каждая строка кода будет отнимать ресурсы соединения.

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

Мобильная верстка6. Затрудненный доступ с мобильных устройств

В 2015 году, согласно данным исследований, число мобильных интернет-пользователей превысит 2 миллиарда. То есть 83% всех посещений веб-страниц со смартфонов и планшетов. Уже в 2013 году 30% посетителей только коммерческих сайтов пользовались мобильными устройствами. И это число постоянно растет.

Поэтому в интернет-бизнесе идет серьезная конкуретная борьба за мобильных пользователей. Согласно исследованиям, 60% пользователей устраивает время загрузки интернет-страницы в 3 секунды. В среднем 3 из 4 посетителей остановят загрузку, если она будет дольше 5 секунд. При этом глобально среднее время загрузки веб-страницы смартфонами составляет от 6 до 10 секунд.

Такие потери времени возникают при плохой оптимизации сайтов под мобильные устройства. Также надо учитывать, что сайты, имеющие полную и мобильную версию, должны иметь правильно установленные редиректы. В нашем случае редиректы нужны для перенаправления пользователя смартфона, набравшего адрес полной версии страницы, на ее мобильную версию. То есть для каждой страницы вида www.site.ru должна иметься страница www.mobile.site.ru для мобильных. И перенаправление на нее должно срабатывать автоматически. Если же некоторые редиректы отсутствуют или работают некорректно, пользователь попадет на полную версию, как правило более объемную, где не сможет найти нужную информацию быстро.

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

Только 10% общего времени загрузки тратится на ответ сервера при запросе браузера. Остальные 90% — это обработка загруженного кода и графического материала. Безусловно, существуют инструменты, оптимизирующие работу скриптов и снижающие время загрузки уже после разработки и тестирования сайта. Но гораздо эффективнее – доверить работу профессионалам, которые изначально напишут качественный код и создадут современный интерфейс, рассчитанный под мобильные устройства.

Итак, мы изложили основные параметры, по которым сайт можно считать оптимизированным — но это далеко не все. В дальнейшем мы будем разбирать основы оптимизации сайтов по пунктам более подробно на примерах конкретных рабочих проектов. До скорых встреч! И не забудьте сжать картинки 🙂