Как повысить скорость загрузки мобильного сайта

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

Сегодня 51,3% всего использования интернета является мобильным. И это число будет расти. Поэтому сегодня и поговорим, как увеличить скорость загрузки сайта для мобильных устройств.

Именно поэтому я рекомендую своим клиентам сосредоточиться на мобильных устройствах, а не на ПК. В частности, вы должны сосредоточиться на своем мобильном сайте.

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

Сегодня я хочу поговорить об очень важном свойстве вашего сайта — скорости загрузки.

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

Вы спросите, насколько быстро?

73% мобильных интернет-браузеров говорят, что регулярно сталкиваются с сайтами, которые загружаются слишком медленно, а порядка 40% сайтов покидают, если они загружаются более трех секунд. Существует также исследование, которое подтверждает, что если сайт не загрузился буквально за мгновение, а это 400 миллисекунд, то люди теряют интерес. Не говоря уже о том, что могучий Google учитывает скорость сайта во время индексации и ранжирования.

Поэтому, если ваш сайт медленный, то и ваша аудитория, и Google будут недовольны. Вы потеряете видимость и трафик.

Итак, какая оптимальная скорость загрузки сайта?

Учтите, если загрузка занимает больше 2 или 3 секунд — вы теряете трафик прямо сейчас.
 

Оптимизация скорости загрузки сайта WordPress

Это нормально, если ваш сайт работает медленно. Существует набор действий, выполнив которые, вы ускорите его и не упустите ни одного посетителя.
 

Проверьте скорость своего сайта

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

Одним из лучших сервисов проверки скорости является Think With Google.

Введите URL вашего сайта в строку поиска и нажмите «Test Now».

Давайте протестим Amazon.com — у него много мобильных покупателей.

Сервис проанализирует сайт при помощи набора различных тестов и покажет насколько хорошо он работает. Этот процесс занимает одну-две минуты.

Когда он закончит проверку, вы увидите результаты по трем категориям:

Особое внимание стоит обратить на первые два показателя: адаптивность к мобильным устройствам (mobile friendliness) и скорость загрузки на мобильных устройствах (mobile speed).

Адаптивность показывает насколько легко просматривать ваш сайт на мобильных устройствах. Это общий показатель производительности.

У Amazon.com эта оценка отличная.

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

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

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

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

Вспомните, когда вы создавали свой сайт, думали ли вы тогда о мобильных устройствах? Предполагаю, что нет (а если думали — погладьте себя по головке =))

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

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

Мобильный сайт легко идентифицируется субдоменом «m.»:

То есть, предполагалось, что мобильный сайт и основной — это два абсолютно разных организма, функционирующих отдельно друг от друга.
Представьте, ресторан быстрого питания с окошком для заказа не выходя из автомобиля (drive-thru). Сайт для настольного ПК — это основная часть ресторана, а мобильный сайт — drive-thru.

Часто это означает, что мобильный сайт располагает только частью информации, по сравнению с полной версией, подобно тому, как заказ еды на drive-thru невозможно назвать полноценным посещением ресторана.

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

Для этого дизайн вашего сайта должен быть адаптивным. Статья в тему — «Как сделать адаптивный дизайн сайта». Адаптивный дизайн позволяет иметь один сайт, который изменяется в зависимости от того, с какого устройства его просматривают. Таким образом, те, кто просматривают ваш сайт с ПК и те, кто с мобильных устройств, будут видеть один и тот же сайт, но на каждом устройстве по-разному.

И Google это понравится! Они говорят об этом так: «Адаптивный дизайн — это рекомендуемая модель дизайна для Google».

Вы наверное подумали: «Ок, здорово, но как это связано со скоростью?».
Дело в том, что сайты с адаптивным дизайном обычно загружаются быстрее, чем те, которые предназначены только для мобильных устройств, поэтому здесь вы получаете огромное SEO-преимущество. Кроме того, если вы используете адаптивный дизайн, ваш сайт будут чаще шерить в соцсетях, а это также хорошо для SEO.

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

Однако, не забывайте, что адаптивный дизайн — это всего лишь один шаг к совершенствованию вашего сайта. Существует еще несколько аспектов, которые следует учитывать.
 

Не перегружайте ваш сайт

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

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

Вот несколько вещей, которые следует учитывать при разработке вашего сайта:

Будьте проще

Как сказал Леонардо да Винчи: «Простота есть основа утонченности».

И теперь, 500 лет спустя, эти слова по-прежнему актуальны. Оглянитесь вокруг: простой дизайн будущего заменил сложный и вычурный дизайн прошлого. Это применимо и к сайтам, особенно к мобильным сайтам.

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

Вот еще один пример простого дизайна от Rug Doctor:

Он не кричащий, но привлекает внимание своим стилем.

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

Сократите действия

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

Подумайте. Почему между клиентом и продажей должно быть 7 шагов, когда их может быть только 3?

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

На мобильном сайте Boden’s очень легко купить продукт. Вы добавляете его в свою корзину, логинитесь и платите.

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

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

Используйте меньше изображений

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

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

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

Такие сайты, как Compressor.io, сделают это быстро.

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

Не используйте кастомные шрифты

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

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

Минимизируйте код

Минимизация — это отличный способ оптимизировать код. А вот краткое определение термина «минимизировать код»: «Минимизировать» — это термин в программировании, который значит сокращение/удаление элементов, которые не влияют на выполнение кода. Минимизация кода позволяет ускорить загрузку страницы, что делает пользователей и поисковики счастливыми.

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

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

Minifycode.com предлагает несколько инструментов, позволяющих упростить HTML, CSS, JavaScript и многое другое.

Если ваш сайт работает на WordPress, у вас есть еще больше возможностей, благодаря плагину Better WordPress Minify.

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

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

Сократите редирект

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

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

Этот процесс происходит с каждым файлом на веб-странице. А это значит, что каждое изображение, файл CSS или JavaScript будут проходить редирект.

В результате это продлевает загрузку страницы еще на несколько секунд. К этому времени ваши пользователи могут уже уйти.

Я рекомендую использовать Varvey Redirect Mapper, чтобы узнать сколько переадресаций на каждой странице вашего сайта:

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

Используйте «ленивую загрузку»

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

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

Еcли вы уверенно работаете с кодом, используйте плагин jQuery:

Для сайтов на WordPress есть плагин BJ Lazy Load:

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

Заключение

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

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

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

Итак, что вы можете сделать прямо сейчас?

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

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