Краткое изложение основных новостей и обновлений, о которых было объявлено во время нашего трехдневного онлайн-мероприятия сообщества, а также напоминание о предстоящих региональных мероприятиях.
Мы только что завершили наше трехдневное мероприятие web.dev LIVE , на котором некоторые представители веб-сообщества собрались онлайн, чтобы поговорить о состоянии веб-разработки. Каждый день мы начинали в разных региональных часовых поясах, и сотрудники Google делились обновлениями, новостями и советами, помогая разработчикам с помощью инструментов и рекомендаций, позволяющих поддерживать стабильность, мощность и доступность Интернета.
Если вы пропустили некоторые прямые трансляции, все сеансы записаны и доступны для просмотра на YouTube. У нас также запланированы предстоящие региональные мероприятия по всему миру, которые организуются группами разработчиков Google и будут проводиться углубленные сессии по темам, связанным с тем, что мы освещали во время web.dev LIVE.
Давайте углубимся в некоторые новости и обновления, которыми делились за три дня.
Веб-показатели
Команда Chrome объявила об инициативе Web Vitals , направленной на предоставление унифицированных рекомендаций, показателей и инструментов, которые помогут разработчикам обеспечить удобство работы пользователей в Интернете. Команда Google Search также недавно объявила , что они будут оценивать удобство страницы в качестве критерия ранжирования и включат в ее основу показатели Core Web Vitals .
Тремя столпами Core Web Vitals 2020 года являются загрузка, интерактивность и визуальная стабильность контента страницы, которые фиксируются следующими показателями:
- Largest Contentful Paint измеряет воспринимаемую скорость загрузки и отмечает точку на временной шкале загрузки страницы, когда, вероятно, загрузился основной контент страницы.
- Задержка первого ввода измеряет скорость реагирования и количественно оценивает впечатления пользователей при попытке первого взаимодействия со страницей.
- Совокупный сдвиг макета измеряет визуальную стабильность и количественно определяет количество неожиданных перемещений содержимого страницы.
На web.dev LIVE мы поделились лучшими практиками оптимизации основных веб-показателей и использования Chrome DevTools для изучения важных показателей вашего сайта . Мы также поделились множеством других докладов, связанных с производительностью, которые вы можете найти на странице web.dev/live в расписании первого дня.
инструмент.отчет
Разработка для такой широкой платформы, как Интернет, может оказаться сложной задачей. Инструменты сборки часто лежат в основе вашего проекта веб-разработки, играя ключевую роль в управлении жизненным циклом вашего разработчика и продукта.
Мы все видели громоздкие файлы конфигурации сборки, поэтому, чтобы помочь веб-разработчикам и авторам инструментов справиться со сложностью Интернета, мы создалиtooling.report . Это веб-сайт, который поможет вам выбрать правильный инструмент сборки для вашего следующего проекта, решить, стоит ли переход от одного инструмента к другому, или выяснить, как внедрить лучшие практики в конфигурацию вашего инструмента и базу кода.
Мы разработали набор тестов, чтобы определить, какие инструменты сборки позволяют вам следовать лучшим практикам веб-разработки. Мы работали с авторами инструментов сборки, чтобы убедиться, что мы правильно используем их инструменты и представляем их честно.
Первоначальный выпускtooling.report охватывает webpack v4, Rollup v2, Parcel v2 и Browserify with Gulp, которые на данный момент кажутся самыми популярными инструментами сборки. Мы создалиtooling.report с возможностью добавления дополнительных инструментов сборки и дополнительных тестов с помощью сообщества.
Если нам не хватает передового опыта, который следует протестировать, предложите его в выпуске GitHub . Если вы готовы написать тест или добавить новый инструмент, который мы не включили в первоначальный набор, мы приглашаем вас внести свой вклад !
А пока вы можете узнать больше о нашем подходе к созданиюtooling.report и посмотреть нашу сессию на web.dev LIVE .
Конфиденциальность и безопасность в Интернете
Chrome верит в открытую сеть, которая уважает конфиденциальность пользователей и поддерживает ключевые варианты использования, которые позволяют сети работать для всех.
В 2019 году Chrome предложил обновление стандарта файлов cookie, чтобы по умолчанию ограничивать файлы cookie собственными контекстами и требовать, чтобы файлы cookie для сторонних контекстов были явно отмечены как таковые. В частности, это обеспечивает линию защиты от атак с подделкой межсайтовых запросов. В настоящее время это предложение принимается Chrome, Firefox, Edge и другими браузерами.
Хотя Chrome решил временно отменить эти изменения в свете COVID-19, к сожалению, во время кризиса, когда люди наиболее уязвимы, вы также наблюдаете рост числа подобных атак. Итак, с выходом стабильной версии Chrome 84 (середина июля 2020 г.) изменения начнут снова распространяться на все версии Chrome, начиная с 80 и выше. Чтобы узнать больше, ознакомьтесь с руководством по использованию файлов cookie SameSite , а также с сеансом web.dev LIVE .
Более того, под лозунгом Privacy Sandbox Chrome представляет ряд предложений по стандартам, направленных на поддержку вариантов использования, которые позволяют людям зарабатывать на жизнь с помощью веб-платформы, но делают это таким образом, чтобы лучше уважать конфиденциальность пользователей. Chrome активно ищет отзывы по этим предложениям и участвует в открытых форумах W3C для обсуждения предложений, а также предложений, представленных другими сторонами. Узнайте больше об этой инициативе в разделе Безопасность и конфиденциальность открытого веб- сеанса.
Наконец, с точки зрения безопасности пользователей, Spectre представлял собой уязвимость, которая означала, что вредоносный код, запущенный в одном процессе браузера, мог прочитать любые данные, связанные с этим процессом, даже если они имеют другое происхождение. Одним из способов смягчения этой проблемы в браузере является изоляция сайта, то есть помещение каждого сайта в отдельный процесс. Чтобы узнать больше, посмотрите сеанс web.dev LIVE, посвященный новым политикам открытия и внедрения Cross-Origin (COOP и COEP).
Создание сети с мощными возможностями
Chrome хочет, чтобы вы могли свободно создавать веб-приложения высочайшего качества, которые обеспечат максимальный охват пользователей на всех устройствах. Сочетая удобство установки и надежность PWA с проектом возможностей (Project Fugu), Chrome фокусируется на трех вещах, чтобы сократить разрыв между приложениями для конкретной платформы и Интернетом, чтобы помочь вам создавать и предоставлять отличный опыт.
Во-первых, команды Chrome усердно работали над тем, чтобы предоставить веб-разработчикам и пользователям больше контроля над процессом установки , добавляя в омнибокс рекламу установки и многое другое . Несмотря на повсеместное распространение Интернета, некоторым компаниям по-прежнему важно иметь свое приложение в магазине. Чтобы помочь, Chrome запустил Bubblewrap , библиотеку и интерфейс командной строки, которые упрощают размещение вашего PWA в Play Store. Фактически, PWABuilder.com теперь использует Bubblewrap под капотом. Всего за несколько щелчков мыши вы можете создать APK и загрузить PWA в Play Store, если вы соответствуете критериям .
Во-вторых, Chrome обеспечивает более тесную интеграцию с операционной системой, например, возможность делиться фотографией, песней или чем-то еще, вызывая службу общего доступа на системном уровне с помощью Web Share API , или возможность получать контент при совместном использовании с другого устройства. установил приложение . Вы можете держать пользователей в курсе событий или незаметно уведомлять их о новых действиях с помощью значков приложений . Кроме того, пользователям теперь стало проще быстро запускать действия с помощью ярлыков приложений , которые появятся в Chrome 84 (середина июля 2020 г.).
И, наконец, Chrome работает над новыми возможностями, которые позволяют использовать новые сценарии, которые раньше были невозможны, например, редакторы, которые читают и записывают файлы в локальной файловой системе пользователя или получают список локально установленных шрифтов, чтобы пользователи могли их использовать. в своих конструкциях.
Во время web.dev LIVE мы говорили о множестве других возможностей и функций , которые могут позволить вам предоставить тот же опыт и с теми же возможностями, что и приложения для конкретной платформы. Все сеансы можно посмотреть на сайте web.dev/live в расписании второго дня.
Что нового в Chrome DevTools и Lighthouse 6.0
Chrome Devtools: новая вкладка «Проблемы», эмулятор недостатков цвета и поддержка Web Vitals.
Одной из наиболее мощных функций Chrome DevTools является способность выявлять проблемы на веб-странице и доводить их до сведения разработчика. Это особенно актуально, поскольку мы переходим к следующему этапу создания сети, в которой конфиденциальность превыше всего . Чтобы уменьшить утомляемость уведомлениями и беспорядок в консоли, Chrome DevTools запустил вкладку «Проблемы» , на которой основное внимание уделяется трем типам критических проблем: проблемы с файлами cookie , смешанный контент и проблемы COEP . Чтобы начать работу, посмотрите сеанс web.dev LIVE, посвященный поиску и устранению проблем на вкладке «Проблемы» .
Более того, поскольку основные веб-показатели становятся одним из наиболее важных наборов показателей, которые веб-разработчики должны отслеживать и измерять, DevTools хочет, чтобы разработчики могли легко отслеживать, насколько они работают в соответствии с этими пороговыми значениями. Итак, эти три показателя теперь находятся на панели «Производительность» Chrome DevTools.
И, наконец, поскольку все больше разработчиков уделяют внимание доступности, DevTools также представила эмулятор недостатков цветового зрения , который позволяет разработчикам имитировать нечеткость зрения и другие типы недостатков зрения. Подробнее об этой и многих других функциях можно узнать в разделе «Что нового в DevTools» .
Lighthouse 6.0: новые метрики, лабораторные измерения Core Web Vitals, обновленный показатель производительности и новые проверки.
Lighthouse — это автоматизированный инструмент с открытым исходным кодом, который помогает разработчикам улучшить производительность своего сайта. В последней версии команда Lighthouse сосредоточилась на предоставлении информации на основе показателей, которые дают вам сбалансированное представление о качестве вашего пользовательского опыта с учетом критических параметров.
Чтобы обеспечить согласованность, Lighthouse добавила поддержку основных веб-показателей: LCP , TBT (прокси-сервер для FID , поскольку Lighthouse — это лабораторный инструмент, а FID можно измерить только в полевых условиях) и CLS . Lighthouse также удалил три старых показателя: First Meaningful Paint , First Idle CPU и Max Potential FID . Эти удаления вызваны такими соображениями, как изменчивость показателей и новые показатели, предлагающие лучшее отражение той части пользовательского опыта, которую Lighthouse пытается измерить. Кроме того, Lighthouse также внесла некоторые коррективы в то, насколько каждый показатель влияет на общий показатель производительности, на основе отзывов пользователей.
Lighthouse также добавила калькулятор оценок , который поможет вам изучить оценку производительности, обеспечивая сравнение оценок версий 5 и 6. Когда вы запускаете аудит с помощью Lighthouse 6.0, в отчете содержится ссылка на калькулятор с заполненными результатами.
И, наконец, Lighthouse добавил несколько новых проверок с упором на анализ JavaScript и доступность.
Узнайте больше, посмотрев сеанс «Что нового в быстродействующих инструментах» .
Узнать больше
Спасибо всем членам сообщества, которые присоединились к нам, чтобы обсудить возможности и проблемы веб-платформы.
В этом посте кратко изложены некоторые основные моменты мероприятия, но это было гораздо больше. Обязательно просматривайте все сеансы и подписывайтесь на информационный бюллетень web.dev, если хотите, чтобы больше контента попадало прямо на ваш почтовый ящик. Посетите раздел «Региональные мероприятия» на сайте web.dev/live, чтобы узнать о предстоящем мероприятии сообщества в вашем часовом поясе!