Поиск по сайту:

Как ускорить медленный сайт


Люди ленивее, чем вы думаете: согласно исследованию Google, 53% мобильных пользователей покинут ваш сайт, если загрузка займет более трех секунд. Вы хотите, чтобы ваш сайт быстро улучшал коэффициент конверсии и рейтинг в поисковых системах.

Как проверить скорость вашего сайта

Возможно, самым важным показателем скорости вашего сайта является тест Google PageSpeed Insights. Поскольку Google является арбитром того, насколько хорошо ваш сайт работает в своем рейтинге, вам нужно максимально успокоить их. Хороший результат теста PageSpeed Insights напрямую повлияет на SEO. Просто введите URL-адрес своего сайта и нажмите «Анализ», чтобы просмотреть результаты.

PageSpeed Insights дает очень подробный обзор того, что в настоящее время не так с вашим сайтом. Вы должны работать с ними, как с контрольным списком, пока ваш балл не станет намного выше. Google ведет список подробных рекомендаций, с которыми вы можете сверяться.

Если вы хотите узнать, как именно ваша страница загружается вашим браузером, вы можете открыть Инструменты разработчика Chrome (щелкните правой кнопкой мыши > Проверить или из меню настроек). Здесь есть две полезные вкладки: «Сеть» и «Производительность».

На вкладке «Сеть» показана простая в использовании временная шкала запросов, сделанных на ваш сайт, размер ответа и время, затраченное на него. Вкладка «Производительность» показывает гораздо более подробное представление обо всем, что происходит с вашим сайтом:

Отсюда вы можете диагностировать практически любую проблему с производительностью вашего сайта, включая неоптимизированный код JavaScript, повторный рендеринг и перерасчет стилей.

Установите модуль Google PageSpeed

Расширение PageSpeed для Apache и Nginx выполняет множество функций автоматизации для общей оптимизации вашего сайта, таких как минимизация и сжатие HTML-кода, сжатие изображений, объединение нескольких файлов JS и CSS в одну загрузку и, как правило, просто сокращает объем загрузки. Это не панацея, но это простое решение многих распространенных проблем.

Уменьшите размер вашего сайта

Уменьшение размера вашего веб-сайта напрямую сокращает время загрузки. В то время как пользователи настольных компьютеров могут по-прежнему довольно быстро загружать ваш сайт, пользователи мобильных устройств могут обнаружить, что ваш сайт останавливается, если он не оптимизирован.

Сжатие и ленивая загрузка изображений

Первый способ уменьшения размера касается изображений. Изображения (и другие медиафайлы) часто являются основной причиной медленных сайтов. Если вы не проверяете размер своих изображений, есть вероятность, что многие из них имеют размер в несколько мегабайт, что может занять целую вечность при медленном соединении.

Вы должны проверить размер ваших изображений (что вы можете сделать на вкладке «Сеть» в консоли Chrome Dev) и убедиться, что ни одно из них не выходит за пределы мегабайтного диапазона. Большинство изображений на этом сайте весят около 100 Кб.

Если у вас есть большие изображения, вам нужно их сжать. Есть много онлайн-инструментов, которые могут это сделать, или вы можете вручную повторно экспортировать их из Photoshop, или вы можете преобразовать всю папку из командной строки с помощью ImageMagick:

for f in *.jpg; do convert -quality 70 $f $f; done

Это сжимает каждый файл .jpg до качества 70%, что должно сэкономить много места, но почти неотличимо от более высоких настроек качества.

Изображения не блокируют рендеринг, а это означает, что остальная часть сайта будет загружаться в ожидании ваших изображений. Но вам не нужно загружать их все сразу, особенно когда перед изображениями нужно загрузить более важные вещи.

Вы можете решить эту проблему путем отложенной загрузки ваших изображений. Этот метод откладывает загрузку ваших изображений до тех пор, пока они не потребуются, и вместо этого отображает заполнитель (что предотвращает смещение вашего контента при загрузке реальных изображений). Эти заполнители часто создаются для «доминирующего цвета» или меньшего размытого изображения, которое быстрее загружается, сводя к минимуму неприятный эффект загрузки.

Вы можете лениво загружать изображения с помощью плагина WordPress, простого JavaScript или библиотеки JS.

Сократить и сжать файлы JavaScript

Вы должны стараться не использовать тонны JavaScript, но если вам необходимо, вы должны ограничить размер файлов сценариев. Основным методом этого является их минимизация и сжатие.

Минификация — это метод, при котором вся ненужная часть вашего кода удаляется и заменяется меньшим количеством символов. Пробелы, новые строки, табуляции — все исчезло. Имена функций и переменных заменяются одиночными символами. Правда, выглядит ужасно:

Но это уменьшает размер файла, и все равно никто не будет восхищаться этим. Минификация — это то, что вы делаете во время развертывания, поэтому не волнуйтесь, вам не нужно работать с таким кодом.

Сжатие — это еще один шаг, который включает фактическое сжатие текста, что может сэкономить еще больше места. Когда браузеру приходится расшифровывать файл, возникает небольшая нагрузка на ЦП, но экономия на размере оправдывает эти затраты. Браузеры, совместимые со сжатыми файлами, будут отправлять заголовок  Accept-Encoding: gzip в своих запросах ресурсов, который сообщает серверу, что он может обслуживать сжатые версии.

Оба эти шага ускоряют загрузку ваших ресурсов JavaScript. На самом деле минимизированный JavaScript парсит и выполняется немного быстрее, так что и в этом отношении он лучше.

Избавьтесь от ненужного объема

Последний шаг к улучшению производительности сайта — просто удалить то, что вам не нужно. Если вы загружаете кучу библиотек JavaScript, рассмотрите возможность написания более простого решения без необходимости использования внешнего ресурса. jQuery является примером этого; это здорово, и это делает работу с JS намного проще, но это блокирует рендеринг и часто более неуклюже, чем ванильный JS. Если вы хотите «как можно быстрее», не используйте jQuery.

То же самое касается плагинов и виджетов WordPress; если они не совсем необходимы, они могут отягощать ваш сайт. Старайтесь оптимизировать свой сайт, когда это возможно.

Избегайте ресурсов, блокирующих рендеринг

Некоторые ресурсы на вашем сайте блокируют рендеринг, что означает, что страница не будет загружаться до тех пор, пока эти ресурсы не будут загружены. Очевидно, что ваш HTML блокирует рендеринг, но и ваш JavaScript обычно тоже. Это означает, что пользователь сделает запрос на ваш сайт, подождет, чтобы загрузить ваш HTML, увидит, что ему нужен дополнительный файл JS, а затем подождет, чтобы загрузить этот файл. Это серьезная проблема, поскольку она напрямую увеличивает время загрузки.

Есть несколько решений для этого:

  • Встраивайте JavaScript. Вместо ссылки на внешний ресурс вставьте все содержимое файла JavaScript, который вы пытаетесь загрузить, в тег <script> в своем HTML-файле. Это в первую очередь предотвращает любую внешнюю загрузку и является самым простым решением.
  • Отложить загрузку JavaScript до завершения синтаксического анализа страницы. Для всего, что не нужно запускать сразу, добавьте тег defer к тегу <script> , чтобы загрузить его позже.
  • Для вещей, которые нужно запускать сразу, но которые на самом деле не зависят от загрузки чего-либо еще в определенном порядке, используйте тег async , который будет выполнять JavaScript асинхронно со страницы. загрузка.

Если вы интенсивно используете клиентский JavaScript с такими фреймворками, как React и Vue, вы можете ускорить эту проблему блокировки рендеринга, реализовав рендеринг на стороне сервера.

Еще одним ресурсом, блокирующим рендеринг, являются шрифты. Веб-шрифты с таких сайтов, как Google Fonts, выглядят великолепно, но они замедляют загрузку страницы и в большинстве случаев блокируют отображение текста до тех пор, пока он не будет загружен. В большинстве случаев вам следует избегать их, но если вы должны их включить, вы можете загрузить их асинхронно с помощью директивы  font-display: optional .

@font-face {
  font-family: 'CustomFont';
  src: url("CustomFont.woff") format('woff');
  font-display: optional;
}

Технически это все еще блокировка рендеринга, но только в течение очень короткого периода времени, поэтому пользователи настольных компьютеров, скорее всего, не увидят шрифты, изменяющие текст. Если вам действительно нужна скорость, вы можете вместо этого использовать font-display: swap , который отобразит резервный шрифт, а затем переключится на загруженный шрифт, как только он станет доступен.

Используйте CDN и кэшируйте динамический контент

Сеть доставки контента (CDN) может значительно ускорить ваш сайт. CDN обслуживает ваш сайт со многих серверов (называемых точками присутствия) по всему миру, что значительно снижает задержку для клиента. Если вам нужно сделать дополнительные запросы к серверу, это будет намного быстрее с CDN.

Тип CDN, который вы захотите использовать, — это CDN с вытягиванием источника, такой как CloudFlare или Fastly, который будет кэшировать ваш сайт в каждой точке присутствия, ускоряя время в пути и принимая некоторую нагрузку на ваш веб-сервер в процессе. Сети CDN могут даже изменять размер ваших изображений на периферии, поскольку они могут очень быстро определять устройство и предоставлять уменьшенные версии мобильным пользователям.

Вы также можете использовать исходную сеть CDN для доставки статических ресурсов большему количеству людей, чем может обслуживать традиционный монолитный веб-сервер. Это часто используется для видеохостинга, но также может обслуживать изображения и файлы.

CDN по запросу источника также уменьшает задержку, сокращая количество обращений вашего веб-сервера к вашей базе данных каждый раз, когда запрашивается динамический контент. WordPress и PHP являются главными виновниками этого; каждый раз, когда запрашивается сообщение, PHP-скрипт будет извлекать содержимое страницы из базы данных. Это совершенно необязательно делать несколько раз в секунду. Кэширование решает эту проблему, сохраняя «результаты» запроса в течение минуты или около того, что означает, что ваша база данных гораздо реже подвергается ошибкам. Если у вас нет CDN, вы все равно можете реализовать кэширование WordPress с помощью плагина, такого как W3 Total Cache.

Используйте кеширование браузера

Браузеры могут кэшировать контент, чтобы будущие посещения были быстрее. Это не влияет на загрузку первой страницы, поэтому это действительно полезно только для сайтов, которые часто посещают несколько пользователей за короткий промежуток времени (например, ежедневные новости, социальные сети и т. д.). Хотя это также относится к общим ресурсам, таким как ваш логотип, который будет отображаться на каждой странице. Вы захотите кэшировать их, чтобы, если пользователь нажимал на ваш сайт, ему не приходилось тратить время на перезагрузку того, что у него уже есть.

Это делается с помощью заголовка cache-control . Вы можете использовать CDN, чтобы получить более детальный контроль над вашими правилами кэширования, но управление им с веб-сервера должно работать так же хорошо.

В nginx часть max-age заголовка cache-control устанавливается с помощью директивы expires . Например, чтобы настроить кэширование всех изображений, файлов CSS и JavaScript на год, вы можете использовать:

location ~*  .(jpg|jpeg|png|gif|ico|css|js)$ {
  expires 365d;
}

Проблема с кэшированием таким образом заключается в том, что если вы хотите внести изменения в кэшированные файлы, эти изменения не будут распространяться на клиентов до истечения срока их действия, что в идеале должно длиться долго. Решение этой проблемы заключается в использовании имен файлов с версиями и изменении версий, если вам нужно внести изменения:

<link rel="stylesheet" href="styles_v1.0.css" />

Или даже:

<link rel="stylesheet" href="styles.css?v1" />

В любом случае, вам нужно помнить о том, что вы кешируете и как долго. Вы не должны использовать кеш браузера для таких вещей, как статическая домашняя страница; если вы хотите кэшировать свой HTML-контент, вам следует использовать полноценную CDN для реализации кэширования на стороне сервера.

Кроме того, вы можете установить режим cache-control с помощью add_header:

location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
  expires 365d;
  add_header Cache-Control "public";
}

«Общедоступный» позволяет кэшировать что угодно, включая CDN. Не используйте это для всего, что требует аутентификации. «Частный» будет кэшировать что-то в браузере пользователя, но не в CDN. No-store полностью отключит кеширование.