Хотя, несомненно, на доход влияют несколько факторов, большинство экспертов говорят, что загрузка бизнес-сайтов в течение 5 секунд почти вдвое увеличивает загрузку сайтов в среднем за 19 секунд.
Исследование также показало, что сайты, загружаемые в течение 5 секунд, имеют:
- 25% более высокая видимость рекламы,
- 35% ниже показатель отказов, и
- 70% длиннее пользовательских сессий.
Именно поэтому нам нужно сосредоточиться на мобильных решениях, чтобы помочь нашему бизнесу добиться успеха. В конце концов, мобильная скорость никогда не была более важной.
$config[code] not foundМедленная скорость загрузки действительно может быть проблемой
По словам Google,
- 1 из 2 человек ожидает загрузки страницы менее чем за 2 секунды.
- 53% посещений с большей вероятностью будут отменены, если загрузка страницы на мобильном устройстве занимает более 3 секунд.
- 46% людей выразили недовольство в ожидании загрузки страниц при просмотре веб-страниц на мобильном устройстве.
Тремя основными факторами, замедляющими работу сайтов в мобильном Интернете, являются количество запросов к серверу, размер файла и последовательный порядок элементов загрузки страниц. Итак, теперь мы выдвинули на первый план причины; давайте доберемся до решения.
Как увеличить скорость мобильного сайта
Измерьте и минимизируйте время отклика вашего сервера
Скорость вашей мобильной страницы зависит не только от вашего кода, но и от важного технического инструмента, называемого сервером.
Чем дольше ваш сервер ожидает ответа на запрос браузера, тем медленнее загружается ваша страница на устройстве. Большинство экспертов в Google рекомендуют, чтобы ваш сервер начал передавать 1улица байт ресурсов в течение двухсот миллисекунд с момента запроса на более оптимальный результат.
Как правило, существует 3 основных метода повышения времени отклика вашего сервера:
- Улучшение конфигурации вашего веб-сервера или программного обеспечения.
- Расширение объема и качества услуг хостинга, в частности, обеспечение достаточного объема памяти и ресурсов процессора.
- Сокращение количества ресурсов, необходимых для ваших веб-страниц.
Используйте CSS для загрузки изображений
Если вы хотите скрыть свои изображения контента для мобильных пользователей, загрузите их в качестве фоновых изображений с помощью CSS и используйте медиазапросы, чтобы их условно скрыть.
Разновидность этого метода используется Amazon для условной загрузки специфичных для устройства изображений.
Минимизируйте количество перенаправлений, чтобы повысить скорость вашей мобильной страницы
Перенаправления - это не что иное, как инструкции, способные автоматически переносить посетителей сайта с одной страницы на другую.
Каждый редирект может потреблять ценные миллисекунды, что приводит к более медленной загрузке страницы. Это особенно проблематично для мобильных устройств, поскольку они часто зависят от ненадежных сетей, чем пользователи настольных компьютеров.
Первым шагом к решению этой проблемы является опрос количества перенаправлений на вашем сайте с помощью таких инструментов, как redirect mapper. Если число слишком велико, уменьшите его или, в идеале, уменьшите его до нуля для достижения наилучших результатов.
Сократите файлы JS и CSS
Больше данных означает избыточный вес страницы. Загрузка ваших страниц на мобильное устройство займет больше времени.
Вот почему большинство веб-разработчиков знают, что им нужно оптимизировать и минимизировать ресурсы для увеличения скорости загрузки страниц.
«Минификация» устраняет избыточность, не влияя на отображение страницы. Широкий спектр инструментов Google может помочь вам устранить такие избыточности, в том числе:
- CSSNano (для CSS)
- UglifyJS (для JS)
Вместо изображений используйте CSS3
Тени, скругленные углы и градиентные заливки - все эти функции могут быть реализованы с помощью CSS, а не изображений.
Это может значительно помочь в уменьшении количества HTTP-запросов, что ускоряет время загрузки в одно и то же время.
Используйте встроенные SVG вместо JPEG
Как и URI данных, SVG (масштабируемая векторная графика) может быть встроена в страницу, чтобы уменьшить количество
Эти файлы могут быть созданы в векторном графическом редакторе, таком как Inkscape, Adobe Illustrator и т. Д. После его создания вы можете открыть его в текстовом редакторе и вставить в свой код.
Примечание. Чтобы встроить SVG в таблицу стилей, сначала необходимо преобразовать ее в URI данных, а затем перейти к следующему шагу.
Так что более или менее подводит итог. Надеюсь, у вас было хорошее и полезное чтение.
Фото через Shutterstock
1
