Чтобы «разогнать» сайт, проведения одного аудита, а ещё хуже — простого замера скорости,совсем не достаточно. Будучи инструментом со сложной конструкцией, он требует всесторонней работы и изучения возможных ошибок. Наша команда проводит многоступенчатое тестирование и только на основании собранных из нескольких источников данных делает выводы. Затем, исправляется каждый недочёт. Стоит учитывать, что одна ошибка может повлечь за собой целый ряд. Это как в автомобиле, когда неисправность одного узла, тянет за собой поломки в других, а ремонт наиболее очевидной ничего не даёт. Так и при оптимизации сайта — далеко не факт, что проблема кроется в наиболее явной ошибке. Поэтому, корректировки нужно проводить взвешенно и аккуратно. В результате нашей работы — заказчик получает сайт оптимизированный на максимум и с правильными настройками для дальшейшей работы. Это уже не просто страничка в интернете, а полноценный инструмент маркетинга.
Но что делать, если вы уже провели все оптимизации самостоятельно, а сайт всё-равно загружается медленно. Проводя тестирование при помощи сервиса Google PageSpeed Insights, в результатах аудита может отобразиться строка «Сторонний код». Разбираемся, что это значит и как сделать так, чтобы сторонние коды не мешали загрузке страницы.
Что такое сторонние коды и чем они могут навредить
Сторонние коды это всё, что не имеет прямого отношения непосредственно к вашему сайту: реклама, аналитика, трекеры, кнопки социальных сетей, переход на Youtube и так далее. Эти сторонние сценарии могут иметь решающее значение для функциональности сайта или потока доходов. К примеру — рекламные ссылки и банеры. Но сторонние сценарии также сопряжены с целым рядом рисков, на которые нельзя не обращать внимание. А значит, необходимо свести эти риски к минимуму, при этом не потеряв пользы от них.
Чем могут навредить сторонние коды и почему стоит быть с ними внимательным:
● Снижают производительность сайта
● Снижают уровень конфиденциальности пользователей
● Могут нести в себе вредоносные файлы
● Могут быть непредсказуемыми и меняться без вашего на то согласия
● Последствия их использования могут быть непредвиденными
Применяя сторонние коды необходимо полностью удостовериться, что они не влияют на критический путь рендеринга.
Сторонние коды в JavaScript
Мы уже выяснили, что к сторонним кодам относятся любые скрипты, которые встраиваются в сайт от стороннего поставщика. Размещая у себя ссылки на Facebook, VK, Instagram вы тем самым ставите сторонние сценарии, не говоря уже о рекламе и другом контенте. Тем не менее, они увеличивают конверсию и являются полезными.
Одним из наиболее частых является использование видео с Youtube. Вполне логично, что нагружать свою страницу видео файлами не разумно, гораздо логичнее встроить ссылку на видео на абсолютно законном основании. И поскольку это происходит сплошь и рядом, именно на этом примере мы и рассмотрим использование сторонних кодов.
В скриптовом отображении это будет выглядеть таким образом:
<iframe
width=»560″ height=»315″ src=»https://www.youtube.com/embed/mo8thg5XGV0»
frameborder=»0″ allow=»autoplay; encrypted-media» allowfullscreen>
</iframe>
Встраивая подобный код мы вполне обоснованно рассчитываем, что отсутствие тяжёлых файлов ускорит процесс загрузки сайта. Но, сторонние сценарии являются основной причиной снижения производительности и часто вызываются не подконтрольными вами ресурсами.
Среди проблем, которые могут всплыть:
● Они могут отправлять слишком много сетевых запросов к нескольким серверам. Чем больше запросов должен сделать сайт, тем дольше он будет загружаться.
● Могут отправлять слишком большое количества JavaScript, который занимает основной поток. Стоит учитывать, что в JavaScript останавливает процесс построения DOM, задерживая скорость отображения страниц.
● Файлы, изображения, видео могут быть не оптимизированы. Это не только негативно влияет на скорость загрузки, но и съедает трафик пользователей.
● Сторонние скрипты, загруженные без осторожности, могут быть единственной точкой отказа.
● Устаревшие API, которые они могут использовать, наносит вред пользовательскому интерфейсу.
Для начала необходимо выявить какие сторонние коды есть на сайте и сколько ресурсов требуется для их загрузки. Как известно — найти проблему, равно половине её устранения. Делается это при помощи специальных инструментов, которые позволяют выявить скрипты, провести их бейнджинг и аудит времени загрузки маяка. Только одним инструментом здесь обойтись невозможно. Необходимо применять все и в определённой последовательности.
Как эффективно загрузить сторонний скрипт?
Без сторонних кодов на сайте зачастую обойтись сложно и тому есть несколько вполне разумных объяснений. Соответственно, необходимо данные скрипты использовать эффективно. Для того, чтобы повысить производительность существует несколько вариантов:
● Загрузите код, используя атрибуты «async» или «defe»r, во избежание блокировки анализа документа.
● Рассмотрите возможность самостоятельного размещения кода, если сторонний сервер работает медленно.
● Удалите скрипт, если он не приносит пользы сайту, а только впустую потребляет ресурсы
● Рассмотрите возможности использования <link rel=preconnect>или <link rel=dns-prefetch>для выполнения поиска DNS для доменов, содержащих сторонние сценарии.
Все сторонние коды и сценарии необходимо запускать асинхронно, чтобы они не блокировали DOM, и анализ HTML-документа продолжался. При этом, не подавайтесь на уловки поставщика сторонних кодов, которые предполагают синхронную загрузку. Это негативно скажется не на их, а на вашем сайте. Корректные настройки произвести можно всегда. Для этого потребуются грамотные специалисты, которые разберут коды на составляющие и встроят их так, как нужно.
