Как построить более быстрые веб-сайты

Sep 11, 2025

Инструкции

Впереди его разговор на Генерировать Лондон 21 сентября мы догнали Патрик Гаманн инженер по веб-исполнению в Быстро Кто находится на миссии, чтобы построить более быструю сеть для всех.

Что ваша роль в порядке включает?
Патрик Гаманн: Быстро находится в краевой облачной платформе, которая подкрепляет некоторых крупнейших в мире брендов. Моя роль преимущественно фокусируется на R & AMP; D; Работа с командами внутри быстро, чтобы использовать клиентские технологии и веб-стандарты для повышения производительности и доставки наших продуктов и - самое главное - услуги наших клиентов. Некоторые текущие проекты включают в себя инициативы вокруг мониторинга производительности браузера, метрики и обслуживающих работников.

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

Какое самое большое препятствие для быстрого опыта онлайн сейчас?
PH: Одно слово: JavaScript. Я думаю, что я должен уточнить это слегка: Web на пике кризиса ожирения JavaScript. Средняя веб-страница теперь доставляет около 500 КБ сценария. Скрипт, который занимает более секунды, чтобы просто разбираться - не говоря уже о том, на низком устройстве и превышает пять секунд, чтобы добраться до состояния, который пользователь может взаимодействовать со страницей. Поэтому единственный способ улучшить пользовательский опыт наших сайтов - измерить, оптимизировать и уменьшить наш JavaScript - прежде всего.

WebPageTest runs a free website speed test from multiple locations around the globe using real browsers and at real consumer connection speeds — WebPagetest управляет бесплатным тестом скорости сайта из нескольких местоположений по всему миру, используя реальные браузеры, а на реальных скоростях потребительских соединений

Какие ваши любимые инструменты для оптимизации веб-характеристики?
PH: Я сильный верующий, что вы не можете оптимизировать то, что вы еще не измеряли. Таким образом, мой набор инструментов сильно взвешен для измерений и профилирования. Для синтетического измерения я всегда достигую WebPagetest. И инструменты разработчика браузера (сетевые и производительные панели) сначала. Тем не менее, ничто не сравнится с измерением реального пользовательского опыта также (R.u.m), поэтому хорошее знание аписа синхронизации производительности браузера помогает.

Вы работали на некоторых очень больших кодовых базах. Каковы проблемы работы в масштабе?
PH: По большому счету я бы утвердовал, что большая кодовая база разделяет большинство проблем, которые вы найдете в меньшем количестве: устранение неиспользуемых CSS (проблема, в которой я думаю, нерешена), кэширование, конвейеры по сборке активов и версий, и так далее. Вы также получите более «BIT ROT» - лучшие практики становления антиблокировками со временем. Но лично я нашел большинство проблем в масштабе, это проблемы людей, а не технические. Мне еще не работают в большой организации, которая не зависит от закона Конвея.

Вы называете себя прогрессирующим адвокатом по улучшению. Что это о том подходе, которое резонирует с вами?
PH: Вопреки распространенному убеждению, наши пользователи на самом деле используют продукты, которые мы строим в реальном мире: один полный не идеальных условий просмотра и сбоя вокруг каждого угла. Прогрессивное улучшение позволяет нам создавать опыт, которые включают всем нашим пользователям и устойчивы к неудачам реального мира. Это довольно просто: просто начните с основы, а не библиотеку JavaScript 300KB, о которой ваша местная бариста рассказала. Мы не должны забывать основы.

Что вы взволнованы в развитии Frontend на данный момент?
PH: Веб под угрозой. Пользователи проводят больше времени на родных - и, таким образом, Siled - приложение испытывает от открытой сети. Тем не менее, мы все еще кажемся строить сайты, которые занимают 20 секунд и стоят 1,20 фунтов стерлингов за нагрузку на мою роуминговое соединение, в конечном итоге устроили наших пользователей.

К счастью, технологии, такие как сервисный работник и связанные с ними API, здесь, чтобы помочь. Я не могу дождаться новой эры быстрых, упругих веб-сайтов, которые все еще функционируют в автономном режиме, могут синхронизировать мои данные на заднем плане и уведомить меня с обновлениями. Некоторые люди называют этими прогрессирующими веб-приложениями «Прогрессирование». Я предпочитаю термин «Интернет».

In his talk at Generate London Patrick Hamann will explore the current, past, and future best-practices for loading assets in the browser — В своем разговоре при генерировании Лондон Патрик Гаманнн будет изучать текущие, прошлые и будущие лучшие практики для погрузки активов в браузере

Что люди могут ожидать, чтобы узнать из вашего разговора в Генерировать Лондон ?
PH: В аутсайдеру подают веб-сайт, кажется довольно простым: отправьте несколько HTML и CSS вниз на провод, а браузер решит, что делать дальше. Тем не менее, много на самом деле происходит под капотом, все происходит по стоимости нашим пользователям.

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

Генерировать Лондон 21/22 сентября расположены 15 других презентаций, охватывающих веб-анимацию, стратегию UX, прототипирование, доступность, адаптивные компоненты CSS и многое другое. Есть также четыре семинара на выбор на за день до конференции, но билеты очень ограничены. Зарезервируйте свое место сейчас !

Как построить более быстрые веб-сайты

Инструкции - Самые популярные статьи

Учебник Adobe Fresco: создать портрет в приложении по живописи

Как нарисовать собаку

Как построить сайт блога с GATSBY

Как нарисовать нос

5 вещей, которые вы не знали, вы можете сделать с HTML

стежка и композит 360 кадры

Создайте пользовательскую кисть наклейки в Artrage

Создание интерактивных диаграмм в Ionic 2

Категории