{"draftJsState":{"blocks":[{"data":{"image":{"id":"64be2d37ce06eb5daa28a292"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Анализ скорости загрузки сайта","type":"atomic:image","key":"89sgo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кто-то считает, что гнаться за скоростью работы сайта не имеет смысла, другие тратят огромные бюджеты на оптимизацию. Давайте разберем – насколько важна скорость загрузки, какие показатели считаются нормальными, а когда необходимо их улучшать и какими способами.","type":"unstyled","key":"bohag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Насколько важна скорость работы сайта","type":"header-two","key":"d56ql"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С развитием технологий клиент стал требовательнее, а разработка и поддержка сайта обходится все дороже и занимает больше времени. Сайты в погоне за продажами обрастают дополнительным полезным функционалом и качественным дизайном. Все это требует больших аппаратных возможностей.","type":"unstyled","key":"1h485"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скорость загрузки относится к одному из важных факторов ранжирования. Поисковым системам важно точно отвечать на запрос пользователя. Там где ответ получить удобнее и быстрее, там он и совершит целевое действие. Медленное отображение страниц раздражает пользователя и он уходит на другой сайт, а поисковые системы видят отказы и снижают позиции ресурса.","type":"unstyled","key":"al66o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скорость загрузки важна, но она не всегда является определяющим фактором в поднятии трафика. Например, клиент будет лоялен к долгому открытию страниц, если ресурс уникален или заслужил высокое доверие.","type":"unstyled","key":"9tvoi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Прежде чем принять решение что оптимизировать, нужно рассчитать затраты и спрогнозировать результат. SEO-специалистам приходится определять: насколько критична проблема со скоростью и как построить работу, чтобы трафик на сайт не стоил, как ангар самолетов.","type":"unstyled","key":"72ala"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда нужно оптимизировать, а когда – нет?","type":"header-two","key":"7codv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Задуматься о скорости загрузки сайта целесообразно:","type":"unstyled","key":"c1udb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"на этапе создания сайта;","type":"unordered-list-item","key":"21v87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"при очень низких показателях скорости, которые являются причиной большого количества отказов от перехода на сайт;","type":"unordered-list-item","key":"4hhd3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"скорость загрузки средняя и необходимы работы, которые технически не сложны в реализации (при этом задачи с более высоким приоритетом уже решены);","type":"unordered-list-item","key":"8hjkf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"если вы эстет и любите идеальные настройки во всем.","type":"unordered-list-item","key":"brnsg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда можно отложить работу:","type":"unstyled","key":"bq8cj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"на сайте большое количество других ошибок, решение которых принесет больше пользы для увеличения трафика;","type":"unordered-list-item","key":"fpn4l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"показатели загрузки средние или выше, а улучшения слишком трудозатратны.","type":"unordered-list-item","key":"5rddu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Алгоритм загрузки страниц","type":"header-two","key":"bl46q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы оценить необходимость в оптимизации запуска сайта и понять, что необходимо улучшать, нужно знать пошаговый алгоритм загрузки и список параметров, из которых складывается общая скорость.","type":"unstyled","key":"5df0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При открытии определенной страницы первые шаги запроса выполняются на стороне сервера и здесь не играет роли содержимое сайта:","type":"unstyled","key":"fansc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"DNS-запрос;","type":"ordered-list-item","key":"5h4t5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ТCP-подключение по IP;","type":"ordered-list-item","key":"eof8u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"TLS-подключение – защищенное соединение, если используется HTTPS;","type":"ordered-list-item","key":"93a24"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTTP-запрос страницы по URL.","type":"ordered-list-item","key":"bs671"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее данные подгружаются на стороне клиента и скорость зависит не только от наполнения страницы, но и от параметров сети и особенностей устройства пользователя. Последовательность дальнейшей загрузки выглядит так:","type":"unstyled","key":"fscvk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML документ;","type":"ordered-list-item","key":"d292v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Построение очереди запросов к ресурсам HTML-документа на стороне браузера;","type":"ordered-list-item","key":"9poon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стили CSS;","type":"ordered-list-item","key":"7qppe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JS-код;","type":"ordered-list-item","key":"3k0fh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рендеринг и выполнение JS-кода;","type":"ordered-list-item","key":"f3j0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Веб-шрифты;","type":"ordered-list-item","key":"92t8r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изображения и другие элементы;","type":"ordered-list-item","key":"7s0fr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конец рендеринга, отложенный JS-код.","type":"ordered-list-item","key":"82qrs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зная очередность загрузки, можно определить, в каком месте происходит просадка, и оптимизировать только необходимые элементы.","type":"unstyled","key":"37d8h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Большая часть загрузки страницы происходит на стороне клиента, поэтому необходимо учитывать технические устройства, с которых выполняется вход, и местоположение аудитории сайта.","type":"unstyled","key":"thut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Метрики поисковых систем","type":"header-two","key":"84ipv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь определимся с тем, что учитывают поисковые системы.","type":"unstyled","key":"6d16v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Яндекс","type":"header-three","key":"bkfla"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":6,"offset":128}],"inlineStyleRanges":[],"text":"Скорость загрузки является поведенческим фактором, который является основным. В официальном справочнике можно найти только одну статью о важности скорости загрузки и список рекомендаций к улучшению.","type":"unstyled","key":"5lt6b"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":5,"offset":7}],"inlineStyleRanges":[],"text":"Яндекс пишет: «Из-за низкой скорости пользователь может не дождаться открытия страницы и перейти на другой ресурс. Это снижает уровень доверия к сайту, его посещаемость снижается, что влияет на другие статистические показатели».","type":"unstyled","key":"df94g"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":21,"offset":36}],"inlineStyleRanges":[],"text":"В панели Вебмастера есть показатель индекс скорости сайта, который показывает быстроту загрузки страниц из мобильной выдачи Яндекс браузера. Из каких метрик он складывается и какое влияние оказывает на ранжирование сайта в поиске, Яндекс не раскрывает, вычислить можно только опытным путем. Если показатели низкие, в Вебмастере появится сообщение.","type":"unstyled","key":"5rv31"},{"data":{"image":{"id":"64be24a0348b943c46bb1b9b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сообщение о низкой скорости загрузки","type":"atomic:image","key":"8euho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При помощи отчетов Яндекс.Метрики можно проанализировать некоторые показатели скорости загрузки:","type":"unstyled","key":"59otl"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":22,"offset":0}],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Время загрузки страниц. Дает информацию о скорости, с которой загружается сайт или отдельные страницы у пользователей за выбранный период времени. В отчете представлены показатели по этапам загрузки. Рекомендуется использовать сегментацию по браузеру, так как скорость зависит от него;","type":"unordered-list-item","key":"5rjb5"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":16,"offset":0}],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Нагрузка на сайт показывает максимальное количество посетителей в секунду и количество активных пользователей в выбранный период;","type":"unordered-list-item","key":"hs27"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":17,"offset":0}],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Трафик по минутам отражает количество просмотров страниц сайта и среднее число просмотров в минуту;","type":"unordered-list-item","key":"evjd5"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":19,"offset":0}],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"},{"length":1,"offset":21,"style":"BOLD"}],"text":"Результаты проверки — для отслеживания доступности сайта.","type":"unordered-list-item","key":"9gmdc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Google","type":"header-three","key":"5hb0e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Google дает намного больше информации о скорости загрузки. В комплекте есть:","type":"unstyled","key":"4fcjh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"множество статей и собственных исследований в справочнике;","type":"unordered-list-item","key":"50ii2"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":8,"offset":77}],"inlineStyleRanges":[],"text":"53% пользователей мобильных уйдут, если сайт загружается дольше трех секунд (источник).","type":"unordered-list-item","key":"cs37f"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":15,"offset":22},{"key":9,"length":8,"offset":76}],"inlineStyleRanges":[],"text":"Улучшение показателей Core Web Vitals повышает вовлеченность пользователей (источник).","type":"unordered-list-item","key":"vcl"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":8,"offset":113}],"inlineStyleRanges":[],"text":"Пользователи на 24% реже бросают загрузку страницы, если сайт соответствует пороговым значениям Core Web Vitals (источник).","type":"unordered-list-item","key":"c5r32"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":8,"offset":112}],"inlineStyleRanges":[],"text":"При уменьшении времени на отрисовку видимой части, на каждые 100 мс коэффициент конверсии увеличивался на 1,3% (источник).","type":"unordered-list-item","key":"3ro25"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":8,"offset":204}],"inlineStyleRanges":[],"text":"Снижение показателя смещения макета на 0,2 позволило поисковой системе Yahoo! увеличить количество просмотров страниц за сеанс на 15%, увеличить продолжительность сеанса на 13% и снизить отказы на 1,72% (источник).","type":"unordered-list-item","key":"41vn7"},{"data":{},"depth":0,"entityRanges":[{"key":13,"length":8,"offset":138}],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"ОДНАКО: Search Engine Land провели исследование, где выяснили, что популярные сайты с большим трафиком не соответствуют критериям Google (источник).","type":"unordered-list-item","key":"94rbb"},{"data":{},"depth":0,"entityRanges":[{"key":14,"length":15,"offset":8}],"inlineStyleRanges":[],"text":"метрики Core Web Vitals (Отчет об основных жизненных показателях сети);","type":"unordered-list-item","key":"6pkfj"},{"data":{},"depth":0,"entityRanges":[{"key":15,"length":21,"offset":8}],"inlineStyleRanges":[],"text":"отчет в Google Search Console с основными показателями;","type":"unordered-list-item","key":"6ck61"},{"data":{},"depth":0,"entityRanges":[{"key":16,"length":18,"offset":7}],"inlineStyleRanges":[],"text":"сервис PageSpeed Insights для оценки скорости, измерения показателей Core Web Vitals и аналитики данных которые влияют на загрузку.","type":"unordered-list-item","key":"2lhsq"},{"data":{},"depth":0,"entityRanges":[{"key":17,"length":7,"offset":31}],"inlineStyleRanges":[],"text":"Также вы можете ознакомиться с кейсами по улучшению скорости загрузки.","type":"unstyled","key":"blrm9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основной жизненный цикл по метрикам Core Web Vitals и нормы производительности:","type":"unstyled","key":"chs5u"},{"data":{"image":{"id":"64be25ef3183b0639d3287a8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3vtjs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тестовые параметры и экспериментальные метрики:","type":"unstyled","key":"49h0b"},{"data":{"image":{"id":"64be26b7a98ded3f9573fd3e"},"images":[{"id":"64be26b7a98ded3f9573fd3e"}],"contents":{}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"943u0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Определяем скорость загрузки сайта","type":"header-two","key":"aldjq"},{"data":{},"depth":0,"entityRanges":[{"key":18,"length":8,"offset":55},{"key":19,"length":9,"offset":65},{"key":20,"length":11,"offset":76},{"key":21,"length":3,"offset":164}],"inlineStyleRanges":[],"text":"Есть много сервисов для определения скорости загрузки: gtmetrix, yellowlab, pingdom.com и т.п.. Для примера возьмем измерение и оптимизацию по официальному сервису PSI от Google.","type":"unstyled","key":"5ivfc"},{"data":{"image":{"id":"64be24a0dff44977f6d22eed"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Показатели скорости и описание данных в сервисе PSI","type":"atomic:image","key":"bnume"},{"data":{},"depth":0,"entityRanges":[{"key":22,"length":12,"offset":272}],"inlineStyleRanges":[],"text":"Сервис показывает данные, реальных показателей за предыдущие 28 дней. Каждая метрика оценивается отдельно от 0 до 100 и их средневзвешенный балл – это итоговая оценка в том же диапазоне от 0 до 100. Наглядно оценить изменение показателей и итоговой оценки можно с помощью калькулятора. В зависимости от количества баллов выделены три цветовые зоны:","type":"unstyled","key":"8n84o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хорошо: от 90 до 100 – зеленая;","type":"unordered-list-item","key":"aqdd0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Требуются доработки: от 50 до 89 – желтая;","type":"unordered-list-item","key":"88aht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Плохо: от 0 до 49 – красная.","type":"unordered-list-item","key":"7podc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример расшифровки оценки показателя: если LCP в пределах красной полосы равен 15% – это значит, что 15% из всех наблюдаемых значений с плохим показателем LCP (более 4 секунд).","type":"unstyled","key":"c71ae"},{"data":{"image":{"id":"64be24a0bdb1fd768dd3e6c2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример расшифровки показателей PSI","type":"atomic:image","key":"12te5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основные ошибки в PSI","type":"header-two","key":"d90ak"},{"data":{},"depth":0,"entityRanges":[{"key":23,"length":3,"offset":31}],"inlineStyleRanges":[],"text":"После проверки страницы сервис PSI выдает рекомендации в разделах «Оптимизация» и «Диагностика».","type":"unstyled","key":"1m9tb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Красными треугольниками выделены проблемы, которые приводят к значительным снижениям показателей, а желтыми квадратами – неисправности, приводящие к средней скорости.","type":"unstyled","key":"1vf5g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для каждого пункта выделена потенциальная экономия времени на загрузку сайта.","type":"unstyled","key":"3jpq4"},{"data":{"image":{"id":"64be24a08874127fa40e495c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Результаты сервиса для оптимизации от Google","type":"atomic:image","key":"47vli"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разберем рекомендации сервиса и способы их решений.","type":"unstyled","key":"13klu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Примечание! Есть рекомендации сервиса, которые реализовать с текущим ПО невозможно, либо на работу потребуется слишком много времени даже опытному разработчику.","type":"unstyled","key":"577r9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Отложите загрузку скрытых изображений","type":"header-three","key":"7dumq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть несколько видов отложенной загрузки:","type":"unstyled","key":"911bh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":63,"style":"ITALIC"}],"text":"1. При помощи JS библиотек, среди которых наиболее популярные: lazyload, lazysizes, autoload и т.д. Нужно учитывать, что при загрузке страницы, для подключения данных ресурсов используется пользовательский трафик и показатели скорости могут наоборот увеличиться.","type":"unstyled","key":"a8qp6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. На уровне браузера и атрибута: . Также работает и для тегов