11 способов ускорить загрузку страницы, чтобы сохранить посетителей сайта

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

Влияние скорости

Google проводил эксперимент и получил 20% снижение трафика из-за того, что страница с результатами поиска стала грузиться на 0,5 секунды дольше.

Если страница интернет-магазина не загружается за 3 секунды, он рискует потерять половину входящего трафика. В результате, многие известные интернет-магазины загружаются менее, чем за 1 секунду.

Влияние скорости еще более выражено на мобильных устройствах, где ограниченная мощность процессора и прерывающиеся соединения являются обычным делом. Согласно данным, опубликованным Kinsta, 74% людей с мобильными устройствами уйдут со страницы, если она не загружается за 5 секунд.

Эффективная и выгодная реклама с сервисом от МегаФона

Широкий выбор рекламных каналов, более 100 параметров по интересам, подробная аналитика и другие возможности уже ждут в Личном кабинете. А еще кешбэк 100% за запуск рекламы в первый месяц и еще 10% — каждый месяц.

Узнать больше >>

Реклама. ПАО «МегаФон». ИНН 7812014560. ОГРН 1027809169585. ERID LjN8K1P7y.

И это в нашем мире, где пользование интернетом с мобильных устройств начинает обгонять настольные компьютеры и ноутбуки. Какой вывод? А такой — если страница не загрузится быстро, некому будет конвертироваться. Да, ваш заголовок важен. Предложение ценности для клиента должно быть четким. Хорошо бы и вся страница выглядела приятно. Социальное доказательство добавляет уверенности. Но если нет скорости загрузки, все это уже не важно!

Вот как это можно исправить. Обратите внимание, что для выполнения некоторых рекомендаций может потребоваться помощь специалистов.

1. Почистите свой код

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

Javascript — это круто. Он позволяет вам добавить разные забавные штуки типа хвоста, тянущегося за курсором мыши по экрану (это сарказм!). Часто Javascript может быть совершенно излишним на посадочной странице. То же самое с Ajax и прочими визуальными штуковинами.

Помните про принцип KISS. Если вы сфокусируетесь на простоте, не нужно тратить силы на всякие дополнительные хитрости.

Но если вам позарез нужны ваши очень важные скрипты, то, по крайней мере, загрузите как можно скорее контент, который «выше сгиба» (above the fold), а потом уже все остальное. Это рекомендуемый Google метод.

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

2. Минимизируйте HTML и CSS

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

Если вы сомневаетесь, просто откройте Google PageSpeed Insights, введите свой URL и отправьте результаты разработчику, которому вы доверяете.

3. Примените GZIP-сжатие

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

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

4. Минимизируйте редиректы

301-редиректы — это стандартная практика SEO, чтобы показать поисковым серверам, что определенная страница была перенесена на другой URL. Это стандартная практика, использующаяся тогда, когда сайты и страницы эволюционируют со временем. 301-редирект помогает избежать несуществующих страниц и ошибок-404.

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

Screaming Frog поможет быстро определить все редиректы на вашем сайте. На примере ниже мы видим, что 14% страниц сайта Runnersworld.com содержат редиректы. Упс!

Главное здесь — это покопаться поглубже. Почему здесь эти редиректы? Какую цель они преследуют? В примере выше мы видим множество временных 302-редиректов, которые можно попробовать почистить, чтобы увеличить скорость загрузки. Вот детальное руководство от Varvy на этот счет.

5. Перенесите скрипты

Верьте или нет, но даже место размещения скриптов может влиять на время загрузки. Например, если скрипт статистики и отслеживания расположен «выше сгиба» или в секции <head> лендинга, браузер должен будет сначала скачать его и исполнить, и только уже потом показывать посетителю тот контент, за которым он, собственно, и пришел на сайт.

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

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

6. Ограничьте число плагинов WordPress (или другой CMS)

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

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

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

Если вы хотите провести быструю диагностику вашего сайта на WordPress, вам не понравится это предложение, но... Вам надо установить еще один плагин! Plugin Performance Profiler измерит производительность плагинов и их влияние на скорость загрузки, после чего вы сможете принять более обоснованное решение, что оставить, а что выкинуть.

7. Купите нормальный хостинг

Если у вас есть планы когда-то зарабатывать на вашем сайте, как, вероятно, у всех наших читателей, то хостинг за $3 на GoDaddy в этом плохой помощник. Главная проблема в том, что дешевые предложения по хостингу реализованы на разделяемых ресурсах, что означает, что вы делите серверные ресурсы с многими другими сайтами, и высоконагруженные «соседи» могут негативно сказаться на вас.

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

PCMag подготовил рейтинг хостингов с выделенными серверами.

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

8. Используйте подходящий размер картинок

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

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

9. Сжимайте картинки

Следующим шагом должно быть сжатие картинок. Про это часто забывают, а Radware сообщает, что 45% из топ-100 интернет-магазинов не используют сжатые изображения.

Но сжатие картинок может быть едва ли не самым простым действием, которое может дать быстрый результат в плане скорости загрузки. Существует множество бесплатных средств типа TinyJPG или Compressor.io, которые значительно уменьшат размеры файлов. Показанный ниже тест дал 73% сжатия. Умножьте это на все картинки на вашем сайте, и вы поймете огромный масштаб возможного ускорения.

10. Передавайте картинки через CDN

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

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

11. Внешний хостинг

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

Это может быть не так важно для картинок, а видео и аудио лучше всегда хостить на внешнем сервисе. Использование так называемого rich media растет бурными темпами. По прогнозам, 74% мирового интернет-трафика в 2017 году будет составлять видео.

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

Заключение

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

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

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

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