- Как долго посетители остаются на вашем сайте.
- Сколько из них станут платящими клиентами?
- Сколько вы платите за клик (CPC) в контекстной рекламе.
- Ваше место в органической выдаче.
К сожалению, большинство веб-сайтов демонстрируют низкую скорость загрузки страниц, что напрямую негативно сказывается на их доходах.
В сфере цифрового маркетинга мы можем ежедневно заниматься практически бесконечным количеством дел, и времени на все из них никогда не хватает. В результате некоторые задачи откладываются на потом.
Одна из вещей, которой чаще всего уделяется недостаточно внимания, — это оптимизация скорости загрузки страниц. Это легко понять, потому что большинство людей не до конца осознают важность этой часто упускаемой из виду детали, поэтому они не видят смысла вкладывать время и деньги в улучшение скорости загрузки на несколько секунд или меньше.
Для некоторых маркетологов, в том числе и для тех, кто专注于 исключительно поисковой оптимизации, этот промежуток времени может показаться незначительным, однако данные от гигантов индустрии, а также наши собственные аналитические данные, доказали свою огромную значимость.
Предполагаю, что вы, как и я, хотите максимизировать результаты и, конечно же, прибыль, верно? Тогда давайте начнём делать ваш сайт быстрее, чем жирные сопли! (Впечатляющая картинка, не правда ли?)
1. Откажитесь от бюджетного веб-хостинга.
В наше время все мы стараемся экономить деньги, ведь подписки на Raven, SEMrush, Moz и другие инструменты, которыми мы пользуемся ежедневно, быстро накапливаются. Это почти как завести лишнего ребенка.
Один из способов, которым многие пытаются сэкономить деньги, — это выбор недорогого жилья в общей квартире. хостинг Они пытаются втиснуть на сервер столько сайтов, сколько смогут, словно кучка клоунов, набившихся в одну машину. На производительность им наплевать!
Конечно, ваш сайт будет доступен большую часть времени, как и у большинства хостинг-провайдеров, но он будет загружаться настолько медленно, что посетители уйдут разочарованными, так и не превратившись в покупателей.
«Но это почти незаметно!» — настаивают эти покупатели, ищущие выгодные предложения.
Дело в том, что для вас это может быть почти незаметно, потому что это ваш малыш, и вы его любите.
Но все остальные хотят лишь как можно быстрее зайти на ваш сайт и выйти с него.
Люди хотят оставаться на вашем сайте ровно столько, чтобы совершить желаемое действие, будь то получение ответа, покупка товара или достижение какой-либо другой конкретной цели. Если вы немного замедлите их, они, скорее всего, останутся недовольны увиденным и уйдут, не совершив покупку.
Думайте об этом так:
Большинство людей любят своих собственных детей безоговорочно. Но если чужой ребенок кричит, бросает вещи, мешает им провести вечер в ресторане? Они ненавидят этого ребенка. То же самое и с вашим сайтом.
Насколько это действительно важно?
Согласно исследованию, проведенному AmazonРазница всего в 100 миллисекунд — единицу времени, которую человек даже не может воспринять, — оказалась достаточной, чтобы снизить их продажи на 1%. Walmart нашел похожие результаты.
Если эта крошечная единица времени оказывает такое прямое влияние на продажи, то как, по-вашему, повлияет на них дополнительная секунда или больше?
Но на этом все не заканчивается, поскольку скорость загрузки вашего сайта также влияет на органический рейтинг в поисковой выдаче и стоимость кликов.
Иными словами, если ваш сайт загружается медленно, вам следует ожидать, что ваши конкуренты, которые инвестировали в эту критически важную область, перехватят инициативу.
В итоге: забудьте о бюджетном веб-хостинге. Если они продают его как товар широкого потребления (в основном из-за цены), то и к своим клиентам будут относиться как к товару широкого потребления.
Существует множество веб-хостингов, оптимизированных для высокой скорости, особенно для сайтов на WordPress, и некоторые из них предлагают цены, сопоставимые с бюджетными вариантами.
Поэтому поспрашивайте у знакомых, проведите тестирование и инвестируйте в веб-хостинг, который обеспечит производительность, достаточную как для ваших посетителей, так и для Google.
2. Сокращение количества HTTP-запросов
Для отображения и функционирования веб-страницы необходим каждый файл, такой как HTML, CSS, JavaScript, изображения и шрифты, и для каждого из них требуется отдельный HTTP-запрос. Чем больше запросов, тем медленнее будет загружаться страница.
Если вы хоть немного похожи на большинство людей, с которыми я общаюсь, вы, вероятно, думаете: «О, мне не нужно об этом беспокоиться, Джереми. Я знаю, что делаю, и не добавляю на свой сайт кучу ненужного мусора!»
Возможно, это отчасти правда. Вы, конечно, не добавите на свой сайт кучу ненужного мусора, но на более чем 90% сайтов, с которыми я сталкиваюсь, он всё равно присутствует.
Этот лишний вес появился не потому, что его незаметно добавила «фея раздувания», пока вы спали. Он появился потому, что большинство веб-дизайнеров, независимо от их навыков или опыта, не ставят скорость загрузки страниц в приоритет. Печальная правда в том, что большинство из них даже не знают, как этого добиться.
Вот тут-то и начинается проблема:
Большинство тем загружают один или несколько CSS-файлов и несколько JavaScript-файлов. Некоторые, такие как jQuery или FontAwesome, обычно загружаются удаленно с другого сервера, что значительно увеличивает время загрузки страницы.
Это становится еще более проблематичным, если учесть дополнительные файлы CSS и JavaScript, добавляемые плагинами. В итоге легко получить полдюжины или более HTTP-запросов только от файлов CSS и JavaScript.
Если учесть все изображения на странице, каждое из которых требует отдельного HTTP-запроса, ситуация быстро выходит из-под контроля.
- Объединить файлы JavaScript в один файл.
- Объединить CSS-файлы в один файл.
- Сократите или удалите плагины, загружающие собственные файлы JavaScript и/или CSS. В некоторых случаях, как, например, с Gravity Forms, у вас есть возможность отключить их загрузку.
- Используйте спрайты для часто используемых изображений.
- По возможности используйте шрифты, такие как FontAwesome или Ionic Icons, вместо графических файлов, поскольку в этом случае нужно будет загрузить только один файл.
3. Добавьте завершающую косую черту.
Отсутствие завершающей косой черты в ссылках, ведущих на ваш веб-сайт, будь то из внешних источников (в рамках усилий по наращиванию ссылок) или изнутри вашего собственного веб-сайта, негативно сказывается на скорости загрузки.
Вот как:
При переходе по URL-адресу без завершающей косой черты веб-сервер будет искать файл с таким именем. Если он не найдет файл с таким именем, он будет рассматривать его как каталог и искать файл по умолчанию в этом каталоге.
Другими словами, опуская завершающую косую черту, вы заставляете сервер выполнить ненужное перенаправление 301. Хотя вам это может показаться мгновенным, на самом деле это занимает немного больше времени, и, как мы уже выяснили, каждая мелочь в сумме дает результат.
https://example.com (this is bad)
or
https://example.com/services (this is also bad)
против
https://example.com/ (this is good)
or
https://example.com/services/ (this is also good)
4. Включить сжатие
Включение сжатия GZIP может значительно сократить время загрузки файлов HTML, CSS и JavaScript, поскольку они загружаются в виде гораздо меньших по размеру сжатых файлов, которые затем распаковываются по мере попадания в браузер.
Не беспокойтесь — вашим посетителям не придётся ничего дополнительно делать, поскольку все современные браузеры поддерживают GZIP и автоматически обрабатывают его для всех HTTP-запросов.
5. Включить кеширование браузера
При включенном кэшировании в браузере элементы веб-страницы сохраняются в браузере ваших посетителей, поэтому при следующем посещении вашего сайта или другой страницы их браузер сможет загрузить страницу без необходимости отправлять повторный HTTP-запрос на сервер для получения каких-либо кэшированных элементов.
После загрузки первой страницы и сохранения ее элементов в кэше пользователя, на последующих страницах необходимо загружать только новые элементы. Это может значительно сократить количество файлов, которые необходимо загрузить за один сеанс просмотра.
6. Сократить ресурсы
Минимизация файлов CSS и JavaScript удаляет ненужные пробелы и комментарии, уменьшая размер файлов и, как следствие, время их загрузки.
К счастью, это не обязательно должен быть ручной процесс, поскольку в интернете доступно несколько инструментов для преобразования файла в уменьшенную, минифицированную версию.
Для WordPress также доступно несколько плагинов, которые заменят ссылки в разделе <head> ваших обычных CSS и JavaScript файлов на их минифицированные версии без изменения исходных файлов, включая популярные плагины кэширования, такие как:
- W3 Total Cache
- WP Super Cache
- WP Rocket
Настройка параметров может потребовать некоторых усилий, поскольку минификация часто приводит к сбоям в работе CSS и JavaScript, поэтому после минификации обязательно тщательно протестируйте свой веб-сайт.
7. Определите приоритет над содержанием
Ваш веб-сайт может казаться посетителю загружающимся быстрее, если в его коде приоритет отдается контенту, видимому до того, как посетитель прокрутит страницу.
Это означает, что необходимо обеспечить размещение всех элементов, отображаемых в верхней части страницы, как можно ближе к началу HTML-кода, чтобы браузер мог загрузить и отобразить их первыми.
Также крайне важно включать все необходимые для отображения этой области CSS и JavaScript непосредственно в код, а не в отдельный CSS-файл.
8. Оптимизация медиафайлов
Поскольку мобильные устройства с высококачественными камерами широко распространены, а современные системы управления контентом, такие как WordPress, позволяют удобно загружать изображения, многие люди просто делают снимок и загружают его, не понимая, что зачастую изображение как минимум в четыре раза больше, чем необходимо.
Это значительно замедляет работу вашего сайта, особенно для пользователей мобильных устройств.
Оптимизация медиафайлов на вашем сайте может значительно улучшить скорость загрузки страниц, и сделать это относительно легко, поэтому это хорошая инвестиция вашего времени.
Оптимизация изображений
- Выберите подходящий формат. JPG идеально подходит для фотографий, а GIF или PNG — для изображений с большими областями сплошного цвета. 8-битные файлы PNG предназначены для изображений без альфа-канала (прозрачный фон), а 24-битные — для изображений с альфа-каналом.
- Убедитесь, что изображения имеют правильный размер. Если изображение отображается на вашем веб-сайте шириной 800 пикселей, нет смысла использовать изображение шириной 1600 пикселей.
- Сожмите файл изображения. Помимо того, что Adobe Photoshop является лучшей программой для редактирования изображений, она обладает потрясающими возможностями сжатия изображений и стоит от 9.99 долларов в месяц. Вы также можете использовать бесплатные плагины WordPress, например, Оптимизатор изображений WWW, Imsanityа также TinyJPG, которые автоматически сжимают загруженные изображения.
Оптимизация видео
- Выберите оптимальный формат. В большинстве случаев лучше всего подходит формат MP4, поскольку он обеспечивает наименьший размер файла.
- Оптимальный размер (диаметр) экрана должен соответствовать размеру экрана посетителей.
- Если видео используется в качестве фонового элемента дизайна, удалите звуковую дорожку.
- Сожмите видеофайл. Я чаще всего использую Adobe Premiere, но Camtasia тоже неплохой вариант.
- Сократите продолжительность видео.
- Рассмотрите возможность загрузки видео на YouTube или Vimeo вместо их локального размещения и использования кода встраивания iframe.
Однако на этом останавливаться не стоит, потому что это лишь верхушка айсберга.
Для того чтобы по-настоящему оптимизировать медиаконтент на вашем веб-сайте, необходимо показывать изображения соответствующего размера в зависимости от размера экрана, а не просто изменять их размер.
Существует два способа решения этой проблемы, в зависимости от реализации изображения.
- Изображения в HTML-коде вашего сайта можно отображать с помощью атрибута src, что позволяет браузеру выбирать, загружать и отображать соответствующее изображение в зависимости от размера экрана устройства, которое использует посетитель.
- Изображения, размещенные с помощью CSS — как правило, в качестве фоновых изображений, — могут отображаться с использованием медиа-запросов для выбора соответствующего изображения в зависимости от размера экрана устройства, используемого посетителем.
9. Используйте кэширование и CDN.
Кэширование позволяет вашему веб-серверу хранить статическую копию веб-страниц, чтобы они быстрее доставлялись в браузер посетителя, а CDN позволяет распределять эти копии по серверам по всему миру, чтобы браузер посетителя мог загрузить их с сервера, ближайшего к его местоположению. Это значительно повышает скорость загрузки страниц.
___
by Джереми Кнауфф
Источник: SEJ
