Мобильные пользователи составляют более 47% трафика сайта. Поэтому для веб-мастеров важно, чтобы их сайт был адаптивным. Тем не менее, адаптивности недостаточно: вы также должны сосредоточиться на том, чтобы сделать свой сайт быстрее, с целью повысить рейтинг сайта, снизить нагрузку на сервер и увеличить конверсию.
Итак, вот топ-10 хаков, которые ускорят адаптивные и мобильные сайты.
1. Уменьшите количество HTTP-запросов
HTTP-запросы в наибольшей степени способствуют снижению скорости мобильной связи. Запрос происходит, когда файл CSS или HTML ссылается на отдельные элементы (скрипты, изображения, таблицы стилей или флэш) и запрашивает браузер загрузить их один за другим. Чем больше компонентов на странице, тем больше времени требуется для загрузки. Таким образом, чтобы повысить скорость вашего мобильного веб-сайта, упростите все элементы на своей странице, ограничьте количество ссылок до семи, удалите все дополнительные формы или функции и сделайте свой текст короче. Кроме того, используйте CSS вместо изображений и объедините несколько таблиц стилей в одну. Также, попробуйте удалить скрипты или держать их внизу, чтобы вашим пользователям не пришлось дольше ждать загрузки содержимого HTML.
2. Используйте кэширование браузера
Все современные браузеры хранят копии файлов вашего сайта. Когда посетитель впервые заходит на ваш сайт, файлы сохраняются на устройстве пользователя. Затем, когда пользователь возвращается на веб-сайт, на следующий день или через неделю, веб-сайт будет загружаться намного быстрее, поскольку некоторый контент уже сохранен и загружен в память браузера. Это называется кэшированием браузера. Включение кэширования браузера, несомненно, может повысить производительность мобильного веб-сайта за счет сохранения файлов. Согласно исследованиям, включение перехвата браузера может мгновенно сократить время загрузки сайта с 2,4 до 0,9 секунды.
3. Удалите ненужные ресурсы
Таблицы стилей не требуют места или форматирования. Код, который мы пишем при разработке сайта, может содержать дополнительный текст, который не нужен браузеру. Поэтому после завершения разработки дизайна сайта вы должны сократить код до меньшего размера. Во-первых, удалите ненужный и нежелательный код, чтобы увеличить скорость вашего сайта. Затем удалите все лишние скрипты или файлы вместе с лишними пробелами и переносами строк, вы можете сделать это вручную или использовать автоматизированные инструменты, такие как cleancss.com. Очистка кода, используемого для отображения веб-страницы (Javascript и HTML) и таблиц стилей (CSS-файлы), значительно увеличит скорость вашего сайта.
4. Сжатие изображений
Сжатие изображений может быть полезно для увеличения скорости вашего мобильного веб-сайта. Изображения в формате JPG, PNG и GIF должны быть сжаты на 30-40% для Интернета. Вы должны изменить размер изображения, чтобы оно точно соответствовало предоставленному пространству, и никогда не позволяйте веб-браузеру уменьшать размер изображения. Вы можете использовать графический редактор, такой как Photoshop, чтобы сжать изображение. Если вы используете веб-сайт WordPress, вы можете использовать плагины для сжатия изображений. Попробуйте разные форматы изображений для сжатия размера файла. Также убедитесь, что размер и качество изображения сохранятся.
5. Оптимизируйте все изображения
Неоптимизированные полноразмерные изображения являются наиболее распространенными виновниками медленной загрузки веб-сайта. Изображения размером более 2 МБ потребляют много ресурсов сервера и большую пропускную способность, а также терпение посетителей. При оптимизации изображений вы должны учитывать три вещи: формат, размер и атрибут src. Обрезка изображений до нужного размера может помочь с оптимизацией. Размер 1200 × 1200 работает хорошо с обычным и Retina-дисплеем. Кроме того, старайтесь использовать формат JPEG, а не формат TIFF, GIF или BMB. Удалите все комментарии к изображениям и уменьшите глубину цвета. Проверьте и удалите все пустые <img src = ’….’>, Поскольку они добавляют ненужный трафик на сервер.
6. Сократите время отклика веб-сервера
Скорость мобильного сайта зависит не только от того, насколько хорошо организован и чист код. Она также зависит от того, как долго ваш веб-браузер ожидает получения данных с веб-сайта. Причина этого может варьироваться от нехватки памяти до медленных запросов к базе данных. Вы должны убедиться, что данные получены в течение 200 мс, чтобы сократить время отклика сервера. Вы также можете изменить программное обеспечение веб-сервера и уменьшить ресурсы на своих веб-страницах, чтобы увеличить время отклика вашего сервера. Наконец, выбор наилучшего веб-хостинга может ускорить загрузку страницы.
7. Устраните или уменьшите переадресации
Эксперты Google рекомендуют веб-разработчикам исключить или свести к минимуму количество переадресаций на своей странице, чтобы увеличить скорость. Когда вы заставляете своих пользователей переходить с одной страницы на другую, вы заставляете их тратить больше времени на ваш сайт, в конечном итоге заставляя их ждать загрузки большего количества страниц. Это может сделать ваших посетителей разочарованными и неудовлетворенными вашим сайтом. Технически, переадресации добавляются к числу HTTP-запросов, которые в конечном итоге замедляют работу сайта. Поэтому постарайтесь найти все перенаправления на вашем сайте и устранить их по одному.
8. Уменьшите размеры файла с помощью сжатия Gzip
Сжатие Gzip работает так же, как и обычное сжатие. Разница лишь в том, что сжатие Gzip предназначено для веб-сайтов. Если вы не уверены, используете ли вы сжатие, обратитесь к поставщику хоста. Если вы еще не используете сжатие Gzip, вы можете сделать это, просто включив различные типы файлов в cPanel или добавив код в файл .htaccess. например, text/plain, text/html, text/javascript, text/xml и text/css. Вы также можете сжимать типы файлов, такие как application rss+xml, application/xml, application/javascript, application/xhtml+xml и application x-javascript. Это позволит свести к минимуму размер файла, что сделает ваш сайт быстрее.
9. Разместите CSS сверху и JS внизу вашей веб-страницы:
CSS и JavaScript вносят значительный вклад в производительность сайта. JavaScript используется для создания анимации и интерактивности на веб-сайте. Кроме того, JS позволяет создавать богатый пользовательский интерфейс. Однако основное внимание следует уделять предоставлению контента вашим мобильным пользователям. Итак, отобразите JavaScript после завершения загрузки содержимого HTML. В случае каскадных таблиц стилей (CSS), вы всегда должны размещать его в верхней части, чтобы предотвратить появление неоформленного контента (FOUC). В противном случае ваша страница будет загружена без какой-либо информации о стиле. Оба эти изменения ускорят загрузку страницы и, в конечном счете, ускорят работу сайта.
10. Добавление управляемого хостинга и SSD
SSD (твердотельный накопитель) может повысить производительность вашего сайта, а также увеличить загрузку в 20 раз по сравнению со стандартным HDD. Кроме того, SSD-серверы имеют меньшее время доступа, меньшую задержку и более устойчивы к ударам. Вы также можете разместить свой сайт на выделенном сервере, чтобы ускорить его работу и обеспечить лучший пользовательский интерфейс для ваших клиентов.
Скорость, безусловно, является одним из наиболее важных факторов для хорошего мобильного сайта. Ускорение времени загрузки не только привлечет новых посетителей, но и выделит ваш сайт среди других. Следовательно, вы должны рассмотреть возможность использования этих приемов для повышения производительности вашего мобильного сайта.
Всем успешной работы и творчества!
0 комментариев