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

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

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

1. Использование асинхронности и отсрочки

Асинхронный и отложенный позволяют загружать скрипты, не блокируя синтаксический анализатор HTML, что означает, что пользователь может видеть содержимое страницы даже до полной загрузки скриптов.
Основное различие между ними два сценария ASYNC выполняются сразу после завершения загрузки, а сценарии DEFER выполняются после DOM Interactive. ["читать далее"].

Если ваш скрипт зависит от других скриптов, рекомендуется использовать defer.

<script async src="script1.js"></script>
<script defer src="script2.js"></script>

Мы можем применить async/defer и протестировать наши приложения с помощью таких инструментов, как Lighthouse, для сравнения результатов до и после. Но наберитесь терпения, это не может значительно улучшить время загрузки, но улучшит его хотя бы незначительно при правильном использовании.

2. Методы предварительной выборки

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

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

<link rel='preconnect' href='https://*****.com'>

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

<link rel='prefetch' href='https://****/images/logo.png'>

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

3 . Внедрение CDN (сети доставки контента)

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

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

Мы можем размещать шрифты, статические файлы и CSS, изображения и т. д. через CDN.

4. Очистка кода и соблюдение рекомендаций

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

  • Удаление неиспользуемых фрагментов кода, сторонних пакетов, импорта в приложениях ES6
  • Следование подходу tree-shaking для импорта пакета. Встряхивание деревьев – это термин, обычно используемый в контексте JavaScript для устранения неработающего кода.
import _ from 'lodash'
;import * as utils from "../../utils/utils";
// can be effectively written as
import {isEmpty, pickBy} from 'lodash';
import {util1, util2} from "../../utils/utils";
  • Используйте веб-воркеров, когда вам нужно выполнить код, который требует много времени выполнения.
  • Размещение кода JavaScript в верхней части веб-страницы снижает производительность. Его лучше разместить внизу.
  • Избегайте использования глобальных переменных, потому что обработчику сценариев необходимо просматривать область действия при обращении к глобальным переменным из функции или другой области, переменная будет уничтожена, когда локальная область будет потеряна.
  • Файлы JavaScript могут быть очень большими, что может повлиять на время загрузки вашего сайта. Gzip, хорошее программное обеспечение, может использоваться для сжатия файла JavaScript.

Ленивая загрузка для общей производительности

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

  • Любой тег сценария с type="module" рассматривается как модуль JavaScript и по умолчанию откладывается.
  • CSS должен быть тонким, доставляться как можно быстрее, а используемым типам мультимедиа и запросам рекомендуется разблокировать рендеринг.
  • Атрибут загрузки Атрибут loading в элементе ‹img › или ‹iframe› может использоваться для указания браузеру отложить загрузку изображений/iframe, находящихся за пределами экрана, до тех пор, пока пользователь не прокрутит их до нужного места.
<img src="image.jpg" alt="..." loading="lazy" />
<iframe src="video-player.html" title=".. ." loading="lazy"></iframe>
  • Разделение кода / Объединение — JavaScript, CSS и HTML можно разделить на более мелкие фрагменты.

Это все для этого поста. Спасибо за прочтение!

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.