Блог

Сторонний код

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

Чтобы «разогнать» сайт, проведения одного аудита, а ещё хуже — простого замера скорости,совсем не достаточно. Будучи инструментом со сложной конструкцией, он требует всесторонней работы и изучения возможных ошибок. Наша команда проводит многоступенчатое тестирование и только на основании собранных из нескольких источников данных делает выводы. Затем, исправляется каждый недочёт. Стоит учитывать, что одна ошибка может повлечь за собой целый ряд. Это как в автомобиле, когда неисправность одного узла, тянет за собой поломки в других, а ремонт наиболее очевидной ничего не даёт. Так и при оптимизации сайта — далеко не факт, что проблема кроется в наиболее явной ошибке. Поэтому, корректировки нужно проводить взвешенно и аккуратно. В результате нашей работы — заказчик получает сайт оптимизированный на максимум и с правильными настройками для дальшейшей работы. Это уже не просто страничка в интернете, а полноценный инструмент маркетинга.

Но что делать, если вы уже провели все оптимизации самостоятельно, а сайт всё-равно загружается медленно. Проводя тестирование при помощи сервиса 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-документа продолжался. При этом, не подавайтесь на уловки поставщика сторонних кодов, которые предполагают синхронную загрузку. Это негативно скажется не на их, а на вашем сайте. Корректные настройки произвести можно всегда. Для этого потребуются грамотные специалисты, которые разберут коды на составляющие и встроят их так, как нужно.

Похожие записи