Веб-производительность — это часто упускаемый из виду показатель веб-сайта компании. Он отодвигается в конец очереди в пользу внешнего вида, макета и темы сайта. Хотя эти области сайта являются важными аспектами опыта ваших посетителей, плохая загрузка и работа веб-сайта заставят их покинуть ваш сайт до того, как он загрузится. Это означает, что все время и усилия, потраченные на создание отличного и убедительного пользовательского опыта, были напрасны.
Согласно исследованию, проведенному Google в 2017 году, когда время загрузки страницы увеличивается с 1 секунды до 3 секунд, вероятность того, что пользователь уйдет, увеличивается на 32%. Производительность вашего сайта гарантирует, что посетители смогут пройти через тщательно продуманный опыт, на создание которого команды потратили много часов.
Если вы являетесь сторонним поставщиком SaaS, производительность важнее. Предприятия хотят использовать вашу услугу, но если это является причиной проблем с производительностью на их сайте, они будут стремиться заменить вашу услугу, как только смогут.
В Ketch одним из наших главных приоритетов является обеспечение максимальной оптимизации наших библиотек для повышения производительности.
Вот 4 способа, которыми мы и вы можете оптимизировать наши библиотеки, чтобы они не мешали загрузке и производительности веб-сайтов и приложений наших клиентов.
Использовать асинхронность/отсрочку
Если это вообще возможно, вы должны спроектировать свою библиотеку так, чтобы она загружалась асинхронно, а не синхронно. Это позволяет выполнять отрисовку страницы во время загрузки библиотеки, в отличие от синхронных сценариев, которые останавливают отрисовку страницы до тех пор, пока сценарий не будет загружен, проанализирован и выполнен.
Вы можете использовать атрибуты `async` или `defer`, чтобы указать браузеру продолжать синтаксический анализ HTML во время загрузки скриптов.
Хотя атрибуты `async` и `defer` сообщают браузеру о необходимости загрузки во время рендеринга страницы, точка, в которой выполняется загруженный скрипт, – это то место, где они отличаются.
Атрибут `async` говорит браузеру выполнить скрипт при первой же возможности после его загрузки, но до того, как будет запущено событие `load`.
Атрибут defer указывает браузеру выполнить скрипт после завершения синтаксического анализа HTML, но до того, как будет запущено событие DOMContentLoaded.
Удалить неиспользуемый код
Чтобы оптимизировать загрузку вашей библиотеки, вы, вероятно, пропустите ее через процесс связывания, чтобы уменьшить количество обращений к серверу. Объединение объединяет ваши файлы кода и их зависимости в один файл.
Что мы склонны забывать, так это то, что мы редко используем все функции, доступные в наших зависимостях, которые появляются в процессе сборки. Это может привести к загрузке излишне большого файла.
Чтобы уменьшить размер этого файла, внедрите процесс дрожания дерева, чтобы удалить весь неиспользуемый код.
Встряхивание дерева просматривает связанный файл и пытается определить, какие пути кода не вызываются, и удалить их из окончательного вывода.
Примечание. Встряхивание дерева может иметь непреднамеренные побочные эффекты, если оно слишком агрессивно удаляет то, что, по его мнению, является неиспользуемым кодом. Это может вызвать непреднамеренные побочные эффекты или нарушение логики на вашей странице. Вам необходимо тщательно протестировать свою страницу с файлом встряхивания дерева.
Разбивайте большие файлы JavaScript на несколько логических файлов меньшего размера.
Фото Daniel Cheung на Unsplash
Выше мы говорили о процессе связывания, который объединяет ваш код и его зависимости в один файл, чтобы уменьшить потребность в нескольких серверах. Иногда нам не нужны все функции сразу после загрузки страницы.
Например, могут быть вызовы функций, которые требуют, чтобы пользователь нажал кнопку, прежде чем она будет активирована. Этот код можно выделить в другой файл для загрузки или отложить после того, как будет проанализирован HTML-код страницы.
Используйте сеть доставки контента
Со всеми предыдущими оптимизациями вы можете подумать, что сделали все возможное, чтобы повысить производительность своей страницы, но посетители сайта ваших клиентов не созданы равными, по крайней мере, в случае местоположения.
Чем дальше посетитель находится от физического местоположения вашего веб-сервера, а скорость сети, к которой он подключен, влияет на то, сколько времени потребуется его устройству для загрузки вашей библиотеки.
В то время как предыдущая оптимизация значительно поможет сократить время загрузки библиотеки, это приблизит файлы к посетителю. Этого можно добиться с помощью сети доставки контента (CDN), такой как Fastly, Akamai или Cloudflare.
CDN не заменяет необходимость в веб-сервере, но позволяет кэшировать содержимое сайта в стратегически важных точках по всему миру. Это кэширование сокращает расстояние между вашей библиотекой и посетителем, просматривающим страницу ваших клиентов, уменьшая время загрузки.
Заключение
Как создатель библиотеки, ваша ответственность не ограничивается обеспечением того, чтобы код работал должным образом. То, как он загружается и влияет на страницу, на которой он выполняется, не менее важно.
В Ketch мы постоянно отслеживаем и улучшаем производительность наших библиотек, используя приведенные выше советы, чтобы никогда не мешать сайту клиента.
Оптимизация вашей библиотеки покажет клиентам, что вы заботитесь о производительности их сайта так же, как и они.
Первоначально опубликовано на https://blog.ketch.com.
