51,3 % пользователей заходят в интернет с мобильных устройств, и это число будет расти в будущем. Известный американский маркетолог Нил Патель советует уделять больше внимания версии сайта для мобильных устройств. Оригинал взят с сайта neilpatel.com: How to Make Your Mobile Site Load Faster
Быстро реагирующий сайт с ненавязчивыми всплывающими окнами является стандартом для мобильных устройств.
Все рекомендации, касающиеся оптимизации обычных веб-сайтов, могут применяться как в отношении настольных ПК, так и мобильных устройств.
Пользователи хотят, чтобы сайт загружался быстро. Если это не так, вы можете потерять кучу трафика.
«Насколько быстро», – спросите вы?
73 % мобильных интернет-браузеров утверждают, что сталкивались со слишком долго загружающимися сайтами, а 40 % пользователей покидают сайт, если он не загружается в тчеение3 секунд.
Согласно исследованиям, если страница не загружается буквально в мгновение ока, люди теряют интерес. Это составляет 400 миллисекунд.
Не говоря уже о том, что могучий Google учитывает скорость вашего сайта во время его индексирования и ранжирования.
Поэтому, если ваш сайт медленный и ваша аудитория, и Google будут плохого мнения о вас, вы потеряете популярность и трафик.
Итак, насколько быстрый ваш сайт?
Если загрузка занимает больше 2 или 3 секунд, вы теряете трафик прямо сейчас.
Ничего страшного, если ваш сайт работает медленно. Но существуют действия, которые можно предпринять, чтобы ускорить его и не позволить пользователю покинуть ваш сайт.
Содержание
Проверьте скорость своего сайта
В первую очередь нужно проверить, насколько быстро работает мобильная версия вашего сайта на самом деле.
Случается, что вы думаете, что он загружается просто отлично, но на самом деле он оказывается медленнее, чем вы предполагали.
Think With Google является одним из лучших тестов на скорость мобильной версии сайта:
Рис. 1. Один из лучших тестов на скорость мобильной версии сайта Think With Google
Введите URL-адрес в строку поиска и нажмите «Проверить сейчас».
Введите свой обычный URL-адрес, а не свой URL мобильной версии сайта, если у он вас есть (например, m.site.com).
Мы проверим сайт Amazon.com, потому что у него много покупателей, совершающих покупки с помощью мобильных устройств.
Рис. 2. Проверка скорости сайта Amazon.com с помощью Think With Google
Тест анализирует ваш сайт и показывает, насколько хорошо он работает.
Рис. 3. Тест Think With Google
Эта операция займет около минуты или двух.
Как только она будет завершена, Вы увидите три оценки:
Рис. 4. Результаты теста Think With Google
Вам следует обратить наибольшее внимание на первые две оценки: мобильность и скорость.
Адаптированность к мобильным устройствам показывает, насколько легко ваш сайт можно использовать на мобильных устройствах. Это общий показатель производительности.
У Amazon отличная оценка по этому критерию:
Рис. 5. У сайта Amazon отличная оценка с точки зрения оптимизации для мобильных устройств
Но интересно то, что у сайта довольно низкая скорость. Тест оценивает его как медленный.
Сайт предлагает бесплатный отчет, помогающий диагностировать любые проблемы. В свою очередь, я рекомендую принять во внимание советы, которые будут полезны для вашего сайта.
Рис. 6. После проверки сайт предлагает бесплатный отчет
Я предлагаю рассмотреть наиболее распространенные причины медленной работы мобильных версий сайтов и объяснить, что можно сделать, чтобы улучшить их работу.
Идеальный дизайн мобильной версии вашего сайта
Вспомните момент создания своего сайта. Думали ли вы тогда о мобильных устройствах? Думаю, что нет. (Если думали, то погладьте и похвалите себя.)
Абсолютно нормально, что вы не думали о мобильных устройствах, но сейчас настало время пересмотреть дизайн вашего сайта.
За последние несколько лет мобильные версии сайтов сильно изменились.
Раньше считалось, что у сайтов должно быть две версии: одна для мобильных устройств, а вторая для настольных компьютеров.
Мобильный сайт легко идентифицируется по суб-домену «m.»:
Рис. 7. Мобильный сайт идентифицируется по суб-домену «m.»
В таком случае мобильная и компьютерная версии сайта представляют собой две совершенно разных сущности, работающих отдельно друг от друга.
Представьте себе «МакДональдс» с услугой «макдрайв», где компьютерный сайт является «МакДональдсом», а мобильный сайт является «макдрайвом».
Часто это означает, что мобильная версия сайта предоставляет лишь часть тех опций, которые содержит компьютерная версия, подобно тому, как «макдрайв» не предлагает полного ассортимента услуг «МакДональдса».
При этом вы хотели бы предоставить своим пользователям самые лучший пользовательский опыт.
Для этого ваш сайт должен использовать соответствующий адаптивный дизайн.
Такой дизайн позволяет вам сделать сайт динамичным, меняющимся в зависимости от подключения.
Таким образом, пользователи мобильной и компьютерной версий будут смотреть на один и тот же сайт, но на каждом из устройств он будет выглядеть по-разному.
Это, собственно говоря, то, что предпочитает Google. Компания заявляет об этом довольно просто: «Восприимчивый дизайн – это рекомендуемая модель дизайна Google».
Вероятно, вы думаете: «Хорошо, замечательно, но как это связано со скоростью?»
Сайты с восприимчивым дизайном обычно загружаются быстрее, чем сайты, предназначенные только для мобильных устройств, поэтому вы получаете значительное преимущество с точки зрения SEO.
И если вы используете соответствующий восприимчивый дизайн, ваш сайт станет популярнее за счет шеров в социальных сетях, которые также повысят показатели SEO.
Создание быстро реагирующего сайта одинаково выгодная инвестиция как с точки зрения краткосрочных планов, так и более далеких перспектив. Если у вас еще нет такого сайта, я рекомендую вам разобраться с этим как можно быстрее.
Но правильный дизайн сайта – это всего лишь первый шаг к его усовершенствованию.
Вам следует рассмотреть и другие аспекты дизайна.
Сайт не должен быть перенасыщенным
Увлекшись созданием сложного дизайна, Вы обязательно заметите, что сайт начинает работать медленней, но все также продолжаете его усложнять.
Разработчики называют это раздуванием кода.
Раздувание кода происходит тогда, когда Ваш сайт перегружен лишним кодом.
Рис. 8. Что такое «раздувание кода»?
В большинстве случаев, раздувание кода происходит, когда разработчик слишком зациклен на внешнем виде сайта.
Не поймите меня правильно. То, как выглядит сайт, очень важно.
Но производительность сайта не должна занимать последнее место.
К счастью, она и не занимает. Можно усидеть одной задницей на двух стульях.
Вот несколько советов, которые следует учитывать при разработке Вашего сайта:
Пусть он будет простым. Леонардо да Винчи когда-то говорил о простоте следующее:
«Простота – это основа утонченности».
Его слова остаются актуальными и сейчас, спустя около пятьсот лет.
Оглянитесь вокруг. Много проектов прошлого были заменены минималистскими проектами будущего.
Это относится и к веб-сайтам. Особенно к мобильным версиям сайтов.
На экране мобильного телефона сайты легко могут выглядеть слишком перегруженными, поэтому важно, чтобы было много пространства и все выглядело бы упорядочено.
Рис. 9. Хороший и плохой примеры мобильной версии сайта
Желательно, чтобы на странице, был всего один призыв к действию. Это поможет Вам уменьшить размер кода,, а также улучшит работу Вашего сайта.
Возможно, Вам понравится более изысканный дизайн, как на сайте Rug Doctor:
Рис. 10. Пример утонченного дизайна мобильной версии сайта
Он не слишком кричащий, но привлекает внимание своим глянцевым стилем.
Не нужно много ярких цветов и фотографий, чтобы сделать Ваш сайт заметным. Когда речь идет о дизайне для мобильной версии сайта, чем меньше, тем лучше.
Сократите количество действий. Чем меньше Ваши пользователи должны делать, тем лучше.
Подумайте об этом. Почему клиент должен предпринимать 7 шагов для того, чтобы что-то купить, когда вполне достаточно только 3?
Это не только существенно сокращает воронку продаж, но также упрощает работу пользователя.
Многие сайты, занимающиеся онлайн торговлей, используют эту стратегию для увеличения количества продаж.
На мобильной версии сайта Boden очень легко купить продукт. Вы добавляете его в корзину, нажимаете на кнопку «оформление заказа» и платите.
Рис. 11. Простая и понятная структура сайта Boden
Это просто и понятно. Нет никаких лишних шагов.
Естественно, что это помогает уменьшить раздувание кода, поскольку нет лишних страниц.
Сокращение ненужных действий – очень правильная стратегия для Ваших посетителей. Пользователи мобильной версии с большей вероятностью останутся на Вашем сайте, если им не придется выполнять много операций. Сохраните своих пользователей благодаря сокращению количества кликов, и Вы получите достойное вознаграждение.
Используйте меньше изображений. Прежде чем я начну говорить об этом, хочу заметить, что хорошие изображения, безусловно, важны для любого сайта, и у них также есть преимущества с точки зрения SEO.
Однако у Вас может быть слишком много картинок.
Переусердствовав с картинками, Вы замедлите работу своего сайта.
Вы можете и не подозревать, насколько это важно, но изображения составляют примерно 63% «веса» сайта.
С 2011 по 2015 год размер средней мобильной версии страницы увеличился втрое.
Рис. 12. С 2011 по 2015 год размер средней мобильной версии страницы увеличился втрое
Это означает, что изображения являются одними из самых важных элементов сайта. Они занимают много места, поэтому слишком много картинок – это не очень хорошо.
Уменьшение количества изображений – это правильное решение.
Другое (возможно, более практичное) решение состоит в следующем – можно сжать Ваши изображения, таким образом уменьшив размер файлов.
В основном, сжатие уменьшает изображения без ухудшения качества. Это экономит время, необходимое для загрузки сайта.
В качестве бонуса также сокращается время, необходимое поисковым системам для сканирования и индексации Вашего сайта.
Такие сайты, как Compressor.io, могут сделать это в два счета.
Рис. 13. Пример сжатия изображений с помощью сайта Compressor.io
На самом деле, это лучший способ сделать Ваш сайт молниеносно быстрым.
Не используйте нестандартные шрифты. Мне, как и многим другим, нравится хороший нестандартный шрифт. Но у некоторых из них действительно высокие требование к эксплуатации.
Некоторые шрифты используют CSS, а другие JavaScript. В любом случае, Вы сталкиваетесь с кодом большого размера.
Если Вы хотите действительно разобраться в этой теме, почитайте материалы на сайте Google Web Fundamentals.
Если Вам нужна короткая версия того, что там изложено, то вот она: используйте нестандартные шрифты только когда они крайне необходимы.
Оригинальные, нестандартные шрифты для заголовков – это нормально, но не нужно делать злоупотреблять нестандартным шрифтом.
Минимизация кода
Минимизация – это очень полезный метод для оптимизации Вашего кода.
Вот краткое определение того, что означает «минимизировать» код:
Рис. 14. Что такое «минимизация» кода?
«По сути, минимизация кода убирает все лишнее и ненужное. Это гарантия того, что Ваш сайт использует только тот код, который ему нужен».
Это длинный путь, который ведет к «облегчению» Вашего сайта.
Минимизация действительно важна для улучшения работы сайта.
Вы можете минимизировать код вручную, но если у Вас нет опыта кодирования, эта операция может выглядеть немного пугающей.
К счастью, есть несколько доступных методов минимизации кода в кратчайшие сроки.
Сайт Minifycode.com предлагает несколько способов, позволяющих упростить HTML, CSS, JavaScript и многое другое.
Рис. 15. Инструменты минимизации кода
Если Ваш сайт работает в WordPress, у Вас есть еще больше возможностей, благодаря плагинам вроде Better WordPress Minify:
Рис. 16. Инструменты минимизации кода от WordPress
Используя эти методы, Вы можете минимизировать свой код всего за несколько кликов, а это, в свою очередь, поможет ускорить Ваш сайт.
Конечно, нужно сделать все возможное, чтобы убедиться, что нет лишнего кода, но случаются и ошибки. Но предложенные мной методы позволяют справить эти ошибки и, в то же время, улучшить Ваш сайт.
Сократите переадресацию
Мне нравится переадресация. Она может быть действительно полезной для SEO и пользователей.
Но, как и у кода, у переадресации ограниченное использование. Нельзя использовать переадресацию повсюду, и надеяться, что Ваш сайт будет работать хорошо.
Это связано с тем, что переадресация, по сути, замедляет работу Вашего сайта.
Когда Вы нажимаете на обычную мобильную ссылку, сервер предоставляет Вам документ, найденный по этой ссылке.
Но переадресация означает, что по этой конкретной ссылке нет документа. Из-за этого сервер должен перейти на ту страницу, где есть документ, и извлечь его.
Рис. 17. Что такое переадресация?
Такой процесс происходит с каждым файлом на веб-странице. А это означает, что каждое изображение, файл CSS и файл JavaScript будут проходить переадресацию.
В результате, загрузка нужной страницы может занять несколько секунд. К тому времени Ваши пользователи могут покинуть страницу.
Я рекомендую использовать Varvy’s Redirect Mapper, чтобы узнать, сколько переадресаций используется на каждой странице:
Рис. 18. Как определить количество переадресаций на странице?
Затем Вы сможете проследить истоки своих переадресаций и изменить те, которые не являются действительно нужными.
Большинство разработчиков не думают об этом, но именно этот способ принесет полезные изменения для Вашего сайта.
Чем меньше работы должен выполнять Ваш сайт, тем быстрее он будет работать. Несмотря на то, что переадресации бывают очень даже уместны, не злоупотребляйте ими и не становитесь зависимыми от них.
Сначала загрузите превью сайта
Очевидно, что пользователи сначала видят превью сайта, прежде чем увидеть что-либо еще.
Так зачем загружать всю Вашу страницу сразу?
Почему бы не загрузить сначала только превью, а затем загружать остальное по мере необходимости?
Такая концепция, называется «ленивой загрузкой», и она может творить чудеса в отношении скорости сайта.
Готов поспорить, что если бы у Вас был выбор, Вы бы скорее подняли 3 киллограма веса, а не 30. Я прав, не так ли?
Ленивая загрузка – это примерно то же, только в отношении веб-сайтов.
Внедряя ленивую загрузку, Вы просите свой сайт выполнять только необходимую работу.
Если Вы умеете обращаться с кодом, можно использовать вот этот плагин jQuery:
Рис. 19. Использование плагина jQuery
Для сайтов WordPress существуют такие плагины, как BJ Lazy Load – они могут быть для Вас полезными.
Рис. 20. Плагины от WordPress
Если ни один из этих вариантов не подходит, стоит нанять разработчика, который сможет Вам помочь.
Это более совершенный метод. Он сможет уберечь Ваш сайт от выполнения массы лишней работы.
Выводы
Скорость – это важная характеристика не только гоночных автомобилей. Это один из самих фундаментальных компонентов мобильной версии сайта.
Я видел сотни веб-сайтов, и всегда обращаю внимание своих клиентов на работу мобильной версии сайта.
Как только я помогаю своим клиентам улучшить мобильную версию сайта, рост трафика стремительно увеличивается. А это, в свою очередь, неизбежно влечет за собой поток новых клиентов и других изменений.
Это не удивительно. Мы все видим, как современные люди ходят по улице, уставившись в экран мобильного телефона или планшета.
Мобильный телефон – это наша реальность. И он никуда не уйдет.
Производительность настольных компьютеров по-прежнему имеет значение, но мобильные телефоны – это и настоящее, и будущее.
Может однажды наступит день, когда мы будем относиться к ПК как к телефону с дисковым набором или к факсу. Мобильный телефон может стать единственным способом просмотра информации в интернете.
Это не сложно представить, правда?
И если это действительно будущее, Вам нужно начать готовиться к нему уже сегодня.
Итак, что можно сделать прямо сейчас?
Если вкратце, то Ваш сайт должен быть максимально быстрым, а его «вес» должен бать минимальным.
Это отлично сформулировано в статье на сайте Think with Google: «Скорость устраняет трение».
Мобильные пользователи любят очень быстрые сайты и не любят то, что мешает их скорости.
Улучшение скорости мобильной версии сайта – это сильный, быстрый удар. Он может улучить Ваш сайт как для пользователей, так и для поисковых систем.
Если Вы еще не уделили достаточно внимания мобильным телефонам, я настоятельно призываю Вас сделать это уже сегодня.
Источник: neilpatel.com