Вопрос или проблема
У меня есть сайт на WordPress, который на 90% основан на изображениях.
Я установил Wp-Super-Cache, теперь, похоже, он загружается немного быстрее.
Я провел тест скорости на Pingdom Tools:
- Размер страницы 4.7MB
- Время загрузки 5.09s
- Запросы 153
- Оценка производительности 74/100
Также я посмотрел время, потраченное на каждый тип контента:
- Изображение 88.23%
Так что проблема очевидна — это изображения.
Мой план — попробовать оптимизировать изображения по размеру, а затем добавить поддержку CDN.
Этого достаточно для улучшения загрузки изображений?
Обслуживайте свои изображения через сеть доставки контента. У Amazon есть Cloudfront, который предлагает довольно дешевые услуги и позволяет использовать Origin Pull, что значит, что изображения хранятся на вашем сервере для исходного хранения, но кэшируются и доставляются из ближайших конечных точек CDN к клиенту. По сути, вы настраиваете доставку изображений через CNAME на вашем домене, например, media.example.com, который указывает на назначенный сервер изображений Amazon.
Ваш сервер может сосредоточиться на контенте, а не быть в основном сервером изображений. Единственная причина для оптимизации обслуживания изображений после этого — это когда истекают TTL контента, и CDN должен перезагрузить. Мы сократили трафик нашего сервера до четверти от того, с чем мы сталкивались, когда внедрили систему Origin Pull.
Я только вчера узнал, что у Google есть дополнение PageSpeed для браузеров, которое я предлагаю использовать, так как оно анализирует проблемы с производительностью, приоритизируя важность. Оно также работает в браузере (Chrome или Firefox) в качестве дополнения. Оно также объясняет проблемы и решения более подробно, если вы не уверены, что означает каждый элемент.
Я запустил PageSpeed на вашем сайте и подтвердил свои подозрения о неоптимизированных изображениях, это было самым важным пунктом. После полной оптимизации говорится, что вы можете уменьшить размеры изображений на 43% (более 1.5MB). Вы можете узнать больше об этом на странице с лучшими практиками, которая говорит о оптимизации изображений.
Некоторые другие важные вещи, которые вы можете сделать, — это сжать ваш контент (но не сжимайте изображения). Это может сэкономить почти полмегабайта. Вы можете столкнуться с проблемами на сайте PageSpeed, подтверждающим, что ваши файлы сжаты, но сайт, на который я ссылаюсь, и дополнение PageSpeed могут работать лучше для вас.
Также говорится, что ваши изображения слишком большие для того размера, на котором вы их используете. Это может сэкономить вам ~0.25MB.
Также предлагается минифицировать ваши файлы javascript и css.
Существует много других рекомендаций от PageSpeed, но эти должны значительно уменьшить размер вашей страницы.
Я бы также рекомендовал дважды проверить, как работает ваш плагин кэширования, поскольку PageSpeed также предлагает добавить заголовки истечения сроков к некоторым файлам (это просто, если у вас есть доступ к файлу .htaccess).
В целом, получите PageSpeed или YSlow для вашего браузера. Они скажут вам похожие вещи (мне просто больше нравится первое, так как оно работает в панелей инструментов разработчика Chrome).
Я предлагаю использовать какую-то систему прогрессивной загрузки, чтобы изображения, находящиеся ниже на странице, не загружались сразу после загрузки страницы.
Ответ или решение
Для повышения скорости загрузки вашего сайта WordPress, основывающегося на изображениях, необходимо применять комплексный подход, ориентированный на оптимизацию как самих изображений, так и их доставки. Учитывая представленные вами данные, вот несколько стратегий, которые помогут значительно улучшить загрузку вашего сайта:
1. Оптимизация изображений
Ваши изображения занимают значительную часть объема страницы (88.23%). Поэтому оптимизация размеров файлов изображений является первоочередной задачей.
-
Сжатие изображений: Используйте инструменты для сжатия изображений без потери качества, такие как TinyPNG или ImageOptim. Это позволит сократить размер изображений на 43% или более, как указано в вашем анализе с PageSpeed.
-
Использование форматов следующего поколения: Рассмотрите возможность перехода на изображения в формате WebP, которые обеспечивают лучшее сжатие по сравнению с JPEG и PNG без заметной потери качества.
-
Адаптивные изображения: Убедитесь, что вы используете атрибуты
srcsetиsizesв теге<img>, чтобы браузер мог выбрать правильный размер изображения в зависимости от устройства пользователя.
2. Внедрение CDN (Content Delivery Network)
Использование CDN, например, Amazon CloudFront, может существенно снизить нагрузку на ваш сервер и улучшить время загрузки. Реализация CDN включает:
-
Настройка DNS: Установите CNAME для вашего домена, например,
media.example.com, который будет указывать на ваш CDN. -
Кэширование изображений: CDN будет кэшировать изображения и предоставлять их пользователям с ближайших к ним серверов, что значительно сокращает время загрузки. Это также разгрузит ваш веб-сервер, позволяя сосредоточиться на других типах контента.
3. Улучшение кэширования
Поскольку вы уже используете плагин Wp-Super-Cache, убедитесь, что:
-
Настроены заголовки кэширования: Проверьте файл
.htaccess, чтобы добавить заголовкиExpiresилиCache-Controlдля статического контента, ускоряя повторные загрузки страниц. -
Сжатие контента: Используйте Gzip-сжатие для текста, CSS и JavaScript. Это может сократить размер передаваемых файлов и ускорить загрузку.
4. Минификация и объединение файлов
Применение минификации для JavaScript и CSS-кода поможет уменьшить размер этих файлов и улучшить время загрузки страницы.
- Инструменты для минификации: Проверьте плагины, такие как Autoptimize или WP Rocket, которые могут автоматически минифицировать и объединять ваши файлы.
5. Ленивая загрузка изображений
Реализуйте механизм "ленивой" загрузки (lazy loading) для изображений, что означает, что изображения, находящиеся ниже в области просмотра, будут загружаться только по мере прокрутки страницы. Это уменьшается количество загружаемых изображений сразу при открытии страницы и, следовательно, улучшает её время загрузки.
6. Анализ и мониторинг
Используйте инструменты, такие как Google PageSpeed Insights и YSlow, для регулярного анализа производительности вашего сайта. Эти инструменты помогут выявить узкие места и предложат конкретные рекомендации для улучшения.
Заключение
Оптимизация загрузки вашего сайта требует комплексного подхода, сфокусированного на уменьшении размера изображений, оптимизации их доставки и организации эффективного кэширования. Реализация указанных выше мер позволит значительно увеличить скорость загрузки и улучшить пользовательский опыт, что также положительно скажется на SEO вашего сайта.