Скорость загрузки сайта
В данном материале повторно затронем актуальную тему скорости загрузки сайта. Когда пользователей просят поделиться своим опытом по взаимодействию с тем или иным сайтом, они прежде всего вспоминают о скорости загрузки страниц. Учитывайте еще и проблему человеческого восприятия: даже если страница загружается достаточно быстро, пользователю кажется, что этот процесс продолжается дольше.
Так какая скорость считается оптимальной для сайтов на Joomla или WordPress? Посетитель хочет увидеть первые данные за 1 секунду и полную загрузку страницы за 3-4 секунды. Условия использования скоростного интернета и мощного гаджета - дефолтные.
Оптимизация сайта под скорость - это всегда компромисс и задача разработчиков и seo-шников - найти золотую середину.
С одной стороны, посетителям хочется смотреть на большие, качественные картинки и пользоваться различными виджетами: кнопками, формами, полями - все эти удобства «обременяют» страницу.
С другой стороны, поисковый бот предпочитает «облегченный» страницам - такие лучше индексируются и оказываются на высоких позициях выдачи. Поисковая система лояльнее относится к тем сайтам, на которые тратит меньше ресурсов.
Пройдемся по критическим элементам, которые влияют на «вес» страницы.
КАРТИНКИ, ФОТО, ИЛЛЮСТРАЦИИ Разберемся с форматами. Оптимальный формат уменьшает вес визуального контента в среднем на 50%.
Если это фото, инфографика, или сложное изображение - выбирайте .jpg. Дополнительно рекомендуется использовать декодеры для сжатия файлов этого формата без потери качества (что важно). Например, пакет Mozilla JPEG или утилиту Jpegtran.
Если это схемы, иллюстрации, картинки с прозрачным фоном или текстом - выбирайте png. Утилиты для сжатия без потери качества: сайт Compressor (выбрать функцию Lostless), OptiPNG, PNGout.
Также не забываем про старый-добрый Photoshop - при сохранении изображения можно выставить качество от 100% до 90%.
Теперь рассмотрим функцию ресайзингу - размер оптимален для фото и картинок?
Для анонсов статье достаточно ширины в 600-700 пикселей.
Для иллюстрации статьи визуальным рядом - графики, рисунки, схемы, инфографика - не стоит выходить за размеры 1000 пикселей в ширину. Полезный лайфхак - использовать функцию - «нажмите, чтобы увеличить изображение». Что делают хорошие контент-редакторы, если автор нарисовал большую, сложную схему, подробную инструкцию, например на 3000 пикселей? Сохраняем этот файл в формате gif или pdf, Загружаем на сервер. В теле статьи создаем мини-версию графику, делаем картинку ссылкой на изображение оригинального размера, дописываем «жмите сюда, чтобы увеличить». Если читатель будет интересно, он откроет детальное изображение в новой вкладке, если не интересно, этот большой контент не будет загружать страницу, но будет доступным.
С карточками товаров в интернет-магазинах все не так однозначно. Надо учесть, что есть фото-превью в ленте товаров и есть детальные изображения в карточке товара. Главная ошибка разработчиков - использовать одно фото для двух «ракурсов» путем масштабирования. На самом деле, это лень. Логичнее для ленты товаров создать отдельные изображения предварительного просмотра. Достаточный размер для таких картинок - не более 500 пикселей по ширине. Суть в том, что посетители интернет-магазинов 90% своего времени листаю общую ленту товаров в той или иной категории, и реже кликают по карточке конкретного товара. Поэтому лента, на которой могут находиться десятки (даже сотни) «превьюшок», должна загружаться максимально быстро. Теперь о детальных изображений в каждой карточке. На отдельной странице товара желательно выдерживать размер каждого фото до 1000 пикселей, если деталей в товаре немного, или товар небольшого размера, например, игрушка. Если речь идет о демонстрации одежды на моделях или мебель, минимальный размер изображения - 2000 пикселей, хотя покупатели хотят видеть не менее 3000.
Иконки Элементы маленького размера, но бывает, что страница усеяна ими, поэтому загрузка будет тормозить на секунду-другую. Как исправить такое неудобство?
Если вы добываете подходящие векторные иконки с фотостоков или иных ресурсов, храните эти компоненты в формате SVG. Это хороший подход, если на странице используется до 10 единиц иконок.
Любителям украшать страницу over 30 штук, рекомендуется использовать иконочний шрифт (подключить шрифтовые иконки). Юзайте сервисы Font Avesome, Octicons, Glyphicons и подобные.
Видео контент
Здесь прогресс все придумал за нас - заводите канал на YouTube и загружайте свои видео туда, на сайт вставляете только «путь» - код. При этом можно накопить дополнительный трафик. Если же речь идет о коротких роликах - до минуты времени, например, Видеодемонстрация одежды на модели на 360 градусов, то надежнее такой контент держать на собственных серверах.
Сжатие кода
Вы постарались, написали прекрасный файл css, js или html-кодом, не спешите загружать строки в оригинальном виде, ведь можно уменьшить размер такого файла по крайней мере на 10-20%. Удаляем все пробелы, переносы строк, комментарии, лишние табы, сохраняем сжатую копию в отдельный файлик.
Плагины и другие расширения
Правило простое - чем меньше, тем лучше. Если можно обойтись без отдельной кнопки или функции (например, виртуального помощника, который выскакивает на каждой странице, независимо от потребности), то лучше воздержаться от подобного «декора». Здесь надо поставить себя на место пользователя, идеально - привлечь маркетологов, чтобы провести split-тестирования.
Например посмотрите на сайт аренды оборудования для мероприятий в Москве и других регионах. Данный сайт полностью оптимизирован и имеет быструю скорость загрузки.