Как сделать ваш мобильный сайт быстрее | htmlbook.ru

Как сделать ваш мобильный сайт быстрее



Богдан Притуляк

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

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

Вот несколько советов о том, как это сделать в 2018 году, когда Google решил запустить свой Mobile First Index.

Не используйте переадресаций

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

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

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

Упростите веб-дизайн ресурса

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

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

Активируйте Google AMP

Активация проекта Google Accelerated Mobile Pages (AMP) на страницах вашего сайта заставит его выглядеть великолепно и быстро загружаться в реальном времени, независимо от платформы устройства. AMP использует ультра-минималистичный HTML, чтобы ускорить загрузку контента на вашей мобильной странице.

Сократите шаги регистрации

Типичный процесс регистрации на веб-сайте включает, как правило, пять-шесть шагов. Чтобы ускорить работу, сократите регистрацию до двух-трёх шагов. Избавившись от лишнего кода, вы сделаете ваш ресурс легче и быстрее.

Включите кеширование браузера

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

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

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

Сделайте SEO своего мобильного сайта

Google Mobile First Index предназначен для использования мобильных сайтов в качестве основы для ранжирования и поиска Google. Индекс Mobile-First дает веб-мастерам мотивацию ускорить работу своих сайтов, поскольку скорость страницы является одним из факторов мобильного SEO. Оптимизация сайта, его быстрая загрузка даст возможность получить сайт, который будет хорошо работать и приносить вам пользу.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.