Перевод статьи Нила Пателя подготовлен командой TimeDigital CRM
В своих статьях я часто говорю о мобильном мышлении. Почему это имеет такое большое значение? Потому, что мобильность — это реальность современного digital-мышления. Фактически, мобильный телефон важнее, чем ваш настольный ПК.
Сегодня 51,3% всего использования интернета является мобильным. И это число будет расти. Поэтому сегодня и поговорим, как увеличить скорость загрузки сайта для мобильных устройств.
Именно поэтому я рекомендую своим клиентам сосредоточиться на мобильных устройствах, а не на ПК. В частности, вы должны сосредоточиться на своем мобильном сайте.
Адаптивный сайт с ненавязчивыми всплывающими окнами — это современный стандарт для мобильных устройств. Кроме того, обычные правила оптимизации скорости загрузки сайтов, применимые к настольному ПК, также применимы к мобильным устройствам.
Сегодня я хочу поговорить об очень важном свойстве вашего сайта — скорости загрузки.
Ваши пользователи ожидают, что сайт загрузится быстро. Если это не так, вы можете потерять тонну трафика.
73% мобильных интернет-браузеров говорят, что регулярно сталкиваются с сайтами, которые загружаются слишком медленно, а порядка 40% сайтов покидают, если они загружаются более трех секунд. Существует также исследование, которое подтверждает, что если сайт не загрузился буквально за мгновение, а это 400 миллисекунд, то люди теряют интерес. Не говоря уже о том, что могучий Google учитывает скорость сайта во время индексации и ранжирования.
Поэтому, если ваш сайт медленный, то и ваша аудитория, и Google будут недовольны. Вы потеряете видимость и трафик.
Учтите, если загрузка занимает больше 2 или 3 секунд — вы теряете трафик прямо сейчас.
Это нормально, если ваш сайт работает медленно. Существует набор действий, выполнив которые, вы ускорите его и не упустите ни одного посетителя.
Прежде чем делать что-либо, вы должны проверить узнать скорость загрузки сайта. Вам может показаться, что он загружается просто отлично, но в реальности скорость может быть гораздо ниже, чем кажется.
Одним из лучших сервисов проверки скорости является Think With Google.
Давайте протестим Amazon.com — у него много мобильных покупателей.
Адаптивность показывает насколько легко просматривать ваш сайт на мобильных устройствах. Это общий показатель производительности.
У Amazon.com эта оценка отличная.
Сайт предлагает бесплатный отчет, который поможет выявить любые проблемы в работе вашего сайта, и я рекомендую взглянуть на него.
Вспомните, когда вы создавали свой сайт, думали ли вы тогда о мобильных устройствах? Предполагаю, что нет (а если думали — погладьте себя по головке =))
За последние несколько лет мобильные сайты сильно изменились. Раньше считалось, что у сайтов будет две версии: одна для мобильных и одна для настольных компьютеров.
Мобильный сайт легко идентифицируется субдоменом «m.»:
Часто это означает, что мобильный сайт располагает только частью информации, по сравнению с полной версией, подобно тому, как заказ еды на 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 и многое другое.
Конечно, вы должны убедиться, что удалили весь лишний код, но ошибки иногда случаются. Эти инструменты позволяют исправить все ошибки и улучшить сайт одновременно.
Редирект — это здорово, он действительно полезен для SEO-продвижения и для пользователей.
Но, как и код, использовать редирект можно ограничено. Нельзя натыкать редирект по всему сайту и ждать, что он будет хорошо работать. Это связано с тем, что перенаправление по сути замедляет ваш сайт.
Когда вы нажимаете на обычную мобильную ссылку, сервер открывает документ, найденный по этой ссылке. Но по сути, редирект значит, что по этой конкретной ссылке документа нет, поэтому сервер должен перейти на страницу, где документ живет и извлечь его.
В результате это продлевает загрузку страницы еще на несколько секунд. К этому времени ваши пользователи могут уже уйти.
Я рекомендую использовать Varvey Redirect Mapper, чтобы узнать сколько переадресаций на каждой странице вашего сайта:
Очевидно, что изначально пользователи попадают на верхнюю часть страницы, видимую без прокрутки. Так зачем загружать всю страницу сразу? Почему бы не загружать только видимую часть, а потом, по мере необходимости, все остальное?
Такая концепция называется “ленивая загрузка”, и она может творить чудеса со скоростью загрузки сайта. Внедряя “ленивую загрузку”, вы просите ваш сайт выполнять только ту работу, которая от него требуется в данный момент, и не более того.
Еcли вы уверенно работаете с кодом, используйте плагин jQuery:
Скорость — это не только о гоночных автомобилях, но также и один из фундаментальных показателей хорошего мобильного сайта.
Работая со множеством веб-сайтов, я всегда обращаю внимание своих клиентов на производительность мобильного сайта. После того, как сайт адаптирован под мобильные устройства, трафик взлетает, а это неизбежно приводит к росту конверсии и новым клиентам.
И это неудивительно, ведь каждый день мы видим, как люди ходят не отрываясь от своих мобильных телефонов и пальцами приклеиваются к планшетам.
Мобильные телефоны будут всегда. Настольные девайсы по прежнему есть и играют значительную роль в нашей жизни, но за мобильными устройствами будущее. Не сложно представить, как настольные ПК выйдут из употребления, подобно тому, как это было с факсами и дисковыми телефонами. И если это действительно будущее, вам нужно начать готовиться к нему сегодня.
Итак, что вы можете сделать прямо сейчас?
Прежде всего, сделайте ваш сайт максимально легким и быстрым. Повысить скорость сайта — это всего пара действий, которые в перспективе оптимизируют поиск и повысят лояльность вашей аудитории в разы.
Если вы еще не сосредоточились на мобильной версии, то я настоятельно призываю вас начать сегодня.