13 способов повысить скорость загрузки сайта и увеличить конверсию

Автор: Егор МеньковОпубликовано: 2017-05-23Коментариев:

Вы когда-нибудь тестировали свой сайт на скорость загрузки? Может быть, вы не знаете, как это сделать? Или вам кажется, что он достаточно быстрый? А может вы вообще не задумывались о том, что скорость загрузки сайта это важно?

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

Зачем нужен быстрый сайт?

Чтобы вы понимали, каждая секунда загрузки уменьшает конверсию вашего сайта на 7%.

Скорость важна и для поисковых систем, она является одним из самых важных показателей в ранжировании сайтов.

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

Мой сайт грузится достаточно быстро

Вам кажется, что ваш сайт загружается всего за несколько секунд?

Попробуйте загрузить его на чужом компьютере или телефоне.

Чувствуете разницу?

Все дело в том, что ваш браузер (Chrome, Firefox, Safari и т. д.) сохраняет часть сайта при первом посещении. И уже в последующие разы выдает этот контент быстрее, так как его не надо повторно качать из интернета.

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

Скачать PDF версию статьи

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

В своей работе мы используем PageSpeed Insights. Это инструмент Google, который показывает, как ваш сайт загружается и отображается на мобильных и компьютерах.

В том случае, если ваш сайт плохо оптимизирован, вы увидите много непонятных рекомендаций.

Не беспокойтесь, ниже я приведу рекомендации, следуя которым, предупреждения на странице PageSpeed Insights сведутся к минимуму.

Для того, чтобы узнать скорость загрузки сайта в секундах используйте сервис tools.pingdom.com или www.webpagetest.org.

Если ваш сайт загружается в течении 3 секунд, а Гугл показывает значение больше чем 80 из 100, то у вас достаточно быстрый сайт.

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

В любом случае советуем посмотреть список наших рекомендаций.

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

13 рекомендаций от «Спарта-Маркетинг»:

Давайте разберемся с каждым пунктом поподробнее.

Скачать PDF версию статьи

Скорость сервера или хостинга

Основная рекомендация – не экономьте на сервере и никогда не использовать бесплатные услуги!

От качества сервера зависит не только скорость сайта, но и его доступность.

Бесплатные серверы часто “падают” и это приводит к тому, что ваш сайт на какое-то время становиться недоступен.

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

Мы рекомендуем использовать www.beget.ru

Оптимизируйте картинки и изображения

Скорость сайта в основном зависит от величины файлов и количества запросов.

Давайте разберемся с каждым из этих понятий.

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

Так вот, если вы используете 10 разных картинок на странице, то браузер сделает 10 запросов, а сервер выдаст 10 ответов, каждый из которых занимает определенное время.

Время затрачивается как на запросы, так и на скачивание изображения.

Чем больше места занимает файл, тем дольше он будет скачиваться.

Поэтому величина и размер самих фотографий играют очень важную роль.

Если у вас простой сайт, то картинки занимают большую часть места и в основном от их величины и размера зависит скорость загрузки сайта.

Обрезайте картинки
Часто встречаемая ошибка, когда на сайте используют фотографии оригинального размера. То есть, на сервер загружается картинка, ширина которой, например, составляет 1500px, а на самом сайте она отображается с шириной в 600px.

При таком использовании, картинка с сервера скачивается в полном размере – 1500px. После чего она сжимается до 600px по ширине и отображается пользователю.

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

В примере ниже ширина оригинальной картинки 1880px. Размер такой картинки составляет 237,80kb. На сайте в блоке это изображение сжимается до 940px.

Если бы эту картинку изначально загрузили на сервер с шириной в 940px, то ее размер составил бы 142,10kb. Это на 40% меньше!

Размер картинки на сайте

Компрессия изображений
Следующее, что вам нужно будет сделать, это оптимизировать размер самой картинки.

Этого можно добиться уменьшая качество картинки. Человеческий глаз практически не видит разницу между картинкой в 100% и 80% качества.

Для этого, вы можете использовать бесплатный сервис TinyPNG.

Оптимизированное качество картинки

Также сервис PageSpeed Insights автоматически подготавливает нужный размер и формат изображений.

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

Скачать PDF версию статьи

Объединяйте фоновые картинки и иконки

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

Это позволит сократить количество запросов на сервер. То есть, будет всего один запрос на одну картинку, которую вы будете использовать в нескольких местах.

Само местоположение фона вы можете указать используя CSS.

Объединяйте фоновые картинки

Кэширование

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

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

Для чего это нужно?

Браузеру быстрее воспроизвести файлы с компьютера, чем скачать их с сервера.

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

Настройте кэширование на максимально долгий срок. Это можно сделать в файле .htaccess, просто добавьте следующий код:

## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" </IfModule> ## EXPIRES CACHING ##

Код будет сообщать браузеру, на какой период надо сохранять файлы на компьютере ваших клиентов.

ВАЖНО! Если вы часто обновляете контент на сайте и название файлов не меняете (например CSS или JS), то эти изменения будут видеть только новые посетители. Более ранние посетители будут видеть старую версию сайта, так как файлы будут загружаться с их компьютера до тех пор, пока срок хранения не истечет.

Спустя определенное время и старые пользователи увидят обновленную версию.

Для решения этой проблемы вам придется менять название файлов или правила кэширования для этих файлов.

Скачать PDF версию статьи

Поместите текстовые файлы внизу сайта

Все файлы “яваскриптов” и стилей поместите в конце вашего кода перед </body> элементом.

Поместите текстовые файлы внизу сайта

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

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

Важно! Если у вас один скрипт зависит от другого, то соблюдайте очередность.

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

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

То есть, при каждой загрузке будет короткий скачок.

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

Стиль первого экрана в шапке сайта

После многочисленных тестов, мы заметили, что есть определенная очередность, в которой лучше размещать файлы внизу страницы:

CSS файлы;
файлы шрифтов;
JavaScript файлы.

При таком порядке PageSpeed Insights не выдает ошибок по поводу приоритизации.

Сжатие CSS, JS и HTML файлов

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

Бесплатные ресурсы, которые помогут вам сжать файлы:

csscompressor.com – оптимизация CSS файлов
jscompress.com – оптимизация JS файлов
kangax.github.io/html-minifier/ – оптимизация HTML файлов

Скачать PDF версию статьи

Внешние карты на сайте замените картинками

Зачастую карты используют объемные скрипты и очень нагружают браузеры.

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

Решение, которые вы можете использовать – просто вставить картинку со ссылкой на Google Maps, Яндекс Карты или другой внешний ресурс.

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

Этот трюк еще сократит количество сторонних ресурсов на сайте. Об этом вы узнаете чуть ниже.

Также, с помощью jQuery, вы можете загрузить IFRAME карты прямо на вашем сайте вместо картинки при нажатии.

Пример такой реализации ниже:

Код для реализации на вашем проекте:

HTML

<div class="map-show-on-click" data-map-height="400" data-map="ССЫЛКА ИЗ IFRAME*"> <img src="img/karta-iz-google-maps.jpg" alt="Карта вашего бизнеса"> </div>

jQuery

$(".map-show-on-click").click(function () { var map = $(this).attr("data-map"); var map_width = $(window).width(); var map_height = $(this).attr("data-map-height"); $(this).css("height",map_height); if (map_width > 640) { map_width = 640; } $(this).html('<iframe src="'+map+'" width="'+map_width+'" height="'+map_height+'" frameborder="0" style="border:0" allowfullscreen></iframe>'); });

Заметки

* – ссылка из Google Maps Iframe. Её можно найти в значении src="".
1. data-map – ссылка карты, подставляйте туда свое значение.
2. data-map-height – высота карты после того, как она загрузится.
3. map_width – ширина карты. В данном примере мы проверяем ширину нашего экрана if (map_width > 640) { map_width = 640; }. Но если вы хотите разместить карту по всей ширине, уберите эту строку.

Запускайте видео на сайте при помощи JavaScript

Также как и с внешними картами, встроенные видео из таких ресурсов как Youtube, тоже подгружают дополнительные скрипты и нагружают сайт.

Для живого примера, вы можете посетить следующую страницу проекта “MAKERS” с видео отзывами home.makers.bz/otzivi.

На странице встроены десятки видео из Youtube с отзывами клиентов. При заходе на такую страницу сайт зависает на несколько секунд.

При этом PageSpeed Insights не показывает каких-то ошибок связанных с такой перегрузкой.

Мы рекомендуем запускать видео на сайте с помощью JavaScript.

На месте видео, мы вставляем простую картинку, а при нажатии вместо картинки загружается код с внешним видео файлом.

Пример такой интеграции представлен ниже:

Запускайте видео на сайте при помощи JavaScript

Вот код jQuery, который мы используем для видео из Youtube:

HTML

<div class="video-play-on-click" data-video="1atbfF9mM8w"> <img src="img/video-iz-youtube.jpg" alt="Какая реклама в интернете самая эффективная?"> </div>

jQuery

$(".video-play-on-click").click(function () { var link = $(this).attr("data-video"); if ($(window).width() <= 500) { $(this).html('<iframe width="280" height="157" src="https://www.youtube.com/embed/'+link+'?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>'); } else { $(this).html('<iframe width="640" height="360" src="https://www.youtube.com/embed/'+link+'?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>'); } });

Заметки

1. data-video – уникальный код видео из Youtube, подставляйте туда свое значение.
2. В jQuery коде мы проверяем ширину экрана, это нужно для того, чтобы корректно отображать видео на десктопе и на мобильном устройстве. В случае необходимости впишите туда свои значения.

Важно понимать, в каких случаях использовать такой подход.

Например, поисковые системы любят статьи со встроенными видео.

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

Наш совет – в статьях для SEO используйте встроенные видео, но на страницах и лендингах продуктов, вставляйте картинку со скриптом.

Скачать PDF версию статьи

Компрессия страницы при помощи Gzip

Когда Браузер запрашивает страницу, то сервер может отправлять просто файл или файл сжатый с помощью Gzip технологии.

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

Часто на сервере эта функция отключена.

Используйте один из способов для сжатия страниц:

1. Через файл .htaccess:

<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>

2. Или в каждом файле отдельно при помощи PHP функции. Вставляйте в самом начале файла:

<?php if ( substr_count( $_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip' ) ) ob_start("ob_gzhandler"); else ob_start(); ?>

Используйте BASE64 картинки

Обычную картинку можно прописать в текстовом формате и браузер ее распознает и покажет такое изображение пользователю.

В чем плюс использования такой технологии?

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

Но не все так гладко... есть свои минусы.

Если сравнивать простую картинку и размер текста BASE64 той же картинки, то BASE64 занимает больше места.

Второй минус, который мы заметили, что мобильные устройства медленнее обрабатывают текст BASE64.

Еще при использовании больших картинок в формате BASE64 сайт на мобильном начинает зависать.

Какое решение?

Мы в своей практике используем BASE64 изображения для маленьких картинок и иконок. Так же лучше вставлять их в CSS файл как фон.

Избегайте использования таких картинок в HTML файле.

Скачать PDF версию статьи

Используйте как можно меньше сторонних сервисов и плагинов

Использование различных плагинов и сервисов сильно нагружает сайт.

Если вы используете различные сервисы типа Гугл, Яндекс, Фейсбук, Вконтакте и др., то уже могли заметить, что PageSpeed Insight “ругается” на то, что сторонние скрипты используют кэш на очень короткий период.

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

Еще такие сервисы часто используют ваш сайт в своих интересах.

Например, социальные сети анализируют поведение пользователей на вашем сайте и собирают эти данные.

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

Я не призываю вас отключать все плагины и сторонние сервисы.

Просто просмотрите ваши плагины, может есть такие, которые вы установили ранее, но не используете.

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

HTTP Keep-Alive функция

Мы много писали о запросах между браузером и сервером.

И вы уже поняли, что каждый запрос занимает определенное время.

Но есть еще такая штука как подключение к серверу. В основном для каждого запроса используется отдельное подключение.

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

HTTP Keep-Alive позволяет один раз провести подключение к серверу, после чего произвести все запросы и отключиться от сервера.

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

<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

Скачать PDF версию статьи

Используйте сеть доставки контента (CDN)

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

Точно такое же влияние оказывает физическое расстояние между посетителем сайта и сервером.

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

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

Как это работает?

Например, вы живете в России и храните свой сайт на сервере, который тоже расположен в России.

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

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

Эту проблему можно решить с помощью CDN (Content delivery network) сервиса.

Вы и дальше будете хранить файлы на своем привычном сервере, а CDN автоматически будет создавать копии ваших файлов по всему миру.

В России вы можете использовать CDNvideo

Если у вас проект международный, тогда вы можете использовать CloudFlare

Заключение

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

Ваши пользователи будут вам благодарны, ведь все любят быстрые сайты.

Быстрый сайт нравится и поисковым системам. Если вы оптимизируете ваши страницы, то у них будет больше шансов занять более высокие позиции в поиске.

Пишите ваши комментарии или рекомендации под этой статьей.

Если у вас есть вопросы, связанные с продвижением вашего проекта в интернете, пишите нам на почту [email protected]

Скачать PDF версию статьи

Понравилась статья? Подпишись на нашу рассылку!

Получай один раз в месяц сводку всех наших публикаций

Про автора

Егор Меньков — основатель проекта SPARTA MARKETING. Специалист в области контент маркетинга и продаж. Опыт работы в области интернет-маркетинга 8 лет.

Sparta Marketing