Эта статья является частью серии, созданной в сотрудничестве с SiteGround . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.
Средний вес страницы достиг 2884 КБ в мае 2017 года. Исследования, проведенные Google DoubleClick, показали, что среднее время загрузки мобильных устройств составляет 19 секунд . Тем не менее, производительность важна как никогда:
Разочарование пользователя
Пользователи не будут ждать. Согласно исследованию, проведенному Aberdeen Group , каждая секунда задержки приводит к:
- На 11% меньше просмотров страниц
- снижение удовлетворенности пользователей на 16%
- снижение конверсии на 7%
мобильный
Мобильный доступ составляет 55% всего веб-трафика . Возможности устройства и пропускной способности улучшаются, но не так быстро, как вес страницы. С пользователей часто взимается плата за байт.
Рейтинг поисковой системы
Google наказывает медленные, тяжеловесные сайты.
Стоимость хостинга
Хостинг с такими компаниями, как SiteGround, будет разумным, но тяжелые сайты используют больше ресурсов и стоят дороже, чем более тонкие альтернативы.
техническое обслуживание
Чем больше ресурсов требуется вашему сайту, тем дороже его поддерживать.
В конечном счете, медленный сайт стоит денег вам и вашим пользователям. Напомните своему боссу об этом простом факте в следующий раз, когда они потребуют легкомысленной функции!
В идеале вы должны рассмотреть производительность до того, как будет написана первая строка кода. Тем не менее, вы, вероятно, читаете эту статью, потому что у вас есть тема с проблемами производительности. К счастью, есть несколько экономически эффективных вариантов решения проблемы, и нет никаких недостатков. Каждая сэкономленная миллисекунда снижает ваши расходы, одновременно повышая удовлетворенность пользователей, вовлеченность и доход.
Какие факторы влияют на производительность?
На производительность влияет:
- количество HTTP-запросов
- размер загружаемых активов
- эффективность страницы
Количество HTTP-запросов определяется количеством файлов и Ajax-вызовов, необходимых для работы вашей страницы: HTML, CSS, JavaScript, изображения, шрифты, данные и все другие ресурсы. HTTP / 2 решает эту проблему, но ваш сервер и браузер пользователя должны быть настроены для поддержки. Даже с HTTP / 2 двадцать файловых запросов остаются менее эффективными, чем десять.
Основным фактором является размер каждого файла. Чтобы поместить это в контекст, 2884 КБ на 20% больше, чем оригинальная версия Doom от id Software . Следует признать, что мы сравниваем современные веб-страницы с 25-летней игрой, но большинство страниц содержат несколько абзацев контента, в то время как Doom реализует 3D-движок, несколько уровней, графику, музыку и звуковые эффекты.
Даже относительно легкая страница может быть неэффективной. Например, если ваш трехстраничный веб-сайт имеет зависимость от фреймворка JavaScript размером 500 КБ, этот код должен быть загружен, проанализирован и выполнен до того, как будет виден первый символ. HTML-файл, отображаемый на сервере, начнет появляться до того, как будет полностью загружен, даже если общий объем ресурсов превышает 500 КБ.
Наконец, скорость сервера, сжатие и кэширование — другие важные соображения.
Измерение производительности
Важно измерить производительность, чтобы выявить узкие места и убедиться, что ваши обновления улучшили страницу. Следующие инструменты обеспечивают разбивку времени запросов и ответов с предложениями по обновлению:
Вкладка сети инструментов разработчика вашего браузера также предоставляет информацию о макете и времени, необходимом для подготовки страницы к событиям пользователя.
Быстрые победы
Следующие обновления должны занимать не более нескольких минут — у вас нет оправданий!
Свяжитесь с вашим веб-хостингом
Хороший веб-хостинг проанализирует ваше использование и даст рекомендации по обслуживанию, аппаратному и программному обеспечению. Это может обеспечить экономически эффективное повышение производительности при минимальных усилиях.
Наш партнер SiteGround имеет активную и знающую команду поддержки экспертов WordPress, которые будут рады помочь вам в этом. SiteGround предоставляет ряд планов, ориентированных на WordPress, со скидкой до 65% для пользователей SitePoint.
Активировать сжатие GZIP
Почти 30% сайтов не активируют сжатие GZIP . Обычно это можно включить в настройках веб-сервера или плагинов WordPress, таких как WP HTTP Compression и W3 Total Cache .
Активировать кеширование WordPress
Доступно несколько плагинов WordPress, которые отображают страницы и сохраняют их в кеше по первому запросу. Последующие запросы извлекают эти страницы из кэша, а не восстанавливают содержимое базы данных в шаблоне. Плагины для кэширования включают W3 Total Cache , WP Super Cache , Hyper Cache , WP Fastest Cache и Cache Enabler .
Ваш хостинг-провайдер может включить для вас кеширование. Наш партнер, SiteGround, имеет специальный инструмент для кэширования, который может значительно повысить скорость работы сайта.
Включить кеширование в браузере
Пользователю не обязательно загружать ресурс снова, если он кэшируется браузером. Простые решения включают установку соответствующего заголовка Expires , даты последнего изменения или принятие ETag в заголовке HTTP. В следующем примере .htaccess
<IfModule mod_expires.c>
ExpiresActive On
<FilesMatch "\.(jpg|jpeg|png|gif|svg)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>
</IfModule>
Отключить неиспользуемые плагины
Большинство плагинов будут добавлять код на ваш сайт, такой как дополнительный CSS или JavaScript, даже если вы его не используете. Администраторы WordPress могут отключить плагины с панели управления WordPress или полностью удалить код плагина, если они уверены, что он никогда не будет использован.
Удалить ненужные активы
Вашему шаблону действительно нужно пятнадцать шрифтов? Вы добавили семь аналитических систем? Нужен ли этот сторонний виджет? Нужно ли показывать рекламу из пятидесяти рекламных сетей? Вам нужно более одной библиотеки JavaScript? Не могли бы вы заменить анимацию JavaScript эффектами CSS3?
Удалите и удалите все, что вам не нужно.
Заменить кнопки социальных сетей
Есть ли на ваших страницах кнопки обмена Facebook, Twitter, Google+ и LinkedIn? Несмотря на их невинный вид, они могут добавить несколько сотен килобайт стороннего JavaScript на вашу страницу. Это раздутая угроза безопасности, которая негативно влияет на производительность.
Сторонний код не нужен — вы можете добавить на страницы социальные кнопки без жира с помощью нескольких строк HTML. Небольшой JavaScript может расширить возможности использования всплывающих окон или записи использования с отслеживанием событий в Google Analytics .
Объединить и минимизировать JavaScript и CSS
При разработке целесообразно разбивать файлы JavaScript и CSS на отдельные модули. Однако их следует объединить и минимизировать для удаления комментариев и пробелов перед размещением одного файла на рабочем сервере.
(Обратите внимание, что ваш файл WordPress style.css должен сохранить детали темы вверху, иначе он сломается!)
Адрес ваши изображения
Изображения являются основной причиной раздувания сайта. Удаление одного изображения с высоким разрешением 500 КБ может снизить вес и время загрузки на 25% и более.
Удалить или заменить ненужные изображения
Я уверен, что имидж героя хорош и на бренде, но он теряет своих клиентов? Может быть возможно заменить все или часть этого на CSS3 градиенты, границы, фильтры или другие эффекты.
Используйте правильный формат изображения
Всегда используйте подходящий формат изображения. В общем:
- используйте SVG для векторных логотипов и диаграмм
- используйте JPG для фотографий
- используйте PNG для всего остального
- но рассмотрите GIF для небольших изображений с ограниченным цветом или с анимацией.
Существуют альтернативные форматы, такие как WebP, но поддержка браузера ограничена.
Если сомневаетесь, попробуйте все подходящие варианты и выберите лучший. Но обратите внимание:
- JPG — это формат с потерями, который удаляет детали при более высоком сжатии. Найдите лучший компромисс между качеством и размером файла для каждого изображения.
- PNG предлагает 256 и 24-битные варианты цветов. 256-цветная версия обычно приводит к уменьшению размера файла.
- И PNG, и GIF обеспечивают прозрачность. Отключите это, где возможно, чтобы сохранить дополнительные байты
Изменение размера больших растровых изображений
Базовая камера или телефон захватывает изображение, которое слишком велико для отображения на любом устройстве. WordPress предоставляет варианты изменения размера, но для достижения наилучших результатов редакторы должны обрезать и изменять размер перед загрузкой.
Размеры изображения никогда не должны превышать максимальный размер их контейнера. Те, кто использует дисплеи высокой плотности / Retina, могут оценить изображение с более высоким разрешением, но вы можете использовать альтернативы, используя атрибут imgsrcset .
Изменение размера изображений оказывает значительное влияние на вес страницы. Уменьшение размеров на 50% уменьшает общую площадь на 75%, что соответственно увеличивает размер файла.
Максимизировать сжатие изображений
Вы можете радикально уменьшить размер растрового изображения, удаляя метаданные, уменьшая глубину цвета и настраивая коэффициенты сжатия. Плагины WordPress, такие как WP Smush , EWWW Image Optimizer , Imagify , Kraken Image Optimizer , ShortPixel Image Optimizer и CW Image Optimizer могут справиться с этим процессом за вас.
Для достижения наилучших результатов изображения должны быть обработаны до загрузки. Варианты программного обеспечения включают OptiPNG , PNGOUT , jpegtran и jpegoptim . Пользователи Windows могут попробовать потрясающий RIOT . Кроме того, есть онлайн-инструменты, такие как TinyPNG / TinyJPG .
Изображения SVG могут быть сжаты путем округления значений до меньшего числа десятичных знаков, упрощения путей и удаления ненужных комментариев, атрибутов и пробелов из XML. Ваш SVG-редактор должен иметь опции для сжатия файла или такие инструменты, как SVG-редактор и SVGO . Вы также можете переместить директивы стиля в CSS.
Реализация отложенной загрузки
Наконец, ленивые методы загрузки гарантируют, что изображения загружаются только тогда, когда в окне просмотра виден их содержащий ящик. Плагины WordPress для реализации отложенной загрузки включают Lazy Load , jQuery Image, Ленивую загрузку WP , BJ Lazy Load , Rocket Lazy Load , Unveil Lazy Load и Lazy Load for Videos .
Другие источники:
- Пять методов ленивой загрузки изображений для производительности сайта
- Как создать свой собственный прогрессивный загрузчик изображений
Более радикальные решения
Если ваша тема все еще имеет избыточный вес, вы можете рассмотреть более радикальные варианты диеты …
Принять процесс сборки
Процесс сборки может автоматически оптимизировать изображения, объединять и минимизировать файлы CSS и JavaScript. Вы можете принять процесс сборки Gulp для своей темы WordPress, который может сэкономить часы усилий, повысить производительность страницы и сделать разработку более увлекательной.
Рассмотрим прогрессивные методы веб-приложений
Технологии прогрессивного веб-приложения позволяют веб-приложению работать в автономном режиме, кэшируя основные и регулярно используемые ресурсы. Хотя это обычно используется для приложений, можно преобразовать ваш веб-сайт в прогрессивное веб-приложение и воспользоваться преимуществами быстрой загрузки и автономной работы.
Избегайте стороннего кода
Вы бы предоставили неизвестному разработчику неограниченный доступ к коду вашего сайта? Нет? Тогда зачем доверять сторонним виджетам, таким как кнопки для социальных сетей и дискуссионные форумы? Хотя эти виджеты редко подвергают риску безопасность, вы должны проверить, какие скрытые ресурсы они загружают, и оценить влияние на производительность.
Тщательно оценивайте темы WordPress
Бесплатные и коммерческие темы WordPress могут иметь финансовый смысл. Зачем нанимать разработчика, если готовая тема делает все необходимое за несколько долларов? Но остерегайтесь скрытых затрат. Общие шаблоны должны продавать тысячи копий, чтобы окупить усилия по разработке. Чтобы привлечь покупателей, разработчики объединяют многочисленные функции, которые вам могут никогда не понадобиться
Отметьте один: тема выглядит хорошо? Проверьте два: тема работает хорошо на различных устройствах и в сетях . Смотрите также: 10 функций для поиска в премиальной теме WordPress .
Упростите свой сайт
Существует тенденция к более простым, более упорядоченным, ориентированным на клиента веб-интерфейсам. Это может быть сложнее, чем кажется, но старые времена использования каждой мыслимой возможности для всех пользователей прошли. Можете ли вы убедить своего босса / клиента — это другое дело!
Измени свой образ жизни для развития
Кто отвечает за веб-страницы размером до 2,8 МБ? Мы. Неважно, как или почему сайт стал раздутым — разработчики позволили этому случиться.
Быстрая разработка и сокращение затрат остаются важными, но весь процесс бесполезен, когда он приводит к медленному, неуклюжему сайту, который никто не хочет использовать. Ваш клиент / начальник может не понимать технические проблемы, но вы должны объяснить последствия.
Рассмотрим производительность с самого начала. Как и контент, SEO, удобство и доступность, производительность никогда не должна быть запоздалой! Создать быструю тему WordPress сложно, но потом «добавить» производительность значительно сложнее и дороже.
Дополнительные предложения:
- Легко забыть о пропускной способности, когда вы разрабатываете быстрое соединение со скоростью 200 Мбит / с. Ограничьте подключение или попробуйте загрузить свой сайт в зоне с плохим приемом. Если вы разочарованы, то и ваши пользователи!
- Учитывайте вес страницы и задавайте вопросы по каждому ресурсу, добавленному в вашу тему. Рассмотрим политику «скоринга», например, если вы собираетесь добавить шрифт 20 КБ, вы должны сэкономить 20 КБ из других источников.
Плохо работающие веб-сайты стали эпидемией, но очевидно, что мало кто из разработчиков обеспокоен. Те, кто заботится, будут вознаграждены большим количеством посетителей, более высокими конверсиями и более высокими зарплатами!