Вот несколько методов повышения скорости работы сайта, которые вы не должны пропустить.
Если ваш сайт не загружается в течение 3 секунд, вы можете потерять потенциальный доход и не получить более высокий рейтинг в поисковых системах. Аналогичным образом, если ваш сайт недостаточно защищен, вы даете возможность хакерам охотиться за вашим сайтом и несете репутационные и деловые потери.
Следовательно, нельзя обойти стороной вопросы безопасности и повышения производительности для обеспечения лучшего и безопасного пользовательского опыта. Поэтому, когда мы говорим об оптимизации производительности, мы слышим такие вещи, как включение сжатия, минимизация файлов, кэширование, использование легких тем, минимум плагинов и т.д. Все это хорошо, но есть еще столько всего, что мы перечислили в этой статье, что вы можете применить к любой платформе, такой как WordPress, Joomla, Magento, Drupal, Node.js и т.д. Давайте посмотрим, что у вас уже есть, а чего нет.
Хороший хостинг-пакет
Иногда единственная ошибка, которую вы совершаете, – это выбор плохого веб-хоста и тарифного плана виртуального хостинга. Но лично я думаю, что дело не в плохих хостерах. Дело, прежде всего, в сверхдешевых подписках на хостинг.
Что-то не так, если ваши ежемесячные счета за хостинг стоят меньше, чем чашка кофе.
Представьте себе виртуальный хостинг как переполненный автобус, в который никто не хочет садиться, но все равно влезает из-за “привлекательной” стоимости проезда. Самые выгодные вещи в виртуальном хостинге – это вступительные скидки и беспрецедентная непрозрачность информации о том, сколько веб-сайтов делят один сервер. Позвольте вас огорчить: число таких сайтов обычно исчисляется сотнями. Это приводит к частым узким местам в работе, связанным с шумом и соседями, и большая часть таких сайтов никогда не живет достаточно долго, чтобы попасть на первую страницу поиска Google. В итоге, перейдите на VPS или выделенные серверы для проектов, которые имеют значение.
Сеть доставки контента
CDN, сокращенно от content delivery network, стоит на втором месте после выбора хорошего пакета веб-хостинга. Она необходима всем, у кого есть глобальная аудитория. Причина в том, что вы не можете разместить веб-сайт повсюду; он остается в одном месте. Таким образом, расстояние играет роль спойлера, когда японский пользователь пытается получить доступ к вашему сайту, размещенному в Нью-Йорке, США.
Однако подписка на CDN, например, Cloudflare, решает эту проблему локализации. CDN размещает копии ваших сайтов в своей серверной сети и обслуживает запросы с ближайшего сервера. Это снижает нагрузку на один центральный сервер, который может находиться за океаном. Кроме того, благодаря CDN вы можете пользоваться более высокой безопасностью, чем та, которую может предложить обычный веб-хостинг.
Включите IPv6
IPv6 быстрее, чем IPv4. LinkedIn обнаружил 40-процентное улучшение в Европе, а Facebook около 10-15% при доступе через IPv6. Взгляните на график внедрения IPv6 в глобальном масштабе, составленный Google.
Примерно 42% пользователей подключаются к Google через IPv6, но веб-сайтов с поддержкой IPv6 насчитывается всего 21,2%. Интересно, что компания Cloudflare обнаружила, что веб-страницы с поддержкой IPv6 загружаются на 27% быстрее, чем их аналоги с поддержкой IPv4. Итак, есть ли на вашем сайте IPv6? Не уверены! Вы можете проверить это онлайн. Если нет, вот как вы можете это сделать. Большинство CDN-провайдеров, таких как Cloudflare, Incapsula, CacheFly, AKAMAI, предлагают IPv6.
Вы можете проверить панель управления, чтобы включить их. Если вы не используете CDN и размещаетесь на VPS, таких как Linode, DigitalOcean и т.д., то обратитесь к этой статье, чтобы разрешить IPv6 в веб-серверах Nginx и Apache. Наличие IPv6 ничему не вредит и будет интересным для быстрого выигрыша в виде снижения времени загрузки страниц примерно на ~10%.
Перейдите на HTTP/3 или HTTP/2
HTTP – это развивающаяся технология, используемая для загрузки веб-страниц при посещении любого URL в веб-браузерах. Все началось с HTTP/0.9 в 1991 году, затем последовали обновления, такие как HTTP/2 и нынешний самый лучший HTTP/3.
HTTP/2 принес много преимуществ по сравнению с HTTP/1.1, включая:
- Подталкивание сервера
- Мультиплексирование
- Приоритет ресурсов
- Сжатие заголовков
- Низкая латентность
В настоящее время HTTP/2 используется 39,3% веб-сайтов и в семь раз быстрее, чем HTTP/1.1. Перейдя на HTTP/2, вы можете рассчитывать на сокращение времени загрузки страницы на 30-40%.
Проверьте, поддерживает ли ваш сайт HTTP/2.
Однако у HTTP/2 есть свои проблемы. Например, он страдает от блокировки в голове линии. Здесь любая проблема с TCP-соединением может привести к блокировке всех потоков. Но в HTTP/3, основанном на UDP, потеря одного пакета не влияет на все остальные потоки. Кроме того, HTTP/3 позволяет снизить задержку благодаря отсутствию TLS-шаркинга при повторном подключении. В целом, HTTP/3 обладает всеми преимуществами HTTP/2, но без сопутствующих проблем.
Проверьте, поддерживает ли ваш сайт HTTP/3.
Вы можете проверить поддержку HTTP/3 или HTTP/2 у своего хостера. Кроме того, ваш провайдер CDN может иметь простой переключатель на предпочитаемую версию HTTP.
Оптимизация изображений
Никто не хочет просматривать стену текста, поэтому изображения являются неизбежной частью каждой веб-страницы. С другой стороны, наличие изображений на веб-странице делает ее тяжелой и увеличивает время загрузки страницы.
Поэтому в качестве решения предлагается передавать изображения в сравнительно более легком формате, например WebP или AVIF. Это не только значительно уменьшает размер (в некоторых случаях более чем на 80%), но и качество на выходе остается практически таким же. Теперь вы можете либо конвертировать и загружать непосредственно в эти форматы нового поколения. Или подпишитесь на сторонний сервис конвертации, например Optimole, чтобы делать это на лету.
Сокращение избыточных HTTP-запросов
Веб-сайт никогда не загружается как единое целое. Вместо этого каждый элемент, текст, изображения, CSS, JavaScript и т.д., поступают в виде HTTP-запросов. При прочих равных условиях веб-страница с меньшим количеством HTTP-запросов загружается быстрее, чем с большим их количеством. Таким образом, в наших интересах сделать количество HTTP-запросов как можно меньше. Из моего личного опыта работы с WordPress могу сказать, что выбор легкой темы, такой как Generate Press, помогает в этом. Кроме того, сокращение количества плагинов также способствует созданию быстрого и безопасного сайта. Однако это отдельная тема, которая требует особого внимания. В частности, если у вас есть сайт WordPress, проверьте, что он делает меньше HTTP-запросов.
Перейдите на безопасные для веб-страниц шрифты
Все мы хотим, чтобы наши сайты выглядели уникальными и удобными для пользователей. И первый шаг, который многие делают, – это переход на другой шрифт. К счастью, есть несколько бесплатных вариантов, включая шрифты Google. Однако это добавит множество HTTP-запросов. И что еще хуже, ваш сайт вернется к системным шрифтам, если сторонний сервер шрифтов выйдет из строя. Для борьбы с этим некоторые веб-мастера самостоятельно размещают шрифты на своих сайтах, что является шагом к самостоятельности.
Однако это все равно добавляет файл, который необходимо загрузить с вашего сервера на устройство пользователя. Это означает дополнительные HTTP-запросы, что влечет за собой снижение производительности, каким бы незначительным оно ни было. Следовательно, существуют определенные безопасные для веб-сайтов шрифты, которые можно использовать для максимально быстрой работы без риска подмены шрифтов во время сбоя сервера. Эти шрифты называются системными и распространены среди ПК с Windows, Mac, Linux, iOS, Android и т. д.
Вот несколько безопасных для интернета шрифтов:
- Arial
- Verdana
- Trebuchet-MS
- Tahoma
- Times New Roman
- Georgia
- Impact и т.д.
Использование кэширования
Кэширование означает локальное хранение данных. Это обеспечивает максимально быструю загрузку сайта при повторном посещении. Эксперты часто рекомендуют использовать кэширование для сокращения времени загрузки. Например, WordPress имеет множество плагинов кэширования, таких как WP Fastest Cache. Кроме того, можно установить кэширование браузера, отредактировав файл .htaccess. Однако это зависит от платформы, и могут быть разные способы реализации.
Асинхронная загрузка
Это еще одна страница прямо из моего личного опыта работы с WordPress. На самом деле, произошло следующее: Google Search Console выдал предупреждение о том, что 40 с лишним постов моего блога не прошли тест Core web vitals. Core web vitals – это оценка страниц Google, которая важна для всех, кто пытается занять высокое место в поисковой системе.
Чтобы понять это подробнее, ознакомьтесь с анализом Pagespeed в одной из статей Geekflare:
Благодаря нашим разработчикам WordPress блестяще прошел эти тесты. Но в моем личном проекте я особенно сильно провалился в Largest Contentful Paint (LCP) и First Contentful Paint (FCP). В частности, LCP занимал 3,3 секунды, а FCP – около 2,4 секунды. Будучи блоггером, не специализирующимся на информационных технологиях, я не смог оптимизировать его до предела. По моим масштабам, я ставил все нужные галочки: премиум-тема, никаких дополнительных плагинов, системные шрифты, изображения в формате WebP, облачный хостинг и т.д.
Помог один-единственный тумблер в плагине Jetpack boost WordPress:
В двух словах, он загружает сторонний Javascript асинхронно, прикрепляя атрибуты async или defer к тегам <script>. Таким образом, скрипты загружаются отдельно в фоновом режиме, не блокируя построение страницы. Для меня эта единственная мера позволила снизить LCP и FCP до 1,7 с и 1,2 с соответственно.
К вашему сведению, я также удалил главное изображение из макета одиночного поста в дополнение к этому тумблеру Defer Non-Essential JavaScript, прежде чем получить эти значения LCP и FCP.
Минимизируйте перенаправление
В идеале для достижения наилучшей производительности сайта не должно быть никаких перенаправлений. Однако все мы в какой-то момент используем перенаправление ссылок. Тем не менее, правило простое: каждое перенаправление добавляет некоторое время к загрузке страницы. Добавьте слишком много перенаправлений, и пользователь перейдет в другое место, более быстрое, если только ваш бизнес не является интернет-магазином Apple, где люди выстраиваются в очередь, чтобы каждый раз получить новый релиз.
Осторожнее с видео
Видео улучшают время пребывания на странице и помогают избежать монотонности текста. Они являются отличной модернизацией по сравнению с изображениями и во многих случаях неизбежны. И самый очевидный способ – это встраивание видео на YouTube. Однако вы можете сравнить две веб-страницы с видеороликами YouTube и без них с помощью Google PageSpeed, чтобы оценить, насколько сильно эти вставки влияют на производительность веб-страницы. Для примера я опубликовал два сообщения на нашем тестовом сайте. В одном из них есть видео YouTube без всего остального (без текста, изображений и т.д.), а в другом нет ничего. Затем я сравнил эти два поста в Google Pagespeed.
Можете ли вы увидеть влияние на общее время блокировки, индекс скорости, FCP и LCP? В частности, он добавил целую секунду к общему времени блокировки, что достаточно, чтобы побудить пользователей перейти к конкурентам. Чтобы подтвердить эти результаты и получить дополнительную информацию, я запустил эти два URL-адреса в инструменте Pingdom Website Speed Test.
Вы можете проверить, что одно видео YouTube добавило 23 дополнительных HTTP-запроса, увеличило размер и время загрузки страницы и ухудшило общую оценку производительности. Однако есть несколько трюков для снижения производительности. Во-первых, можно выбрать асинхронную загрузку для видео, что поможет сократить общее время блокировки. Кроме того, возможна и ленивая загрузка. Тем более, у вас есть множество плагинов YouTube embed WordPress, которые сделают за вас тяжелую работу. И наконец, лучше встраивать эскизы видео, которые загружают видео только при нажатии на него.
Минимизируйте HTML, JavaScript и CSS
Это может показаться каплей в море, но минификация действительно делает вещи более простыми. Минификация удаляет ненужные элементы из исходного кода, включая лишние пробелы, точки с запятой, комментарии, переносы строк и т.д., и делает все компактным. В зависимости от платформы, вам, возможно, придется сделать это самостоятельно или попросить инструмент минифицировать все за вас. Однако всегда лучше сохранять резервные копии стандартных версий, поскольку модификация минифицированного кода близка к кошмару. Тем не менее, машина может прекрасно прочитать весь этот компактный код, и вы заметите незначительное увеличение производительности.
Используйте веб-сжатие
Веб-сжатие похоже на zip, но работает с веб-файлами для сокращения времени загрузки страниц и поддерживается современными браузерами. Проще говоря, веб-сайт с поддержкой сжатия будет обслуживать компоненты быстрее, чем тот, который не имеет такого сжатия, при условии, что все остальные параметры одинаковы. Это веб-сжатие работает с HTML, JavaScript, CSS, изображениями и т.д. и в некоторых случаях может уменьшить размер страницы более чем на 70%.
Есть два варианта: Gzip и Brotli. Скорее всего, у вашего хостера будет применен один из этих двух вариантов. Однако вы все равно можете протестировать сжатие, чтобы проверить, какое из них включено на вашем сайте. И попросите веб-хостера или обратитесь к веб-разработчику, чтобы он установил сжатие, если его нет.
Внешние элементы
Вы можете назвать это продолжением раздела HTTP-запросов, но это требует отдельного упоминания. Внешние элементы на сайте – это все, что не является родным, включая рекламу, аналитику, плагины, форумы и т.д., но не ограничиваясь ими. Такие элементы добавляют дополнительный код на ваш сайт, что увеличивает количество HTTP-запросов и многое другое, делая ваш сайт раздутым и менее удобным для пользователя. Согласитесь, некоторые из них есть на каждом сайте, и вы не можете их избежать. Тем не менее, будьте минималистами в этом смысле и экспериментируйте с различными сервисами, чтобы выбрать тот, который меньше всего влияет на производительность.
Более быстрый сайт!
Производительность сайта никогда не является чем-то неизменным. Всемирная паутина развивается каждую минуту, и лучше всего оставаться в курсе событий и быстро адаптироваться к ним для обеспечения первоклассной скорости и безопасности. Однако безопасность не менее важна, чем скорость.
