Скорость загрузки страниц является ключевым фактором в современном цифровом маркетинге. Она оказывает значительное влияние на:
- Время, которое посетители проводят на вашем сайте. Быстрые сайты удерживают внимание посетителей дольше, что увеличивает вероятность конверсии.
- Количество посетителей, которые становятся платящими клиентами. Медленные сайты раздражают посетителей и приводят к тому, что они не возвращаются и не совершают покупки.
- Стоимость за клик (CPC) в платном поиске. Поисковые системы могут понизить рейтинг сайтов с медленной загрузкой страниц, что приведет к увеличению CPC.
- Ранжирование в органическом поиске. Поисковые системы учитывают скорость загрузки страниц при ранжировании сайтов в результатах поиска. Медленные сайты, как правило, занимают более низкие позиции в результатах поиска, что приводит к снижению трафика.
К сожалению, большинство веб-сайтов работают медленно, и это напрямую негативно сказывается на их доходе. Чтобы улучшить скорость загрузки страниц, необходимо оптимизировать код сайта, уменьшить размер изображений, использовать CDN и другие методы оптимизации.
Существует почти бесконечное количество вещей, которыми мы можем заниматься как цифровые маркетологи, и всегда не хватает времени, чтобы успеть со всем. В результате некоторые вещи оказываются на заднем плане.
Одной из вещей, которую кажется чаще всего откладывают, является оптимизация скорости загрузки страницы. Легко понять, почему – большинство людей действительно не осознают важность этой часто недооцененной детали, поэтому они не видят ценности в затратах времени и денег на ее улучшение всего на несколько секунд.
То, что некоторым маркетологам, включая тех, кто фокусируется исключительно на оптимизации для поисковых систем, может показаться незначительным периодом времени, было доказано монументальным данными от гигантов отрасли до наших собственных аналитических данных.
Допустим, вы, подобно мне, хотите максимизировать свои результаты и, конечно же, ваш доход, верно? Тогда давайте начнем делать ваш сайт быстрее, чем смазанная слизь! (Это довольно визуальное представление, не так ли?)
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 (это плохо)
или
https://example.com/services (это тоже плохо)
против
https://example.com/ (это хорошо)
или
https://example.com/services/ (это тоже хорошо)
4. Включите сжатие
Включение сжатия GZIP может значительно сократить время загрузки ваших файлов HTML, CSS, JavaScript, поскольку они загружаются как намного меньшие сжатые файлы, которые затем разжимаются после достижения браузера.
Не беспокойтесь — вашим посетителям не нужно будет выполнять никаких дополнительных действий, потому что все современные браузеры уже поддерживают GZIP и автоматически обрабатывают его для всех HTTP-запросов.
5. Включите кэширование браузера
При включенном кэшировании браузера элементы веб-страницы сохраняются в кеше браузера ваших посетителей, поэтому при следующем посещении вашего сайта или переходе на другую страницу их браузер может загрузить страницу, не отправляя еще один HTTP-запрос на сервер за любыми кэшированными элементами.
После загрузки первой страницы и сохранения ее элементов в кеше пользователя, на последующих страницах нужно загружать только новые элементы. Это может радикально сократить количество файлов, которые необходимо загрузить во время типичной сессии просмотра.
6. Минимизируйте ресурсы
Минимизация ваших файлов CSS и JavaScript удаляет ненужные пробелы и комментарии для уменьшения размера файла и, как следствие, времени его загрузки.
К счастью, это не обязательно делать вручную, потому что существует несколько инструментов онлайн для преобразования файла в его уменьшенную версию.
7. Приоритизируйте контент над скроллом
Ваш веб-сайт может казаться посетителю более быстрым в загрузке, если он закодирован для приоритизации контента над скроллом, то есть контента, который виден до того, как посетитель прокрутит страницу.
Это означает, что необходимо убедиться, что любые элементы, которые появляются над скроллом, также расположены ближе к началу HTML-кода, чтобы браузер мог загружать и рендерить их первыми.
Также крайне важно включить любой CSS и JavaScript, необходимые для рендеринга этой области, встроенно, а не во внешний файл CSS.
8. Оптимизируйте медиа-файлы
Поскольку мобильные устройства с высококачественными камерами стали обычными, а современные системы управления контентом, такие как WordPress, упрощают загрузку изображений, многие люди просто снимают фотографию и загружают ее, не осознавая, что часто изображение в четыре раза больше, чем необходимо.
Это значительно замедляет ваш веб-сайт, особенно для мобильных пользователей.
Оптимизация медиа-файлов на вашем веб-сайте имеет потенциал значительного улучшения скорости страницы, и это довольно легко, поэтому это хорошее вложение времени.
Оптимизация изображений
Выберите оптимальный формат. JPG идеален для фотографических изображений, в то время как GIF или PNG лучше всего подходят для изображений с большими областями сплошного цвета. 8-битные PNG-файлы предназначены для изображений без альфа-канала (прозрачный фон), а 24-битные файлы — для изображений с альфа-каналом.
Убедитесь, что изображения имеют правильный размер. Если изображение отображается на вашем веб-сайте с шириной 800 пикселей, нет смысла использовать изображение шириной 1600 пикселей.
Сжимайте файл изображения. Помимо того, что Adobe Photoshop является лучшей программой для редактирования изображений, у него есть отличные возможности сжатия изображений, начиная с $9.99 в месяц. Вы также можете использовать бесплатные плагины WordPress, такие как WWW Image Optimizer, Imsanity и TinyJPG, которые автоматически сжимают загруженные изображения.
Оптимизация видео
- Выберите оптимальный формат. В большинстве случаев лучше всего подходит MP4, поскольку он производит наименьший размер файла.
- Подавайте оптимальный размер (размеры) в зависимости от размера экрана посетителей.
- Исключите аудиодорожку, если видео используется в фоне как элемент дизайна.
- Сжимайте видеофайл. Я использую Adobe Premiere большую часть времени, но Camtasia также является хорошим выбором.
- Уменьшите продолжительность видео.
- Рассмотрите возможность загрузки видео на YouTube или Vimeo, а не предоставление их локально, и используйте их код встраивания iframe.
Но этого недостаточно, потому что это только царапает по поверхности.
Чтобы действительно оптимизировать медиа на вашем веб-сайте, необходимо подавать изображения с соответствующим размером в зависимости от размера экрана, а не просто изменять их размер.
Существует два способа обработки этого, в зависимости от реализации изображения.
- Изображения внутри HTML вашего веб-сайта могут быть представлены с использованием src set, что позволяет браузеру выбирать, загружать и отображать подходящее изображение в зависимости от размера экрана устройства посетителя.
- Изображения, размещенные через CSS, обычно в виде фоновых изображений, могут быть представлены с использованием запросов медиа, чтобы выбирать подходящее изображение в зависимости от размера экрана устройства посетителя.
Используйте кэширование и CDN
Кэширование позволяет вашему веб-серверу хранить статическую копию ваших веб-страниц, чтобы они могли быть доставлены быстрее в браузер посетителя, а CDN позволяет распределять эти копии по серверам по всему миру, чтобы браузер посетителя мог загружать их с сервера, ближайшего к его местоположению. Это значительно улучшает скорость загрузки страницы. (Пожалуйста, включите изображения, когда они улучшают контент.)