Когда мы только начинали создавать сайты WordPress, мы уже знали о нескольких советах, как сделать их быстрыми и надежными. Но когда мы начали больше экспериментировать с оптимизацией производительности WordPress, мы поняли, что можем сделать сайты почти в два раза быстрее!
Одна из самых важных вещей, которую мы узнали, заключается в том, что скорость сайта падает, когда для просмотра страницы необходимо загрузить много данных. Поэтому необходимо это учитывать, когда заказываете сайт под ключ.
В технической терминологии это называется «полезной нагрузкой». Объем данных, необходимых для загрузки страницы и дальнейшей ее прорисовки. В загрузку входят: текст, изображения, видео, CSS, JavaScript, шрифты и другие данные.
☝ Принцип прост, чем меньше данных нужно загрузить, тем быстрее загружается страница.
Поэтому, если вы хотите повысить скорость работы своего сайта, вы пришли по адресу!
В этой статье мы расскажем, как уменьшить размер этих файлов и избежать огромной нагрузки на сеть при использовании WordPress.
Почему огромные нагрузки в WordPress — это проблема?
Вы когда-нибудь использовали такие инструменты, как Google Lighthouse или PageSpeed Insights, чтобы проверить, насколько быстро работает сайт? Или проверяли плагины которые замедляют загрузку?
Иногда вы можете увидеть сообщение, в котором говорится: «Избегайте огромных сетевых полезных нагрузок».
По сути, это означает, что веб-страница слишком большая, как чемодан, который слишком тяжело нести. Большая веб-страница загружается дольше, что может вызвать у пользователей негативный опыт, и в дальнейшем большой процент отказов в метрике.
Сетевая полезная нагрузка веб-страницы — это суммарный размер всех компонентов, из которых она состоит.
Сюда входят:
- Текст: Слова, которые вы читаете на странице.
- Изображения и медиа: Изображения и видео, которые вы видите.
- Код: Файлы CSS и JavaScript, благодаря которым страница выглядит хорошо и работает правильно
- Шрифты: Специальные стили для текста
- Плюс любые другие пользовательские элементы.
- Чем больше всех этих элементов вместе взятых, тем больше времени требуется для того, чтобы веб-страница появилась на экране.
Какой размер является слишком большим? Вот простое определение:
Хорошо: все элементы веб-страницы составляют менее 2 МБ, это все равно что нести легкую сумку. Она хорошо оптимизирована и быстро загружается. Здесь вам не нужно слишком беспокоиться.
Требует улучшения: размер веб-страницы составляет от 2 до 4 МБ, это похоже на рюкзак, который становится немного тяжелым. Возможно, есть вещи, которые можно сделать компактнее. Google даст вам несколько советов, как сделать ее быстрее.
Огромный: размер веб-страницы превышает 4 или 5 МБ, это похоже на попытку нести огромный, переполненный чемодан. От этого сайт становится медленным для посетителей, поэтому оптимизация должна стать приоритетом.
Для определения сетевой нагрузки и получения рекомендаций вы можете использовать бесплатный инструмент Google Lighthouse
И так вы провели анализ сайта и получили сообщение «Избегайте огромных сетевых полезных нагрузок», нажмите на маленькую стрелку, чтобы увидеть список всех данных, из которых состоит ваша веб-страница.
Просмотрите список загружаемых файлов, самые большие находятся в верхней части списка. Есть данные которые неизбежно нужны, например как Яндекс.Метрика. Загрузка идет со стороннего сервера Яндекса и часто Google Lighthouse (Маяк) ругается на них, показывая что они тормозят загрузку. Также есть файлы, которые не влияют на работу сайта их можно или удалить или сжать (уменьшить), чтобы увеличить производительность загрузки WordPress. Делая эти файлы меньше, вы будете использовать меньше данных для просмотра веб-страницы, и она будет загружаться быстрее.
Теперь, когда вы знаете, почему большие веб-страницы являются проблемой, давайте узнаем, как избежать их в WordPress.
Уменьшить размер изображений
Одна из главных причин большой нагрузки на сеть — большие изображения. Современные смартфоны и камеры делают высококачественные снимки с очень большими размерами файлов. Не нужно сохранять их такими большими, и выгружать на сайт.
Необходимо оптимизировать изображения перед загрузкой и делать их на 80 % меньше без потери качества. Это оказывает большее влияние на полезную нагрузку на сеть вашего сайта, чем что-либо другое. На бирже, на которой вы сейчас мы оптимизируем все наши изображения перед их загрузкой. Мы изменяем размер изображений до нужных размеров, а затем уменьшаем их размер с помощью различных онлайн инструментов.
☝ Используйте онлайн инструмент tinypng.com
Встраивать видео правильно
Если на сайте есть видео, то вам следует внимательно отнестись к тому, как вы его интегрируете.
Загрузка видео непосредственно на сайт может вызвать большую нагрузку на сеть и значительно замедлить работу сайта, особенно если оно начинает воспроизводиться автоматически. То есть, чтобы загрузить и открыть страницу, придется сначала загрузить весь видео-файл.
Лучше всего встраивать видео с таких видео-платформ, как YouTube, RuTube или Vimeo.
Такой метод позволяет воспроизводить видео на сайте, но поскольку они хранятся на чужом сервере, они не являются частью полезной нагрузки вашей сети.
Это очень помогает, потому что серверу не приходится заниматься передачей большого объема данных. Кроме того, эти платформы разработаны для эффективной передачи видео, с оптимизированным потоком, который адаптируется к интернет-соединению посетителя сайта.
Кроме того, многие видеоплееры на этих платформах начинают загружать видео только после того, как пользователь нажимает кнопку play, что означает, что на начальном этапе передается меньше данных. Вы можете легко добавить видео на сайт с помощью кода для встраивания. Инструкцию можно найти на видео-платформах.
Использовать Lazy Load
Ленивая загрузка (Lazy Load) — еще один отличный способ избежать больших сетевых нагрузок, особенно если на сайте много изображений или видео.
Обычно, когда веб-страница загружается, WordPress сразу загружает все изображения и видео, даже если они не поле зрения на экране.
Представьте, что в ресторане вам принесут все блюда сразу, а не по одному. Это было бы ошеломляюще!
Вот что происходит на веб-странице, если не реализована ленивая загрузка. Все должно быть загружено заранее, даже если пользователь еще не видит этого.
Очевидно, что это не идеальный вариант, поскольку он означает, что сайт имеет большую полезную нагрузку, и вы загружаете много данных, даже если пользователь не видит содержимое и не выполнил скроллинг ниже. Это можно исправить с помощью так называемой Lazy Load.
Ленивая загрузка похожа на то, как в ресторане вам приносят каждое блюдо по мере готовности.
При ленивой загрузке изображения и видео не загружаются до тех пор, пока не окажутся в поле зрения пользователя на экране. Таким образом, браузеру нужно загружать только то, что необходимо, для прорисовки текущих элементов. Это уменьшает начальную нагрузку на сеть и объем данных, которые необходимо загрузить.
Уменьшить размер файлов
Еще один из лучших способов избежать больших сетевых нагрузок при загрузке сайта — уменьшить размер файлов CSS и JavaScript. Сайт использует CSS-файлы для стилизации и JavaScript-файлы для интерактивных функций и динамического изменения.
Однако в этих файлах часто присутствуют лишние интервалы и комментарии, которые делаются при разработке, которые не нужны для функциональности кода. Вы можете смело удалить эти элементы, чтобы уменьшить размер файлов. Это можно сделать в ручном режиме или использовать сборщики, но это уже более профессиональный подход к решению этой проблемы.
Файлы будут работать так же, как и раньше, но пользователям придется загружать меньше данных, благодаря чему страница будет загружаться быстрее.
Процесс еще известен как минификация, и хорошая новость заключается в том, что вы можете использовать такой плагин WordPress, как WP Rocket, для автоматической минификации файлов, это более простой метод.
Разные страницы, и даже блоки сайта, обычно имеют разные файлы CSS или JavaScript. Например, один файл для заголовка, другой для body, и, возможно, еще больше для плагинов.
Множество мелких файлов это менее эффективно, чем один большой файл. Когда загружается много файлов, браузеру приходится получать каждый из них отдельно, что увеличивает общий размер загрузки. Вместо этого необходимо объединить множество таких небольших файлов в один.
Популярные плагины, такие как WP Rocket (платный) и Autoptimize (бесплатный), могут автоматически объединять и минифицировать файлы CSS и JavaScript.
Сжимать файлы с помощью Gzip
Еще один способ уменьшить размер файлов сайта — сжать их. Текстовые файлы, такие как HTML, CSS и JavaScript, могут быть значительно уменьшены с помощью сжатия Gzip.
Фактически, Gzip-сжатие может уменьшить размер этих файлов на 70 % до того, как они будут отправлены в браузер пользователя! Это огромная экономия на количестве данных, которые необходимо передать.
В результате это сокращает время загрузки файлов и позволяет WordPress-сайту загружаться гораздо быстрее. Как это работает? Как только сжатые данные попадают в браузер посетителя, он автоматически распаковывает (декомпрессирует) файлы и отображает их на экране пользователя.
На сегодня, технологию Gzip поддерживают все популярные и современные веб-браузеры.
Многие отличные плагины для кэширования также поддерживают Gzip-сжатие. Среди популярных вариантов — WP Rocket, WP Super Cache и W3 Total Cache.
С WP Rocket сжатие Gzip будет автоматически включено, если веб-хост использует сервер Apache. Для других плагинов кэширования, возможно, потребуется включить его в настройках плагина.
Использовать кэш браузера
Еще один способ избежать огромной нагрузки на WordPress, особенно если на сайте много вернувшихся посетителей, — использовать кэширование браузера.
Представьте себе, если бы посетителям приходилось загружать все содержимое сайта при каждом посещении! Это было бы невероятно медленно, и именно это происходит, если не используется правильное кэширование.
Когда кто-то впервые посещает сайт, его браузер загружает все, что ему нужно: изображения, CSS, JavaScript и все остальные данные. С помощью кэширования браузер сохраняет копию этих файлов на своем компьютере.
В следующий раз, когда кто-то заходит на сайт, его браузер желает следующее. Он проверяет локально сохраненные файлы, прежде чем снова запрашивать все на сервере сайта.
Если браузер сохранил копию файла в своем кэше, то он просто использует ее, а не загружает снова. Это значительно снижает общую нагрузку и позволяет постоянным посетителям просматривать контент быстрее.
Конечно, если содержимое сайта часто меняется, как, например, на новостном или в блоге, то нужно указать браузерам, когда следует повторно загружать последние версии файлов. Это позволит убедиться, что все пользователи получают самое актуальное содержимое.
Это можно сделать добавив заголовки в head Expires в WordPress. Эти заголовки указывают браузеру, когда сохраненный файл следует считать устаревшим и нуждающимся в обновлении.
Expiresв HTTP-заголовке — это директива, которая используется для указания времени, когда ответ (например, веб-страница или ресурс) устареет. Важность этого заголовка заключается в том, что он помогает браузерам и прокси-серверам понять, когда кешированный ресурс следует считать недействительным и запросить его заново с сервера.
header('Expires: ' . gmdate('D, d M Y H:i:s', strtotime('+1 day')) . ' GMT');
Использование шрифтов
Шрифты помогают сайту выглядеть великолепно и облегчают его чтение. Использование пользовательских шрифтов может сделать сайт уникальным и подтолкнуть посетителей к более длительному его просмотру.
Но представьте, если бы вам пришлось загружать множество разных шрифтов при каждом посещении сайта. Чтобы отобразить все на странице, потребовалось бы немало времени.
Главное — использовать небольшое количество шрифтов на сайте. Мы рекомендуем придерживаться только двух основных шрифтов и использовать их на всем сайте. Это сократит общее количество файлов, которые придется скачивать посетителям.
☝ Совет лучше использовать системные шрифты вместо пользовательских.
Системные шрифты — это шрифты, которые уже установлены на компьютерах людей. Подумайте об этом, как об использовании стандартных шрифтов на компьютере, таких как Arial или Times New Roman.
Если вы выбираете при разработке сайта системные шрифты, то пользователям не нужно будет загружать никаких дополнительных файлов. Это значительно уменьшает размер полезной нагрузки и делает сайт быстрее для посетителей.
Использование плагинов
Наконец, давайте поговорим о плагинах. Иногда плагины могут сделать сайт медленнее и увеличить размер сетевой нагрузки за счет своих дополнительных файлов JavaScript и CSS. И это неизбежно, они всегда используют свои файлы.
Плагины следует рассматривать как дополнительные инструменты, которые добавляется на сайт для расширения функционала. Некоторые из них хороши и легкие, в то время как другие могут быть довольно тяжелыми. Использование слишком большого количества тяжелых плагинов может увеличить размер загрузки сайта.
С первого взгляда трудно определить, какие плагины работают медленно, поэтому вам придется провести определение. Мы писали в этой статье Какие плагины замедляют работу WordPress.
Мы надеемся, что эта статья поможет вам оптимизировать ресурс и избежать огромных нагрузок на WordPress при загрузке. Также вы моете прочитать другие наши полезные статьи о WordPress и не только.
