7 простых и действенных советов по ускорению сайта и интернет-магазина
Всем нравится классная загружающаяся анимация на сайте, верно? Если только она не начинает грузится две секунды, пять, 10… Это только привлекает внимание к тому, что ваш сайт медленный. И, возможно, не загрузится никогда. Быстрее купить на другом сайте, не так красив и необычен, но вот раз-два - и я уже в корзине товаров. Анимация - убийца вашего сайта.
Вольный перевод статьи CARRIE COUSINS Tips to Speed Up Your Website Today
Сейчас почти все пользователи (почти - потому что моя бабушка, например, терпеливо ждем и по 7 минут (!) ) ожидают, что любой сайт загрузится быстро и эффектно. Забота владельцев и разработчиков сайта – гарантировать не только визуальное наслаждение от сайта, но и 100% функциональность. Если ваш сайт беспокоит Вас скоростью загрузки, прыгающим кодом при перезагрузке страницы или высоким показателем отказов, у нас есть список из простых советов по ускорению. Уделите свое время каждому из сайтов в примерах – они великолепно смотрятся и быстры, как молния.
1. Осторожнее с анимациями
Анимация в дизайне сайта - одна из тенденций последних лет. Не оставайтесь позади конкурентов, создавая крупные файлы, которые просто никогда не загрузятся. Начните с аккуратных анимационных штрихов, и последовательно двигайтесь к более крупным и сложным анимациям. Только после того, как Вы разберетесь, как они работают на вашем сайте и какую прибыль приносят вам в лице посетителей или клиентов.
Самое важное – не загружать скопом много файлов сразу, а начать с небольшой анимации элемента или заголовка. Остановитесь на чем-то простом и интересном, например, подложке сайта. Попробуйте изящно менять кнопку действия с помощью CSS, а затем двигайтесь дальше. Попробуйте AJAX или эффект загрузки анимации через parallax.
Что хорошо в таких случаях, так это то, что вы дадите элементам загрузиться до того, как пользователь начнет с ними взаимодействовать. Пока пользователь будет скролить сайт вниз, вы выиграете несколько ценных секунд для подгрузки всей созданной красоты.
2. Оптимизируйте изображения
С количеством имеющихся сегодня HD-экранов и дисплеев Retina, доступных пользователям, можете испытывать непреодолимое желание загрузить все свои изображения в полном размере и самом высоком разрешении при создании и наполнении сайта. Не попадайте в эту ловушку. Большинство этих изображений будут слишком большими для вашего сайта (особенно с мобильных устройств).
Используйте общепринятые типы форматов файлов в сети – JPG, PNG, GIF и SVG.
- JPG: лучше всего подходит для фотографий любого размера. Сохраняя файлы JPG для использования веб-сайта, удостоверьтесь, что сохранили оптимизированный файл (в Adobe Photoshop и большинстве популярных программ можно автоматически оптимизировать изображения для сети через экспортные настройки).
- PNG: подходит для изображений, которые включают текст, используется, чтобы надпись хорошо читалась при любом разрешении экрана. Обычно это небольщие файлы.
- GIF: предпочтительный формат файла для небольших динамичных элементов. Осторожнее, не увлекайтесь, создавая слишком тяжелые файлы в этом формате!
- SVG: Если Вам нужно векторное изображение для сети, это - наилучший вариант. Чаще всего используется для иконок и логотипов.
3. Используйте код, где возможно
Возможно, Вы захотите создать набор изящных иконок и изображений для сайта и загрузить каждый как отдельный элемент. Это может вызвать некоторые проблемы. Лучше используйте код, чтобы вызвать эти элементы.
Также используйте CSS, чтобы загрузить фоновые изображения. Это “вынудит” Ваш сайт загрузить все остальное перед фоном, таким образом, пользователи смогут начать изучать информацию на сайте сразу же, не дожидаясь загрузки фона. У W3Schools есть большое, и простое учебное руководство для того, как сделать это.
Есть множество инструментов вроде Font Awesome icons для загрузок библиотек CSS и JavaScript, которые можно использовать для создания красивых и легких эффектов. (У CSS Design Awardsесть особенно хороший набор 30 кнопок и элементов формы, чтобы попробовать).
4. Видео должны быть лаконичны
Сегодня модный элемент веб-дизайна - использование полноэкранного видео на главной странице. Это еще одна ловушка. Вы окажетесь в западне между качеством видео, видеоконтентом и скоростью, и что-то нужно будет принести в жертву.
Лучшие видео должн быть супер короткими – только несколько секунд – и они могут быть зациклены, чтобы видео не прекращалось. Желательно не использовать звук и прочие дополнительные эффекты.
Используйте несколько приемов, чтобы уменьшить размер блока видео. Попробуйте цветной фон или размытое изображение позади. Это позволит видео быть четким, но грузится быстрее. Старайтесь не использовать полноэкранные видео.
Откажитесь от автоматического воспроизведения. Оно заставит пользователей думать, что ваш сайт медленнее, чем он есть на самом деле.
Не заигрывайтесь с длинными видео. Если вы хотите показать нарезку клипов, лучше использовать слайдер с ползунком или таймером на смену разных видео. Можно настроить рандомный показ видео, чтобы при каждом заходе на сайте посетитель видел что-то новое. Не имеет значения, насколько хорошо видео, очень немногие пользователи будут смотреть его дольше нескольких секунд. Поэтому не жертвуйте временем загрузки ради долгих интервью.
5. Внимание на тему
Если Вы используете WordPress или другую систему управления контентом с использованием тем, помните, что не все темы построены на одинаковой архитектуре. В премиум-тарифах есть возможность «выключить» неиспользуемые элементы – внимательно изучаете код и и проверьте, не обрушивает ли новая тема загрузку сайта.
6. Полный контроль плагинов
У Вас есть тонна плагинов или сторонних приложений, привязанных к вашему сайту? Вы действительно активно используете их все? Удостоверьтесь, что выключили неиспользуемые плагины, чтобы оптимизировать скорость загрузки сайта.
Пользователи WordPress могут воспользоваться Plugin Performance Profiler, чтобы видеть, какие плагины активны и как они работают. Это поможет определить проблемы с быстродействием сайта и удалить или перезаписать проблемные плагины (самая частая проблема – плагины “поделишек” в соцсетях).
7. Сжатие. Сжатие. И еще раз сжатие.
Не только отдельные компоненты могут быть сжатыми, но и сам сайт. Можно сжать CSS и файлы JavaScript, изображения и видео (изменяя размер) и сайт в целом с помощью инструментов вроде GZIP.
Уменьшенные файлы - оптимальный путь, когда дело доходит до плагинов и создания маленьких файлов. Вы также хотите проверить, насколько оптимален код на вашем сайте. Для максимальной скорости весь JavaScript должен храниться в одном файле, аналогично с CSS. Еще одно примечание: важно, куда вы помещаете код. CSS ссылки должны быть ближе к началу страницы, а JavaScript к нижней части, чтобы увеличить скорость сайта.
Вывод
Ваш сайт загружается достаточно быстро? Если нет, пора настроить его и добиться оптимального времени загрузки. Если вы вообще задумались об этом, скорее всего, ваш сайт недостаточно быстр.
Сайты должен быть быстрым настолько, чтобы пользователи могли сразу начтьвзаимодействовать. Чем дольше загружается страницы, независимо от устройства, тем вероятнее пользователи уйдут с сайта. А пользователи могут прийти на любую страницу вашего сайта. Поэтому потратьте несколько минут на свой сайт и пройдитесь по этому списку, чтобы оптимизировать скорость загрузки.
Источник изображений: Mohammed Al-Sultan.
Кейсы по ускорению сайтов А25 - в портфолио.
А вот с ускорением UMI.CMS совсем другая история.
Источник: А25 - 7 простых и действенных советов по ускорению сайта и интернет-магазина