Как ускорить работу сайта
Ваш сайт — это место, где особенно важно произвести хорошее первое впечатление. И речь идет не только о качественном дизайне и контенте, но и удобстве работы со страницами в целом. Медленный сайт может принести много неприятностей: повлиять на репутацию, снизить конверсию и отпугнуть потенциальных покупателей или клиентов. Поэтому важно обеспечить быструю загрузку страниц: выбрать качественный конструктор сайтов, оптимизировать изображения и избежать переизбытка элементов дизайна. Мы собрали 10 техник по оптимизации сайта, после которых страницы начнут загружаться значительно быстрее.
Что такое оптимизация сайта и почему она важна
Скорость сайта — это время, которое проходит от клика на ссылку до полной загрузки страницы. Быстрым считается сайт, который полностью загружается менее чем за три секунды.
Может показаться, что пара лишних секунд загрузки мало что меняет. Однако на самом деле скорость сайта влияет на несколько ключевых бизнес-показателей: удобство использования, вовлечение пользователей, конверсия и индексация в поисковых системах.
Удобство использования. Все просто — чем быстрее загружается сайт, тем быстрее посетитель может воспользоваться его функциями: например, зайти в онлайн-магазин или обратиться в службу поддержки. Быстрый сайт создает счастливых клиентов, которые с большей вероятностью вернутся за следующей покупкой. Вовлечение пользователей. У быстрого сайта больше шансов удержать внимание пользователя. Например, если процесс оплаты в онлайн-магазине занимает слишком много времени, клиент может потерять терпение и не довести покупку до конца. То же самое относится к заполнению онлайн-форм и просто переходам между страницами.
Конверсия: Согласно исследованию, задержка на одну десятую секунды может снизить конверсию на 7 процентов. А теперь представьте, как сильно может повлиять на посещаемость сайта задержка на одну или две секунды. Если пользователю некомфортно работать с сайтом, он без промедления перейдет на страницу ваших конкурентов.
Индексация в поисковых системах. Поисковые системы учитывают скорость сайта при индексации. Это значит, что у быстрого сайта больше шансов подняться на верхние строчки поисковых запросов.
Как ускорить работу сайта: 10 лучших приемов.
Не перегружайте главную страницу
Сконцентрируйтесь на обложке
Сократите количество медиафайлов
Оптимизируйте изображения
Подумайте над взаимодействием текста и изображений
Отдайте предпочтение текстовому контенту
Ограничьте количество стилей и шрифтов
Ограничьте количество анимированных изображений
Оптимизируйте сайт под смартфоны
Ограничьте количество сторонних приложений
1. Не перегружайте главную страницу
Пожалуй, самый важный совет в статье: главная страница должна быть лаконичной и максимально понятной для пользователя. Большое количество контента (текст, видео, статичные и анимированные изображения) может отпугнуть посетителя и отвлечь его от важных функций и сервисов. Функция главной страницы — донести суть сайта и побудить посетителя изучить его более подробно. Поэтому оставьте на ней только самое необходимое, и разместите подробную информацию на других страницах — например, «О компании» или «Фотогалерея». Чтобы облегчить навигацию, используйте CTA (призывы к действию). Например, если вы хотите акцентировать внимание на блоге, добавьте на главную страницу превью одной-двух статей, и поместите под ними кнопку «Перейти в блог».
2. Сконцентрируйтесь на обложке
Обложка сайта — это верхняя часть страницы, которая видна посетителю до того, как он начинает прокручивать сайт вниз. Это самая важная часть сайта — она загружается и показывается пользователю в первую очередь.
Добавьте на обложку ключевые элементы: логотип и название компании, слоган и кнопку с призывом к действию. Подумайте, какое сообщение вы хотите донести до посетителя в первую очередь, и оставьте только релевантный для этой цели контент. Остальное можно спрятать в нижнюю часть страницы, которая появится после прокрутки. Старайтесь на добавлять на обложку анимированные изображения — они замедляют загрузку страницы и отвлекают пользователя от остального контента.
3. Сократите количество медиафайлов
Представьте, что сайт — это витрина магазина. Правильная расстановка предметов на витрине помогает привлечь внимание покупателя и сделать акцент на самых важных товарах. А перегруженная товарами витрина выглядит неопрятно и только отпугивает посетителей. Следуйте правилу «качество важнее количества». Перед тем, как добавить на сайт тот или иной элемент, задайте себе вопрос: «Почему элемент важен? Как он поможет привлечь на сайт больше посетителей?». Если у вас нет ответа — смело удаляйте. «Сократить» не означает «избавиться полностью». Некоторые медиафайлы немного замедляют работу сайта, но помогают донести основную мысль страницы или удержать внимание посетителя. Такие элементы приносят больше пользы, чем вреда, и их обязательно нужно оставить. Если не знаете, с чего начать генеральную уборку сайта, обратите внимание на эти два элемента — часто именно они замедляют загрузку страницы сильнее всего: Фотогалереи. Чем больше фотографий в галерее, тем дольше они будут загружаться. Уменьшите размер галереи и оставьте только самые важные фотографии — особенно, если они расположены на главной странице. Если нужно поместить на сайт большое количество фотографий, создайте для них отдельную страницу, куда будет вести ссылка из главного меню.
Встроенный контент. Встроенные видео с Youtube и Facebook всегда замедляют работу сайта. Поскольку такие элементы расположены на сторонних серверах, ваш хостинг не может их оптимизировать. Чтобы решить проблему, уменьшите количество встроенного контента или используйте вместо него видеобоксы. В таком случае хостинг может контролировать и оптимизировать такие элементы, поэтому они значительно меньше влияют на скорость сайта.
4. Оптимизируйте изображения
Самый простой трюк — всегда конвертировать PNG в JPEG. Формат JPEG лучше оптимизирован для сайтов: изображения весят меньше,загружаются быстрее и при этом почти не теряют в качестве. PNG в основном используется для изображений с прозрачным фоном или на сайтах профессиональных фотографов. Чтобы конвертировать изображения в JPEG, используйте TinyJPG, Compressor.io или ImageOptimizer. Сайты на Wix автоматически конвертируют изображения в WebP. Это новый формат, который сжимает файлы лучше, чем JPEG и PNG, и поддерживается большинством браузеров. Кроме того, любые изображения, которые вы обрезаете в редакторе Wix, автоматически оптимизируются под нужный для сайта размер.
Еще одна полезная функция сайтов на Wix — «ленивая» загрузка изображений. При открытии сайта пользователю моментально показываются все изображения с низким разрешением, которые через несколько мгновений заменяются изображениями высокого качества. Так сайт работает быстрее, а пользователи во время загрузки не видят пустой белый экран.
5. Подумайте над взаимодействием текста и изображений
Разделите текст и изображения на два визуальных блока — иначе они будут сливаться и мешать друг другу. Одна из классических ошибок — помещать белый текст поверх цветного изображения на сайте с белым фоном. Поскольку изображения загружаются медленнее текста, надпись полностью сливается с фоном — и пользователь до окончания загрузки видит только пустой экран. Чтобы избежать этого, сделайте цвет текста контрастным по отношению к фону.
По этой же причине не делайте текст частью графического макета — если, конечно, вам не нужно создать логотип. К примеру, если сделать заголовок частью изображения, он загрузится позже основной текстовой части и создаст негативное первое впечатление о странице. В то же самое время текстовый заголовок загружается моментально и помогает удержать внимание посетителя на более долгий срок.
6. Отдайте предпочтение текстовому контенту
Быстрая загрузка — не единственная причина, почему стоит приоритезировать использование текста. Детальный и качественный текстовый контент помогает поисковым системам понять, о чем ваш сайт. Это, в свою очередь, поднимает страницу на верхние строчки в поисковых запросах. Изображения почти не влияют на SEO — поэтому к ним обязательно добавляют alt-текст.
7. Ограничьте количество стилей и шрифтов
Использование максимум двух-трех шрифтов не только добавляет бренду целостности, но и повышает производительность сайта. Особенно это касается нестандартных шрифтов: это такие же графические элементы, как и изображения или видео, поэтому на их загрузку требуется больше времени.
Кроме этого, ограничьте использование разных стилей: например, если используете обычный и жирный шрифт, откажитесь от курсива и подчеркивания. Каждый стиль одного и того же шрифта загружается отдельно, поэтому использование сразу всех также снижает скорость загрузки страницы.
8. Ограничьте количество анимированных изображений
Анимированные изображения — это очень мощный инструмент: они добавляют динамики, служат в качестве навигации и удерживают внимание посетителя. Однако такие файлы очень тяжелые — они не только долго загружаются сами, но могут замедлить загрузку других элементов. В особенности избегайте GIF-файлов. Даже самая маленькая «гифка» очень много весит и негативно влияет на скорость сайта. Используйте вместо них файлы формата MP4 — они ничем не отличаются от GIF-файлов визуально, однако весят значительно меньше и начинают проигрываться еще до окончания загрузки.
9. Оптимизируйте сайт под смартфоны
Все больше и больше людей пользуются интернетом со смартфонов — поэтому убедитесь, что ваш сайт корректно отображается на маленьких экранах. Сайты на Wix автоматически оптимизируются под смартфоны и айпады — однако вы можете вручную изменить некоторые элементы для лучшей производительности. Например, обложка в мобильной версии куда меньше, поэтому оставьте на ней только самое необходимое: название компании, логотип и призыв к действию.
Кроме этого, сократите или замените элементы, которые влияют на скорость загрузки: анимированные и статичные изображения, видео, специальные эффекты, шрифты и так далее.
10. Ограничьте количество сторонних приложений
Сторонние приложения — это элементы, которые не контролируются вашим хостингом. Например, лента Instagram, виджет с отзывами или встроенные Google Maps с указанием вашего местоположения. Сторонние приложения используют технологию IFrame, которая по сути является встроенным веб-браузером. Простыми словами, при использовании такого приложения вы загружаете сайт внутри сайта, что существенно влияет на производительность. Многие сторонние приложения очень полезны, и полностью отказываться от них не стоит. Но вот как можно оптимизировать их работу:
Один за одним отключите сторонние приложения и проверьте, насколько изменилась скорость загрузки сайта. Удалите приложения, которые существенно замедляют сайт и не приносят соизмеримой пользы.
Если возможно, замените сторонние приложения на сервис внутри вашего хостинга с похожим функционалом. Например, и лента Instagram, и галерея Wix используются для демонстрации фотографий. Однако галерея WIx контролируется самим хостингом, поэтому будет загружаться значительно быстрее.
Сергей Букринский
контент-менеджер Wix
