Самый простой способ ускорить загрузку сайта
24 апреля 2019
Автор: User

Самый простой способ ускорить загрузку сайта

Скорость загрузки сайта влияет на позиции в поисковой выдаче.

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

Далее рассмотрим что делать и принцип действия.

Как ускорить загрузку сайта быстро и просто?


На большинстве сайтов используется код JavasScript. По умолчанию робот использует последовательную загрузку скриптов.

На практике наиболее распространенные сценарии применения скриптов следующие:

  • Подключение систем аналитики, таких как Google Analytics и/или Yandex Метрика;
  • Использование скриптов JavaScript при решении задач по user interface или user experience.

Поисковая система оценивает скорость загрузки сайта через имитацию браузера пользователя.

Браузер пользователя выполняет множество шагов, прежде чем ответ в виде кода HTML от сервера будет передан клиенту и преобразован в пиксели на экране.

Критическим путем рендеринга (Critical Rendering Path) называется последовательность шагов, необходимых для первого отображения страницы.

Если нет желания разбираться в технических деталях (все-таки уже потеплело на улице), то для ускорения загрузки страниц сайта просто прочитайте и внедрите следующие правила:

  • Код JavaScript должен быть вынесен во внешний файл;
  • К тегу script должен быть добавлен атрибут defer.

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

До вывода страницы на экран проходит 6 этапов критического пути рендеринга:

  1. Построение DOM-дерева;
  2. Построение CSSOM-дерева;
  3. Запуск JavaScript;
  4. Создание Render-дерева;
  5. Генерация расположения;
  6. Визуализация.

Критический путь рендеринга

Под термином DOM (Document Object Model) подразумевается объектная модель страницы.

Структура DOM выстраивается из узлов, так называемых нодов (от nodes).

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

Создание и оптимизация DOM дерева

Под термином CSSOM (CSS Object Model) подразумевается объектная модель стилей страницы сайта.

Не имеет значения то, как стили были заданы: объявлены явно или наследуются.

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

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

Построение и оптимизация CSSOM дерева

Render-дерево представляет собой объединение из DOM и CSSOM, и включает только видимые элементы. Например, исключаются элементы, которые были скрыты с использованием display none.

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

Поисковая оптимизация критического пути рендеринга


Модели DOM и CSSOM связаны с JavaScript.

JavaScript является блокирующим ресурсом для роботов, то есть JavaScript блокирует разбор HTML-документа.

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

Но блокировки робота можно избежать!

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

Есть 2 важных директивы:

  • async;
  • defer.

При не использовании директив код выглядит так:

<html>  
<head></head>  
<body>  
    <script src="script.js">
</body>  
</html>

Обработка страницы роботом в данном случае происходит так:

Критический путь рендеринга страницы по умолчанию

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

Что такое async


Термин async происходит от asynchronous, что означает асинхронность.

Async используется как указание на то, что скрипт может быть выполнен асинхронно.

В данном случае обработчику страницы нет необходимости останавливаться при обнаружении скрипта.

Атрибут async обычно используется для скриптов, которые не зависят от других файлов и/или не имеют никаких зависимостей.

Загрузка скрипта происходит параллельно, а выполнение скрипта происходит после того, как скрипт загружен.

Что будет, если применить атрибут async? Обработка страницы роботом в данном случае происходит так:

Критический путь рендеринга страницы с async

Что такое defer?


Defer используется как указание на то, что скрипт может быть выполнен отложено.

Термин defer происходит от deferred, что означает отсроченный.

Что будет, если применить атрибут defer? При использовании defer скрипт должен быть выполнен после полной загрузки страницы роботом.

Обработка страницы роботом в данном случае происходит так:

Критический путь рендеринга страницы с defer

Скрипты с атрибутом defer выполняются после завершения парсинга страницы сайта роботом, перед событием DOMContentLoaded.

Пример


К примеру, на сайте indexoid используется система аналитики от Google.

Код подключения аналитики следует вынести в отдельный файл и загрузить с применением директивы async.

Пример кода:

<script async src="ga.js">

К примеру, на сайте smmnews.com используется код JavaScript для генерации карты кликов.

Код подключения аналитики следует вынести в отдельный файл и загрузить с применением директивы defer.

Пример кода:

<script defer src="cm.js">


Вопросы и ответы


Какие браузеры поддерживают async и defer?


Поддержка атрибутов async и defer распространяется на все современные версии браузеров Chrome, Edge, Safari, Opera и Firefox.

Как строится DOM дерево?


Процесс построения DOM-дерева также состоит из этапов.

Создание DOM дерева

Почему долго грузится сайт у пользователей из Украины?


На площадках со значимой долей трафика из Украины использовать директиву defer следует в обязательном порядке в случае, если на сайте используются такие системы как:

  • Yandex.Метрика и/или любые другие сервисы от Yandex;
  • Система захвата аудитории для ремаркетинга от платформы Mail.ru и прочие скрипты от Mail.ru;
  • Система захвата аудитории для ремаркетинга от социальной сети VK и прочие скрипты от VK.

Все подобные системы заблокированы на территории Украины. При использовании таких скриптов загрузка сайтов у пользователей из Украины может достигать минуты и более. Сайт у пользователя не загрузится до момента, пока робот браузера не прервет попытки загрузить файл со скриптом.

Такие решения как Альтернативный CDN (Content Delivery Network) от Yandex проблему не решают. В Yandex занимаются решением данной проблемы.

В чем разница между async и defer?


Директивы async и defer предоставляют возможность контроля над загрузкой и выполнением скриптов.

Async используется для асинхронной загрузки скриптов. Асинхронная загрузка является наиболее подходящим вариантом в случае, если не имеет значения, когда скрипт будет исполнен.

Defer используется для отсроченной загрузки скрипта.

Какая последовательность выполнения скриптов про asynс и defer?


Принцип составления очереди при использовании async и defer разный.

При использовании атрибута async первым выполняется тот скрипт, который быстрее загрузится. Поэтому async нельзя использовать для скриптов, которые зависимы друг от друга.

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

Выводы


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

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

Рекомендованный материал в блоге MegaIndex по теме оптимизации JavaScript по ссылке далее — JavaScript и SEO.

Директива async предоставляет возможность загружать, и выполнять скрипты JavaScript асинхронно.

Директива defer предоставляют возможность загружать, и выполнять скрипты JavaScript отложено.

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

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

Проведите анализ скорости загрузки сайта применяя расширение от Google под названием Lighthouse.

Ссылка на расширение — Google Lighthouse.

Сервис бесплатный.

Пример отчета для сайта seoheronews.com.

Google тест на скорость загрузки страницы

Найти иные проблемы со страницами сайта можно используя сервис аудита от MegaIndex.

Ссылка на сервис — MegaIndex Аудит.

Аудит структуры сайта

Сервис бесплатный.

Используйте на сайтах:

  • Минификацию;
  • Компрессию;
  • Кеширование.

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

Рекомендованный материал в блоге MegaIndex по оптимизации скорости загрузки страниц сайта по ссылке далее — Как проанализировать и увеличить скорость загрузки сайта.

Подключайте скрипты на JavaScript через внешние файлы. В результате:

  • Внешние файлы легко подключить/отключить;
  • Браузер кеширует внешние файлы;
  • Уменьшается размер страницы;
  • Код страницы легко читается и, как результат, легче поддерживается;
  • Снижается время загрузки страницы сайта.


Итак:

  • Минимизируйте количество отправляемых данных за счет минификации, компрессии и кеширования;
  • Снижайте количество ресурсов в пути критического рендеринга. Объединяйте файлы. Если скрипты простые, используйте inline вставку скрипта. При использовании inline скриптов дополнительных GET запросов не происходит;
  • Сократите критическую длину пути рендеринга путем уменьшения количества сообщений между роботом и сервером. Используйте defer для загрузки систем аналитики и систем захвата аудитории, используемых для ремаркетинга.

Остались ли у вас вопросы, мнения, комментарии по теме подключения скриптов на сайте?

Обсуждение

emajozuq-1966
More info
Art.Bodnaruk
Я так понял, помимо фишек с asynс и defer существует ещё много других способов ускорить загрузку сайта. Спасибо большое за ценную инфу!
User
Спасибо за отклик!
User
Да
Art.Bodnaruk
Какие есть аналоги Lighthouse для других браузеров?
User
Lighthouse является инструментом, который разработан специально для Chrome, поэтому аналогов нету.
tltcs
Пример кода для defer дали такой же как для async.
User
Спасибо за отклик. Изменил на правильный пример для defer.
mindochin
порадовали примеры про коды аналитики. делайте так, и потеряйте половину статистической информации
info
web.dev/measure#
User
Спасибо за ссылку.
User
Если загружается крайне долго, следует сначала оптимизировать сайт, так как на сайте сосуществует явная проблема уже не со статистикой, а с поведенческими факторами, что еще важнее.
User
При выполнении быстрой загрузки сайта, с применением атрибута defer потерь не будет. Безусловно, сайт не должен загружаться очень долго, иначе код выполнится конце. Если сайт загружается долго, используется async.
174slim
Атрибут defer откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. (c)
174slim
т.е. если контента более чем, вы знатный "ускоритель".
User
Если контента много, то используется метод Lazy Loading для подгрузки контента. Изначально контента на правильном оптимизированном сайте загружается столько, сколько нужно для первой страницы и главного текста.
infernal768
Можно ссылку на источник?
У вас оперативные, но местами корявые переводы, хотелось бы некоторые моменты уточнить в оригинале)
User
Статье является оригинальной. Если будут вопросы, обращайтесь для уточнения нюансов.
seo
максимум ускорил мобилка-87 комп-98. не как не могу мобилку до 90+ догнать (((. есть у кого предложения?
iodjin
Отключи bootstrap, удали файл
там верстки то нет, зачем тебе целый файл бутстрапа?
***/wp-content/themes/iwstpl/css/bootstrap.min.css
Стилей можно сделать в 10 раз меньше
seo
удалил файл и все поплыло (((
e.feshin
У вас сайт, сделанный на wordpress. Вам надо: 1. поставить нормальный плагин кэширования, а не то, что стоит сейчас. 2. провести ревизию плагинов, плодящих стили и скрипты и повыкидывать лишние. 3.убрать те счетчики, которые вам реально не нужны. 4. объединить плагином кэширования стили и скрипты в два файла и перенести загрузку файла скриптов в футер. 5.поработать с кэширующими заголовками файлов. 6. оптимизировать картинки.
Это - программа минимум. Выполните ее - и будет вам счастье. Больше 90% мобильных просто гарантирую.
Программа-максимум дополнительно затачивает сайт под Google PageSpeed и включает в себя вынос стилей первого мобильного экрана в отдельный сайт.
Евгений,
6 лет разгона wordpress сайтов.
e.feshin
Опечатка. Вынос стилей в отдельный файл. И его инлайн загрузка
User
Спасибо за расширенный комментарий к статье!
User
Использование async или defer еще больше бы ускорило загрузку сайта для пользователей, открывших сайт впервые.
e.feshin
Сайт, с любезного разрешения его хозяина, давит теперь 93-95. Без всяких асинков и деферов - на реальном сайте вероятность получить от них проблемы очень высока. Вот и на этом сайте тоже ничего кроме проблем они не дают.
Такшта, пишите свои теории, а мы уж как нибудь практически порешаем проблемы сайтов.
User
Отлично. Мои оцениваются на уровне 99-100 из 100. С async и прочими нюансами. Будете больше изучать технологии и применять на практике, сможете добавиться таких же результатов.
e.feshin
Отлично. Покажите хотя бы один сайт на wordpress "из своих", на 99-100 из 100 (мобильных, разумеется, потому как другие тупо не нужны никому). Только не голимый HTML, а как сейчас 90 из 100 сайтов - со скриптами jQuery.
Тогда у вас будет чему научиться. Иначе - ляля...
bars-kovd
e.feshin, как с вами связаться?
e.feshin
это мой аккаунт в почте яндекса
dgpalych
Возможно для программиста - это и есть простой способ. Но, к примеру, я не являюсь программистом.
Везде советуют - что нужно сделать - я и без этой статьи знаю "ЧТО". Это и Яндекс с Google подскажет.
Но никто не говорит, конкретно, как это сделать - с примерами.
Одни заумные "вопли" - "Гуру для Гуру". Аж зло берет.
User
Вы самостоятельно правите верстку? В таком случае вынесите скрипт аналитике в отдельный файл, и пропишите атрибут defer. Если возникнут сложности на конкретном этапе - сообщите, сможем помочь.
alexey.mokrushin
Да, но нет. Особенно если сайт большой, то установка defer на скрипты метрик вызовет существенный рост параметра "Отказы" потому что DOM то может грузится долго, а первый видимый и значимый контент появляется раньше этого. Скрипт загрузится, а пользователь прочитав уже все выйдет, хотя может пробыл на сайте дольше 15 сек. От того скрипты веб-метрик рекомендуют в HEAD ставить.
User
Показатель отказов не вырастет, так как скрипт не успеет загрузится, и скрипт не успеет выполнится.
e.feshin
К сведению. скрипты счетчиков гугла и яндекса НЕ тормозят рендеринг.
seo
e.feshin наберите плиз 8-800 на сайте я жду
User
На самом деле тормозят как и любые другие скрипты. Просто откройте Chrome DevTools чтобы убедиться на практике.
e.feshin
На самом деле содержимое кодов счетчиков такое, что таки не тормозят. Просто откройте Google PageSpeed - он не считает их блокирующими.
User
PageSpeed не является лучшим инструментом для проверки. Используйте инструменты разработчиков. И Google не является единственным JavaScript. К примеру, в Украине сайт может грузится минутами из-за счетчика от Yandex.
e.feshin
PageSpeed является лучшим инструментом для оценки скорости загрузки сайта. Ввиду того, что Гугл учитывает его показатели для сайта при градации в поисковой выдаче. Ставить же вна Украине на сайт счетчик яндекса - это идиотизм, тут не инструмент разработчика нужен, а психиатр.
>Используйте инструменты разработчиков. - без указания конкретных инструментов это предложение - пустое ляля.
appoffegydda-8856
naturally developed
wexufami-1353
need to begin
User
Sure
gravriilpetrov1860
start
eninnexig-4264
More Info
ananehu-3909
exactly
al476
Крутая статья и комменты, спасибо!
kostys2
Я поставил "defer" ко всем скриптам js на сайте, и это снижает оценку PageSpeed Insights
на 7 едениц.
east7b
"kostys2", вот те на... Тоже не понял в чем простота ускорения, кроме атрибута "defer", который актуален для людей из Украины и то, проверять надо, а лень. Много здесь спецов, которые работают с Украиной и используют яндекс метрику?
evgeny_gavriluk
Что не говорите, а JS сильный тормоз для отрисовки сайта. Можно долго спорить о том, использовать async и defer или нет, но при этом никто не задумывается о проблеме нецелевого использования js в целом. Я добивался 100% на PageSpeed за счет использования нативного JS без всяких библиотек, типа jQuery. Конечно, проект проекту рознь, но, честно говоря, на большинстве сайтов сейчас вся мощь библиотек используется для решения банальных задач, которые и на чистом js в три строчки кода решаются.
alktub2000
el
yqessyffas-4335
have a body that the vast majority of the ladies hunger for. Particularly the fat age in my stomach territory after my child's introduction t Organa Keto o the world is conspicuous. The most noticeably awful thing is that the out of shape skin around that put limits me from wearing body uncovering garments. To be completely forthright, I am not extremely finicky about my looks, but rather for me, a great body implies a ton. .Visit For More Info: https://timesnutrition.com/organa-keto/
max200515
при попытке поставить яндекс метрику и гугл метрику
у меня просто перестают работать метрики)
mathelp
Ничего не говорите про рекламу Google Adsense или РСЯ, как их загружать на мобильник?
Для добавления комментария, пожалуйста, авторизуйтесь