Elena_Zhmurina 25.01.2019 14:39 5024 Знания

Как ускорить загрузку: оптимизируем код верхней части страницы

Как оптимизировать верхнюю часть страницы, уменьшить вес, ускорить загрузку и улучшить результат в PageSpeed Insights. Объединяем и сокращаем JavaScript и CSS, используем кэширование, jQuery, CDN и другие способы.

Как оптимизировать код верхней части страницы:

Удалить код JavaScript и CSS из верхней части страницы
Использовать асинхронную загрузку Javascript и CSS
Настроить асинхронную загрузку с jQuery
Ускорить получение первых байтов (TTFB)
Объединить CSS в один файл, объединить JavaScript
Использовать алгоритмы сжатия
Минифицировать файлы CSS и JavaScript
Использовать кэш браузера
Загружать данные с помощью CDN


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

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

Узнать примерную скорость загрузки можно с помощью инструмента PageSpeed Insights от Google. Он оценивает скорость сайта и выводит советы по улучшению показателя.


Проверка скорости загрузки сайта инструментом PageSpeed Insights

Фрагменты проверки инструментом PageSpeed Insights


Для оценки Google определил девять правил, инструмент считает количество баллов по соответствиям.


Правила PageSpeed Insights:

  1. Не используйте перенаправления с целевой страницы
  2. Включите сжатие
  3. Сократите время ответа сервера
  4. Используйте кэширование в браузере
  5. Сократите HTML, CSS и JavaScript
  6. Оптимизируйте изображения
  7. Оптимизируйте загрузку CSS
  8. Расставьте приоритеты загрузки контента
  9. Удалите блокировку рендера JavaScript

Инструмент « Проверка скорости сайта» от PR-CY.RU использует такие же правила для анализа скорости. Он оценивает загрузку на десктопе и мобильной версии, дает советы и пояснения по каждому пункту.


Анализ сайта инструментом проверки скорости

Фрагмент анализа инструментом Проверка скорости сайта


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


Как оптимизировать код верхней части страницы:



Ускорить загрузку части страницы, которая первой появляется при переходе на сайт, поможет оптимизация. Для этого можно как минимум удалить лишние символы и скрипты из верхней части кода, сжать код алгоритмами, настроить загрузку из кэша.


Удалить код JavaScript и CSS из верхней части страницы


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

Исходный HTML-код страницы:

<html> 
  <head> 
    <link rel="stylesheet" href="small.css">
  </head> 
  <body>
    <div class="black">
      Текст
    </div>
  </body>
</html>

Стили small.css:

    yellow {background-color: white;} 
  .blue {color: black;} 
  .big { font-size: 8em; } 
  .bold { font-weight: bold; }

Встраиваем CSS:

    <html> 
  <head> 
    <style> 
      .black{color:black;} 
    </style> 
    </head> 
  <body> 
    <div class="black">
      Текст
    </div> 
  </body> 
</html> 
<link rel="stylesheet" href="small.css">

Файл стилей small.css будет подгружаться после загрузки первой страницы.


Использовать асинхронную загрузку Javascript и CSS


Браузер загружает код HTML построчно, но загрузка множества файлов Javascript может тормозить весь процесс. Для некоторых пользователей с медленным интернетом тормозить могут и файлы стилей. Чтобы браузер не останавливался на загрузке этих файлов, а продолжал подгружать остальной код, настраивают асинхронную загрузку Javascript и CSS.

Асинхронная загрузка позволит браузеру продолжать загружать основной код HTML и другие нужные ресурсы независимо от загрузки сторонних элементов.


Настроить асинхронную загрузку Javascript

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

Создайте пустой div блок в том месте, где нужно отобразить элемент:

<div id="script_block" class="script_block"></div>

Перейдите в конец страницы и вставьте скрипт для асинхронной загрузки перед </body>:

<div id="script_ad" class="script_ad" style="display:none;">
файл или скрипт для загрузки</div>
<script type="text/javascript">
   *переместить на реальную позицию отображения*
   document.getElementById('script_block').appendChild(document.getElementById('script_ad'));
 *показать*
   document.getElementById('script_ad').style.display = 'block';
</script>

Скрипт работает во всех современных браузерах.


Настроить асинхронную загрузку CSS

Быстрее показать страницу пользователю с медленным интернетом поможет асинхронная загрузка CSS. Рекомендуют применять ее только к вспомогательным CSS, иначе страница появится сначала вообще без стилей, а потом будет перерисовываться.

Настроить асинхронную загрузку CSS можно несколькими способами, к примеру, через "rel=preload":

<link type="text/css" href="style.css" rel="preload" as="style" onload="this.rel='stylesheet'" />
<noscript>
<link type="text/css" href="style.css" rel="stylesheet" />
</noscript>

В некоторых версиях браузеров, к примеру, в Firefox 57, "preload" по умолчанию отключен, поэтому событие "onload" не сработает. Учитывайте это и догружайте данные скриптом:

<script>
if (navigator.userAgent.indexOf("Firefox")>=0) {
    var elms = document.querySelectorAll('link[rel=preload][as=style]');
    for (i=0; i<elms.length; i++) {
      elms[i].rel="stylesheet";
    }
}
</script>

Скрипт cssrelpreload.js by loadCSS на GitHub включает поддержку rel=preload для файлов CSS файлов. Он сработает, если в браузере нет родной поддержки "preload".


Настроить асинхронную загрузку с jQuery

Для своей работы веб-мастера используют библиотеки скриптов. По данным графика популярности библиотек в вакансиях, в 2017 году библиотека jQuery была на пике популярности. Ее использование выросло и в 2018, хоть в вакансиях стал чаще появляться React.


Популярность библиотек скриптов javascript в 2017 и 2018

График популярности библиотек в вакансиях: слева 2017, справа 2018


Библиотека скриптов jQuery содержит набор готовых функций Javascript, которые помогают писать код.

Последняя версия библиотеки jQuery для локального подключения

Для работы подключите версию библиотеки, которая у вас поддерживается.


Настроить асинхронную загрузку Javascript с jQuery

Для настройки асинхронной загрузки Javascript с jQuery нужно добавить свойство "async":

<script async src="example.js"></script>

Это отключит последовательную загрузку, поэтому добавьте событие "onload":

<script>function init() {
    $('a').addClass('ajax');
}</script>
<script src="/jquery.js" async onload="init()"></script>

Функция "init" будет вызвана после загрузки jQuery.


Настроить асинхронную загрузку CSS с jQuery


jQuery подходит и для асинхронной загрузки CSS. Для того используйте код:

$("head").append("<link rel='stylesheet' type='text/css' href='/stylesheet.css' />");

Он должен загружаться после остальных элементов страницы и jQuery. К примеру, использование с методом "ready":

    <script>
 $(document).ready(function() {
 $("head").append("<link rel='stylesheet' type='text/css' href='/stylesheet.css' />");
 });
</script>


Ускорить получение первых байтов (TTFB)


TTFB (Time To First Byte) — это время, которое прошло с момента отправки запроса клиентом до получения им первого байта. Чем меньше показатель, тем быстрее браузер начинает загружать страницу.

Яндекс и Google не используют показатель TTFB в ранжировании, но если это время больше 200 мс, нужно заняться оптимизацией, чтобы пользователь не ждал начала загрузки.

Чем больше запросов выполняет браузер, тем дольше может быть загрузка. Проверить, сколько HTTP-запросов генерирует страница, можно на панели разработчика браузера. В Google Chrome и Mozilla Firefox для этого нужно вызвать на странице команду «Посмотреть код» (Ctrl + Shift + I), найти вкладку Network, перезагрузить страницу и отфильтровать по типу HTML (Doc). Появится список запросов со статусами ответов и временем загрузки.


Окно опции Посмотреть код на сайте

Список запросов со статусами на главной странице Яндекс


Также данные о TTFB есть в Pagespeed и в Google Analytics: перейдите в «Поведение» — «Скорость загрузки сайта» — «Обзор», в блоке «Среднее время ответа сервера» увидите TTFB в секундах.

Если проходит слишком много времени до загрузки верхней части страницы, проверьте гипотезы:

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

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

  3. На сайте не включен акселератор (для PHP).
    Разработчики сайтов на PHP используют акселераторы кода для его оптимизации — это расширение, которое кэширует байт-код и увеличивает производительность интерпретатора. При загрузке страницы сервер часто обрабатывает одни и те же участки кода, а акселератор будет предварительно компилировать PHP, что уменьшит время получения первого байта. В версиях PHP 5.5 и выше он идет в комплекте, в файле "php.ini" нужно найти "opcache.enable" и включить акселератор. В версиях 5.2 и 5.3 он доступен в PECL, нужно установить его и включить также через файл "php.ini" .


Объединить CSS в один файл, объединить JavaScript


На каждый отдельный файл нужен отдельный HTTP запрос. Некоторым разработчикам удобнее хранить разные стили CSS или коды JavaScript в разных файлах, но если стилей много, браузеру придется делать много запросов, что тормозит загрузку. Для оптимизации кода рекомендуют объединять все стили CSS в один файл.

Исходный код:

<link rel="stylesheet" href="structure.css" media="all">
<link rel="stylesheet" href="banner.css" media="all">
<link rel="stylesheet" href="layout.css" media="all">
<link rel="stylesheet" href="component.css" media="all">
<link rel="stylesheet" href="plugin.css" media="all">

Объединяем CSS-файлы:

<link rel="stylesheet" href="main.css" media="all">

Файлы JavaScript тоже нужно объединять, чтобы уменьшить количество HTTP запросов при загрузке страницы. Способ объединения такой же, как в случае CSS-файлов.

Исходный код:

<script src="navbar.js"></script>
<script src="component.js"></script>
<script src="page.js"></script>
<script src="framework.js"></script>
<script src="plugin.js"></script>

Объединяем файлы JavaScript:

<script src="main.js"></script>


Использовать алгоритмы сжатия


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

Сейчас популярны алгоритмы gzip или brotli. Сервер сжимает данные перед отправкой тем способом, который браузер может декодировать, и отправляет ему архивы. Лучше использовать оба алгоритма: большинство браузеров поддерживаеет только gzip, но в ряде случаев сработает brotli, который тратит чуть больше ресурсов, но сжимает данные сильнее.

Можно найти плагины для CMS или включить сжатие вручную. Подробно о подключении алгоритмов сжатия для разных серверов в статье «Как уменьшить вес сайта и ускорить загрузку страниц: использовать сжатие gzip или brotli».


Минифицировать файлы CSS и JavaScript

Данные делают легче не только с помощью алгоритмов сжатия. Еще CSS, Javascript и HTML можно минифицировать — сократить методом удаления лишних символов, которые не влияют на работу кода, но занимают место. Удаляют пробелы, комментарии, переносы строк и табуляцию, в файлах стилей сокращают названия цветов.

После минификации файл будет сложнее читать, но зато он будет меньше весить и быстрее загружаться. Обычно сокращенную версию сохраняют отдельно с расширением ".min".


Минификация CSS

Исходный код:

    <style>
      body { background-image: url("foo.png"); }
      /* This comment will be stripped */
      #iddy, .anotherId {
        border: solid 1px #cccccc;
        padding: 1.2em;
        float: left;
        color:##ff0000;
      }
    </style>

Минифицируем CSS:

<style>body{background-image:url(("foo.png"}#iddy,#anotherId{border:solid 1px #ccc;padding:1.2em;float:left;color:red}</style>


Минифицировать файлы CSS и JavaScript


Коды JavaScript тоже можно сократить — удалить лишние символы и сократить переменные. Чтобы не делать это вручную, для минификации есть автоматические сервисы — загружаешь в него код и скачиваешь версию в сокращении.

Подробнее о сервисах и особенностях минификации в статье «Как уменьшить вес сайта и ускорить загрузку страниц: использовать минификацию HTML, CSS и JS»


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


Когда пользователь заходит на сайт в первый раз, его браузер загружает всю графику, все элементы JavaScript и CSS-файлы. Последующие загрузки страницы будут быстрее, если настроить кэширование в браузере пользователя. Тогда браузер сохранит файлы, и ему не придется загружать их с сервера повторно.

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

Для сервера Nginx в файле конфигурации настройте модуль Expires: перечислите форматы файлов для кэширования через с прямой слэш "|", укажите время хранения в секундах.

location ~* \.(js|css|png|jpg|jpeg|gif)$ {
 expires 86400s;
 log_not_found off;
 }

Если вы используете Apache, добавьте в файл .htaccess строки с указанием сроков хранения в кэше для форматов файлов:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 6 months"
ExpiresByType image/jpeg "access plus 6 months"
ExpiresByType image/png "access plus 6 months"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 6 months"
ExpiresByType application/javascript "access plus 6 months"
</IfModule>
## EXPIRES CACHING ##

О других способах настройки кэширования есть в статье «Как использовать кэш браузера для ускорения: кэширование для Nginx и Apache, метод Cache-Control и кэширование по времени».


Загружать данные с помощью CDN


Еще один способ сократить время загрузки данных — использовать популярные CDN. CDN (Content Delivery Network) — это сетевая структура серверов в разных географических точках, которые хранят контент и быстро отдают его клиенту. CDN нужны, чтобы сайт открывался с одинаково быстрой скоростью для пользователей из разных географических точек. Они сокращают время загрузки, ускоряют рендеринг, защищают от DDoS, скраперов и ботов.

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

Разработчики выбирают CDN в зависимости от потребностей бизнеса и бюджета. Hhostings.info собрали двадцать CDN с лучшими отзывами и составили топ CDN 2019.



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

Комментарии (23)
ndaev   27.01.2019 06:21
Отличная статья! Автор молодец!
Elena_Zhmurina   28.01.2019 08:42
Спасибо, стараемся!
Inna_Samarina   28.01.2019 10:09
Спасибо!
Здесь был комментарий, который удалил модератор.
Здесь был комментарий, который удалил модератор.
Здесь был комментарий, который удалил модератор.
Здесь был комментарий, который удалил модератор.
Здесь был комментарий, который удалил модератор.
Здесь был комментарий, который удалил модератор.
Здесь был комментарий, который удалил модератор.
Здесь был комментарий, который удалил модератор.
Здесь был комментарий, который удалил модератор.
Здесь был комментарий, который удалил модератор.
Здесь был комментарий, который удалил модератор.
Здесь был комментарий, который удалил модератор.
Здесь был комментарий, который удалил модератор.
Здесь был комментарий, который удалил модератор.
guruapps   29.01.2019 12:51
Большинство рекомендаций в данной статье не подходят для сайтов на различных CMS, коих большинство. Поэтому автору следовало бы указать это, чтобы не вводить пользователей в заблуждение. В противном случае смысловая нагрузка от таких инструкций - ноль, как настроить кэширование в браузере по-моему не писал только ленивый.
salut77   29.01.2019 13:19
Спасибо за очень полезную инфу!!!
Elena_Zhmurina   29.01.2019 13:51
Рады, что оказалось полезно!
susanin   29.01.2019 15:58
http2 решает массу проблем с параллельной загрузкой
Здесь был комментарий, который удалил модератор.
Здесь был комментарий, который удалил модератор.

Чтобы оставлять комментарии, вам нужно войти в систему

Авторизоваться

К данной записи нельзя добавлять комментарии т.к. она очень старая.