Про автора
Егор Меньков — основатель проекта SPARTA MARKETING. Специалист в области контент маркетинга и продаж. Опыт работы в области интернет-маркетинга 8 лет.
Вы когда-нибудь тестировали свой сайт на скорость загрузки? Может быть, вы не знаете, как это сделать? Или вам кажется, что он достаточно быстрый? А может вы вообще не задумывались о том, что скорость загрузки сайта это важно?
Если вы не знаете, как проверить скорость своего сайта, не беспокойтесь, в этой статье мы поделимся несколькими ресурсами, где вы сможете протестировать свой сайт и получить конкретные рекомендации по ускорению вашего сайта.
Чтобы вы понимали, каждая секунда загрузки уменьшает конверсию вашего сайта на 7%.
Скорость важна и для поисковых систем, она является одним из самых важных показателей в ранжировании сайтов.
Также, все больше людей используют свой телефон для того, чтобы зайти на тот или иной сайт. И очень часто это бывает в том случае, когда под рукой нету компьютера и хорошего интернета. В такие моменты быстрый сайт – это необходимость.
Вам кажется, что ваш сайт загружается всего за несколько секунд?
Попробуйте загрузить его на чужом компьютере или телефоне.
Чувствуете разницу?
Все дело в том, что ваш браузер (Chrome, Firefox, Safari и т. д.) сохраняет часть сайта при первом посещении. И уже в последующие разы выдает этот контент быстрее, так как его не надо повторно качать из интернета.
По этой причине сайт на вашем компьютере грузится быстрее, чем у других.
В своей работе мы используем PageSpeed Insights. Это инструмент Google, который показывает, как ваш сайт загружается и отображается на мобильных и компьютерах.
В том случае, если ваш сайт плохо оптимизирован, вы увидите много непонятных рекомендаций.
Не беспокойтесь, ниже я приведу рекомендации, следуя которым, предупреждения на странице PageSpeed Insights сведутся к минимуму.
Для того, чтобы узнать скорость загрузки сайта в секундах используйте сервис tools.pingdom.com или www.webpagetest.org.
Если ваш сайт загружается в течении 3 секунд, а Гугл показывает значение больше чем 80 из 100, то у вас достаточно быстрый сайт.
Дополнительная оптимизация может потребовать больших усилий и даже отказа от некоторых функций, а это может плохо сказаться на конверсии сайта, если эти функции упрощают жизнь посетителей.
В любом случае советуем посмотреть список наших рекомендаций.
Мы отобрали лучшее из нашей практики, есть даже такие советы, которых вышеупомянутые сервисы не учитывают, но они помогут ускорить ваш сайт для посетителей.
13 рекомендаций от «Спарта-Маркетинг»:
Давайте разберемся с каждым пунктом поподробнее.
Основная рекомендация – не экономьте на сервере и никогда не использовать бесплатные услуги!
От качества сервера зависит не только скорость сайта, но и его доступность.
Бесплатные серверы часто “падают” и это приводит к тому, что ваш сайт на какое-то время становиться недоступен.
Профессиональные компании делают максимум для того, чтобы избежать таких ситуаций.
Мы рекомендуем использовать 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, в самом низу вы можете скачать архив-файл, в котором будут находиться те файлы, которые надо заменить для оптимизации вашего сайта.
В случае, если вы используете много различных фоновых картинок или иконок, вы можете объединить их в один файл.
Это позволит сократить количество запросов на сервер. То есть, будет всего один запрос на одну картинку, которую вы будете использовать в нескольких местах.
Само местоположение фона вы можете указать используя CSS.
В начале статьи, я писал, что браузеры сохраняют часть сайта при первом посещении – это и есть кэширование.
Вы можете не подозревать, но на вашем компьютере храниться множество картинок и файлов с различных сайтов.
Для чего это нужно?
Браузеру быстрее воспроизвести файлы с компьютера, чем скачать их с сервера.
Кэширование еще помогает уменьшить нагрузку на сервер. Более разумное использования ресурсов поможет вам не только быстрее загружать ваш сайт, но и экономить на услугах сервера.
Настройте кэширование на максимально долгий срок. Это можно сделать в файле .htaccess, просто добавьте следующий код:
Код будет сообщать браузеру, на какой период надо сохранять файлы на компьютере ваших клиентов.
ВАЖНО! Если вы часто обновляете контент на сайте и название файлов не меняете (например CSS или JS), то эти изменения будут видеть только новые посетители. Более ранние посетители будут видеть старую версию сайта, так как файлы будут загружаться с их компьютера до тех пор, пока срок хранения не истечет.
Спустя определенное время и старые пользователи увидят обновленную версию.
Для решения этой проблемы вам придется менять название файлов или правила кэширования для этих файлов.
Все файлы “яваскриптов” и стилей поместите в конце вашего кода перед </body>
элементом.
Так как браузер считывает код сайта сверху вниз, то все внешние файлы лучше поместить в самом конце.
Это нужно для того, чтобы по мере загрузки страницы, браузер “не отвлекался” на запросы внешних файлов. Сначала загружается структура страницы, и посетитель может начать изучать сайт, пока на фоне подгружаются текстовые файлы.
Важно! Если у вас один скрипт зависит от другого, то соблюдайте очередность.
Например, вы используете код jQuery в середине страницы, в таком случае сама библиотека должны быть выше этого кода. Вам надо будет переместить библиотеку в шапку сайта либо открытый код опустить ниже скриптов в подвале сайта.
Если файлы стилей поместить внизу страницы, то при таком использовании вначале страница будет загружаться без структуры – просто черные буквы на белом фона, и через мгновение все встанет на свои места, когда загрузится файл со стилем.
То есть, при каждой загрузке будет короткий скачок.
Чтобы этого избежать, стиль первого экрана можно прописать открытым текстом в шапку сайта. То есть, HTML загрузиться вместе со стилями первого экрана без дополнительных запросов на сервер и скачиваний внешних файлов.
После многочисленных тестов, мы заметили, что есть определенная очередность, в которой лучше размещать файлы внизу страницы:
При таком порядке PageSpeed Insights не выдает ошибок по поводу приоритизации.
Чтобы уменьшить размер файла, из него можно убрать лишние пробелы, табуляцию и новые строки.
Бесплатные ресурсы, которые помогут вам сжать файлы:
Зачастую карты используют объемные скрипты и очень нагружают браузеры.
Появляется чувство, что сайт становится тяжелым. Он начинает зависать и плохо скролится, особенно на более старых компьютерах или телефонах.
Решение, которые вы можете использовать – просто вставить картинку со ссылкой на Google Maps, Яндекс Карты или другой внешний ресурс.
Таким образом, у пользователя сайт будет грузиться быстрее, а та часть людей, кому нужно детально разобраться с местоположением компании, просто смогут перейти по ссылке, которая откроется в новом окне.
Этот трюк еще сократит количество сторонних ресурсов на сайте. Об этом вы узнаете чуть ниже.
Также, с помощью jQuery, вы можете загрузить IFRAME карты прямо на вашем сайте вместо картинки при нажатии.
Пример такой реализации ниже:
Код для реализации на вашем проекте:
Также как и с внешними картами, встроенные видео из таких ресурсов как Youtube, тоже подгружают дополнительные скрипты и нагружают сайт.
Для живого примера, вы можете посетить следующую страницу проекта “MAKERS” с видео отзывами home.makers.bz/otzivi.
На странице встроены десятки видео из Youtube с отзывами клиентов. При заходе на такую страницу сайт зависает на несколько секунд.
При этом PageSpeed Insights не показывает каких-то ошибок связанных с такой перегрузкой.
Мы рекомендуем запускать видео на сайте с помощью JavaScript.
На месте видео, мы вставляем простую картинку, а при нажатии вместо картинки загружается код с внешним видео файлом.
Пример такой интеграции представлен ниже:
Вот код jQuery, который мы используем для видео из Youtube:
Важно понимать, в каких случаях использовать такой подход.
Например, поисковые системы любят статьи со встроенными видео.
Если мы вставим картинку, которая будет заменяться на видео при нажатии мышки, то поисковый робот не сможет понять что это видео и будет распознавать это место, как простую картинку.
Наш совет – в статьях для SEO используйте встроенные видео, но на страницах и лендингах продуктов, вставляйте картинку со скриптом.
Когда Браузер запрашивает страницу, то сервер может отправлять просто файл или файл сжатый с помощью Gzip технологии.
Это в разы уменьшает размер файла страницы, что в свою очередь позволяет браузеру быстрее его скачать.
Часто на сервере эта функция отключена.
Используйте один из способов для сжатия страниц:
1. Через файл .htaccess:
2. Или в каждом файле отдельно при помощи PHP функции. Вставляйте в самом начале файла:
Обычную картинку можно прописать в текстовом формате и браузер ее распознает и покажет такое изображение пользователю.
В чем плюс использования такой технологии?
Когда на странице мы прописываем картинке текстом, то браузер не запрашивает файлы картинок с сервера и таким образом экономится время, так как уменьшается количество запросов.
Но не все так гладко... есть свои минусы.
Если сравнивать простую картинку и размер текста BASE64 той же картинки, то BASE64 занимает больше места.
Второй минус, который мы заметили, что мобильные устройства медленнее обрабатывают текст BASE64.
Еще при использовании больших картинок в формате BASE64 сайт на мобильном начинает зависать.
Какое решение?
Мы в своей практике используем BASE64 изображения для маленьких картинок и иконок. Так же лучше вставлять их в CSS файл как фон.
Избегайте использования таких картинок в HTML файле.
Использование различных плагинов и сервисов сильно нагружает сайт.
Если вы используете различные сервисы типа Гугл, Яндекс, Фейсбук, Вконтакте и др., то уже могли заметить, что PageSpeed Insight “ругается” на то, что сторонние скрипты используют кэш на очень короткий период.
Это происходит потому, что разработчики постоянно улучшают эти скрипты и не хотят их кэшировать надолго, чтобы любые изменения отображались корректно для всех пользователей.
Еще такие сервисы часто используют ваш сайт в своих интересах.
Например, социальные сети анализируют поведение пользователей на вашем сайте и собирают эти данные.
В этом нет ничего криминального, но такие процессы создают дополнительную нагрузку на ваш сайт, из-за чего он дольше грузится.
Я не призываю вас отключать все плагины и сторонние сервисы.
Просто просмотрите ваши плагины, может есть такие, которые вы установили ранее, но не используете.
Иногда, блоки социальных сетей можно заменить теми же картинками со ссылкой на ваши страницы, чтобы они открывались в новом окне.
Мы много писали о запросах между браузером и сервером.
И вы уже поняли, что каждый запрос занимает определенное время.
Но есть еще такая штука как подключение к серверу. В основном для каждого запроса используется отдельное подключение.
То есть, если на вашей странице используется 20 картинок, то будет произведено 20 отдельных подключений к вашему серверу. Каждое подключение занимает время.
HTTP Keep-Alive позволяет один раз провести подключение к серверу, после чего произвести все запросы и отключиться от сервера.
Для того, чтобы использовать эту функцию на своем сайте, просто впишите следующую строку в файле .htaccess:
Вам когда-нибудь доводилось разговаривать по телефону с другом, который находится на другом континенте? Наверняка, вы замечали эту неприятную задержку в разговоре.
Точно такое же влияние оказывает физическое расстояние между посетителем сайта и сервером.
Чем ближе сервер к пользователю, тем быстрее сигнал доходит из одной точки в другую.
Сеть доставки контента – это решение, которое размещает файлы вашего сайта на различных серверах по всему миру и это позволяет одинаково быстро загружать ваш сайт всем посетителям.
Как это работает?
Например, вы живете в России и храните свой сайт на сервере, который тоже расположен в России.
Местным жителям ваш сайт будет загружаться достаточно быстро. Но если человек зайдет на ваш сайт из Англии, то ему придется подождать дольше, так как расстояние между человеком и сервером увеличивается.
Даже если брать такую страну, как Россия, если сервер физически находиться в Москве, а человек заходит на сайт из Хабаровска, то будет ощутимая задержка при загрузки сайта.
Эту проблему можно решить с помощью CDN (Content delivery network) сервиса.
Вы и дальше будете хранить файлы на своем привычном сервере, а CDN автоматически будет создавать копии ваших файлов по всему миру.
В России вы можете использовать CDNvideo
Если у вас проект международный, тогда вы можете использовать CloudFlare
Данные рекомендации могут выглядеть довольно сложными. Но уверяю вас, эти настройки надо сделать всего один раз, а результат, который вы будете получать от этих решений будет постоянным.
Ваши пользователи будут вам благодарны, ведь все любят быстрые сайты.
Быстрый сайт нравится и поисковым системам. Если вы оптимизируете ваши страницы, то у них будет больше шансов занять более высокие позиции в поиске.
Пишите ваши комментарии или рекомендации под этой статьей.
Если у вас есть вопросы, связанные с продвижением вашего проекта в интернете, пишите нам на почту [email protected]
Скачайте PDF версию статьи на свой компьютер
Введите адрес эл. почты и мы пришлем вам письмо со ссылкой для скачивания PDF файла