Как улучшить производительность сайта

Мы все прекрасно знаем, что скорость-это деньги.

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

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

Особенно это актуально, когда речь идет об улучшении производительности JavaScript.

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

Один из запросов, часто делаемых клиентами и разработчиками, заключается в том, чтобы определить приоритеты повышения производительности по простоте и требуемым ресурсам (из-за ограничений времени разработки).

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

Обойдём это, упорядочив список в соответствии с действиями, которые, как я понимаю, потребуют минимальных изменений в коде сайта.

В этой статье выделим четыре из самых повторяющихся быстрых исправлений.

1. Удаление сторонних инструментов, виджетов и веб-технологий

Большинство веб-сайтов полагаются на сторонние технологии для отслеживания, мониторинга, поддержки клиентов (функции чата) и многого другого.

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

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

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

При доступе к веб-странице браузер находит все ресурсы, которые требуют поиска DNS (системы доменных имен).

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

Это событие зависит от быстрого ответа исходного сервера.

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

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

Вопрос здесь в том, зачем нести мертвый груз, когда вам это не нужно?

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

Самый простой способ сделать это - использовать инструменты поиска технологий, такие как BuiltWith и Wappalyzer (для этого можно использовать несколько других инструментов, как платных, так и бесплатных).

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

Однако, если технология все еще используется, и вам нужно оценить выгоду от ее сохранения и влияние, которое она оказывает на загрузку сайта, вам лучше использовать диагностические инструменты, такие как Page Speed Insight Tool и Lighthouse, чтобы выделить влияние на производительность.

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

Еще один хороший инструмент для визуализации активности нагрузки это RequestMap.

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

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

Чем старше сайт, тем выше шансы найти внешний код, который больше не используется.

Мы нашли:

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

От этих скриптов легко избавиться, так как это не влияет на общую целостность остального кода на сайте.

Кроме того, если вам нужно сохранить эти скрипты, переместите как можно больше поддерживаемых в Google Tag Manager (GTM) или любой другой менеджер тегов, который вы используете, чтобы уменьшить количество запросов DNS, выполняемых браузером.

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

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

2. Реализовать предварительную выборку DNS и предварительное подключение

DNS prefetch и preconnect - это подсказки ресурсов браузера, которые можно использовать для ускорения поиска DNS.

<link rel="dns-prefetch" href="какая-то ссылка"/>
<link rel="preconnect" href="какая-то ссылка" />

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

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

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

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

3. Используйте единую библиотеку jQuery, когда это возможно

Некоторые сторонние скрипты поставляются с библиотекой jQuery.

С точки зрения непрофессионала, jQuery-это библиотека JavaScript, которая упрощает использование функций JavaScript.

Большинство современных веб-сайтов имеют некоторую форму JavaScript, поэтому на сайте уже загружена версия jQuery.

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

При загрузке внешнего скрипта всегда запрашивайте версию, которая не загружает свою версию jQuery.

Затем ваш разработчик может настроить скрипт на использование глобальной версии, загружаемой на ваш сайт.

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

Используйте окно консоли JavaScript Chrome dev tools, чтобы увидеть, какая версия или версии jQuery загружается на ваш сайт.

Сочетанием клавиш Ctrl + Shift + J откройте консоль, затем введите console.log(jQuery().jquery); в командной строке.

Yellow Lab Tools имеет простой интерфейс для проверки версий jQuery.

Другие способы уменьшить влияние загрузки файлов jQuery включают использование последней версии и обслуживание jQuery через размещенные библиотеки Google.

4. Удалите избыточные инструкции CSS для поддержки старого браузера

Чем старше сайт, тем выше количество нарушений.

Удаление избыточных инструкций CSS, таких как поддержка старого браузера (исправления IE) и старые префиксы, легко, потому что обычно это отдельный блок кода.

Многие инструменты выделяют неиспользуемый CSS на сайте.

Однако вместо того, чтобы просматривать код построчно для префикса olds и поддержки браузера, Yellow Lab Tools дает вам простой для понимания список, который вы можете заставить своего разработчика работать.

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

Заключение

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

Регулярный аудит ваших внешних скриптов поможет вам наиболее эффективно предоставлять лучший опыт вашим посетителям.