Оптимизация скорости интернет ресурса, правильные советы

Оптимизация скорости.

Как не крути, является наиважнейшим заданием. Если у вас первоклассные статьи, но блог или сайт открывается очень медленно, то плохо. Да, Друзья, полный «капец», писец, ну как кому больше нравится.

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

Оптимизация скорости это серьезно.

Так что если Ты видишь такую картину спеши поправить свои дела.
оптимизация скорости

Проверку производи здесь: https://developers.google.com/speed/pagespeed/insights/

Как мы можем оптимизировать блог или сайт, шаг за шагом.

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

Оптимизация скорости, адаптивный дизайн.

Самое первое, что Google рекомендует при работе с ненужными пере направлениями, — это переключение на адаптивный дизайн. ( https://web.dev/responsive-web-design-basics/  )

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

Оптимизация скорости, пере направление целевой страницы.

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

Дело в том, что каждый дополнительный редирект замедляет время рендеринга страницы, так как каждый редирект добавляет один (если вам повезет) или много (случается чаще) обходных запросов HTTP-ответа-ответа.

Оптимизация скорости, как оптимизировать?

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

Конечно, лучше использовать 301 пере направление для постоянного пере направления. Но если вы готовы перенаправить пользователей на некоторые краткосрочные рекламные страницы.  Или URL адреса, относящиеся к конкретному устройству, временные пере направления 302 являются лучшим вариантом.

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

Однако, говоря о перенаправлениях JavaScript.

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

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

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

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

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

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

Размер изображения и оптимизация скорости.

Как ни крути, но в среднем на изображения приходится около 80% , необходимых для загрузки одной веб-страницы.

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

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

Таким образом, одна из широко распространенных «ошибок» — отправка больших изображений на меньшие устройства.

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

Оптимизация скорости, как оптимизировать?

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

Конечно, вы можете указать, какую версию использовать в своем HTML или CSS с помощью медиазапросов, размеров области просмотра и т. Кстати, вот хороший инструмент, который поможет вам в создании изображений различных размеров. ( https://www.npmjs.com/package/responsive-images-generator )

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

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

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

Отложить неиспользованный CSS.

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

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

Оптимизация скорости, как оптимизировать?

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

После того, как вы очистили свой CSS, важно оптимизировать остальные правила CSS. Типа, уменьшить ненужный код, разбить CSS-файлы, уменьшить пробелы и т..

Также очень хорошая идея встроить важные CSS-ресурсы небольшого размера непосредственно в HTML-документ. Вот как вы можете устранить лишние HTTP-запросы.

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

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

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

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

Оптимизация скорости, как оптимизировать?

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

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

Например, они могут уменьшить значение цвета # 000000 до # 000, что довольно неплохо, если существует много таких значений цвета.

JavaScript, минификация и оптимизация скорости.

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

Как оптимизировать?

Как и в случае минимизации CSS, самый быстрый и наименее болезненный способ избавиться от ненужных данных в вашем коде — использовать онлайн-минификатор.

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

Кодирование изображений.

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

Как оптимизировать?

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

Поэтому всегда лучше автоматизировать сжатие изображений и навсегда забыть об этом. Так что сделайте себе огромное одолжение и используйте imagemin или libvips для вашего процесса сборки.( https://github.com/imagemin/imagemin )

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

Сжатие текста.

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

Как оптимизировать?

Google настоятельно рекомендует распаковывать все сжимаемые данные, и все современные браузеры предлагают сжатие gzip для всех HTTP-запросов.

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

Поэтому обязательно ознакомьтесь с этими примерами файлов конфигурации для большинства популярных серверов. (https://github.com/h5bp/server-configs )

После этого найдите свой сервер в списке.

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

В отличие от формата gzip, Brotli обладает гораздо лучшими характеристиками сжатия. Но есть одна загвоздка — чем выше уровень сжатия, тем больше ресурсов потребуется браузеру для его выполнения.

Вот почему все преимущества Brotli по размеру будут полностью сведены на нет медленным временем отклика сервера.

Поэтому я бы не рекомендовал выходить за пределы 4-го уровня сжатия (у Brotli 10 уровней сжатия) для динамических активов. Однако с помощью статических ресурсов, которые вы предварительно сжимаете, вы можете реализовать самый высокий уровень сжатия.

Предварительная загрузка ключевых запросов.

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

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

Как оптимизировать?

С помощью тега:  close_btn=»true»

<link rel = «preload»> вы можете сообщить браузеру, что ресурс необходим как часть кода, отвечающего за рендеринг вышеприведенного контента, и заставить его извлекать ресурс, как только возможный. Вот пример того, как можно использовать тег:

<link rel = «preload» as = «script» href = «super-Important.js»>
<link rel = «preload» as = «style» href = «crit.css»>

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

Огромные нагрузки сети и оптимизация скорости.

Сокращение общего размера сетевых запросов может не только ускорить вашу страницу, но и сэкономить деньги ваших пользователей, которые они будут тратить на сотовые данные.
Как оптимизировать?

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

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

Итак, вот лишь небольшое количество методов минимизации ресурсов, которые вы можете рассмотреть.

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

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

Устранить ресурсы, блокирующие рендеринг.

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

Как оптимизировать?

Если внешние скрипты небольшие, вы можете встроить их непосредственно в HTML-документ, чтобы избежать каких-либо дополнительных сетевых запросов.

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

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

То есть скрипт будет выполняться, пока страница продолжает анализ и не будет сильно влиять на общую скорость.

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

Использование видео форматов для анимационного контента.

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

Как оптимизировать?

Самый быстрый способ конвертировать GIF в видео с помощью инструмента ffmpeg.  https://www.ffmpeg.org/

После того, как вы установили инструмент, просто загрузите в него свои GIF-файлы и выберите формат видео, в который вы хотите их конвертировать.

Рекомендуется выбрать MPEG-4, потому что он имеет самую широкую поддержку среди браузеров.

Вы также можете попробовать относительно новый формат WebM, разработанный Google (так же, как WebP для изображений). Хотя поддержка браузеров для WebM не такая широкая, как для MPEG-4, она все же очень хороша с точки зрения характеристик сжатия.

А поскольку элемент видео позволяет указывать несколько элементов source, вы можете добиться цели, указав предпочтение источника WebM, который могут использовать многие браузеры, в то время как откатывается на источник MPEG-4, понятный всем другим браузерам.

Предварительное подключение к необходимым источникам.

Как правило, установление соединений, особенно безопасных, занимает много времени. Дело в том, что для этого требуются DNS-запросы, SSL, обмен секретными ключами и некоторые обратные передачи на конечный сервер.

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

Как оптимизировать?

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

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

Изображения в форматах следующего поколения.

Не все форматы изображений созданы сразу. Правда в том, что наши старые надежные форматы JPEG и PNG теперь имеют гораздо худшие характеристики сжатия и качества по сравнению с JPEG 2000, JPEG XR и WebP.

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

Как оптимизировать?

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

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

Обеспечение видимости текста во время загрузки веб-шрифта.

Все владельцы веб-сайтов хотят выделяться с помощью своих супер крутых пользовательских шрифтов.

Единственное плохое в этом то, что такие шрифты могут загружаться слишком долго. Если это так, браузер заменит ваш шрифт на запасной (например, Arial или Times New Roman).

Как оптимизировать?

Это не совсем совет по оптимизации, но если вы не хотите, чтобы ваш контент отображался неправильно, вам нужно убедиться, что он отлично смотрится с некоторыми базовыми резервными шрифтами, такими как Arial или Georgia.

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

Минимизировать работу основного потока.

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

Как оптимизировать?

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

«Lighthouse — это автоматизированный инструмент для улучшения качества вашего сайта. Вы даете ему URL, и он предоставляет список рекомендаций о том.  Как повысить производительность страницы.  Сделать страницы более доступными, придерживаться передового опыта и многое другое. Вы можете запустить его из Chrome DevTools, как расширение Chrome.  Или даже как модуль узла, что полезно для непрерывной интеграции.»

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

Сокращение времени выполнения JavaScript.

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

Как оптимизировать?

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

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

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

Реализация политики кэширования.

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

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

Как оптимизировать?

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

( https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9 )

Помимо кэширования HTTP, определения оптимального времени жизни для сценариев (max-age) и предоставления токенов проверки (ETag), не забывайте о кэшировании Service Worker, включая вышеупомянутое кэширование кода V8. (https://v8.dev/blog/code-caching)

Как избежать чрезмерного размера DOM.

Слишком большое дерево DOM со сложными правилами стилей может отрицательно повлиять на такие вещи, как скорость, время выполнения и производительность памяти.

Лучше всего иметь дерево DOM, которое имеет в общей сложности менее 1500 узлов, максимальную глубину 32 узла и не иметь родительских узлов с более чем 60 дочерними узлами.

Как оптимизировать?

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

Минимизация глубины критических запросов.

Цепочка критических запросов является частью стратегии Critical Rendering Path (CRP), основной идеей которой является установление приоритетов загрузки определенных ресурсов и изменение порядка их загрузки.

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

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

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

Пользовательские временные метки.

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

К счастью, с User Timing API это больше не проблема. По сути, основная цель этого сервиса — измерить производительность JavaScript вашего приложения, чтобы вы знали, какие части ваших скриптов отстают и нуждаются в оптимизации.

Как оптимизировать?

Все, что вам нужно сделать, чтобы измерить производительность вашего приложения с точки зрения JavaScript — это получить доступ к результатам из JavaScript с помощью API.

После того, как вы определили области для улучшения, продолжайте и исправьте их. Вот хорошее руководство, чтобы вы могли начать работу с User Timing API. (https://www.html5rocks.com/en/tutorials/webperformance/usertiming/)

Заключение.

Оптимизация скорости это Ваша головная боль но и победа в конце пути.

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

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

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

Пожалуйста, поделитесь своим опытом с новым инструментом PageSpeed ​​Insights, а также с технической оптимизацией.
https://developers.google.com/speed/pagespeed/insights/

Ух!

Вроде точка.

Удачи, Друзья!

 

Спасибо, что прочитали этот пост, не забудьте подписаться!

ПОДПИСКА

Подписчики получают знаки внимания от нашего коллектива, как полезную информацию и приятные сюрпризы!

Поделиться этой записью

коментарий “Оптимизация скорости интернет ресурса, правильные советы”

  1. kirils:

    Sposibo!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

scroll to top