Краткий обзор основных новостей и обновлений, объявленных во время нашего трехдневного онлайн-мероприятия для сообщества, и напоминание о предстоящих региональных мероприятиях.
Недавно завершилось трехдневное мероприятие web.dev LIVE, на котором представители веб-сообщества обсуждали текущее состояние веб-разработки. Каждый день мы начинали в новом часовом поясе, и сотрудники Google делились новостями и советами, чтобы помочь разработчикам сделать интернет стабильным, мощным и доступным.
Если вы пропустили часть трансляции, вы можете посмотреть записи сессий на YouTube. Кроме того, в ближайшее время по всему миру пройдут региональные мероприятия, организованные Google Developer Groups. На них будут подробно обсуждаться темы, затронутые на web.dev LIVE.
Давайте посмотрим, о чем мы говорили в течение этих трех дней.
интернет-показатели
Команда Chrome объявила о запуске инициативы Web Vitals, цель которой – предоставить разработчикам единые рекомендации, показатели и инструменты, которые помогут им сделать сайты удобнее для пользователей. Недавно команда Google Поиска объявила, что при ранжировании страниц будет учитываться их удобство для пользователей, а в качестве основы для оценки будут использоваться основные интернет-показатели.
Тремя основными показателями Core Web Vitals в 2020 году были скорость загрузки, интерактивность и визуальная стабильность контента на странице. Они оценивались по следующим метрикам:
- Отрисовка самого крупного контента – показатель, который позволяет оценить скорость загрузки страницы и отмечает момент, когда на ней, скорее всего, уже появился основной контент.
- Задержка после первого ввода позволяет оценить, насколько быстро страница реагирует на действия пользователя, когда он впервые пытается с ней взаимодействовать.
- Совокупное смещение макета (CLS) отражает визуальную стабильность и позволяет оценить, насколько часто контент на странице неожиданно смещается.
На мероприятии web.dev LIVE мы рассказали о том, как оптимизировать сайт с учетом показателей Core Web Vitals и как использовать инструменты разработчика Chrome для анализа этих показателей. Мы также поделились множеством других докладов, связанных с производительностью, которые вы можете найти на сайте web.dev/live в расписании первого дня.
tooling.report
Разработка для такой широкой платформы, как Интернет, может быть сложной задачей. Инструменты сборки часто лежат в основе проекта веб-разработки, играя ключевую роль в управлении жизненным циклом разработчика и продукта.
Мы все видели громоздкие файлы конфигурации сборки, поэтому, чтобы помочь веб-разработчикам и авторам инструментов справиться со сложностью Интернета, мы создали tooling.report. Это сайт, который поможет вам выбрать правильный инструмент сборки для вашего следующего проекта, решить, стоит ли переходить с одного инструмента на другой, или выяснить, как внедрить лучшие практики в конфигурацию вашего инструментария и базу кода.
Мы разработали набор тестов, чтобы определить, какие инструменты сборки позволяют следовать рекомендациям по веб-разработке. Мы работали с авторами инструментов сборки, чтобы убедиться, что мы правильно использовали их инструменты и справедливо их представили.
Первоначальный выпуск tooling.report охватывает webpack v4, Rollup v2, Parcel v2 и Browserify с Gulp, которые в настоящее время являются наиболее популярными инструментами сборки. Мы создали tooling.report с возможностью добавления дополнительных инструментов сборки и дополнительных тестов с помощью сообщества.
Если вы считаете, что мы упустили какую-то рекомендацию, которую следует протестировать, сообщите нам об этом на GitHub. Если вы хотите написать тест или добавить новый инструмент, которого нет в исходном наборе, присоединяйтесь к нам.
А пока вы можете узнать больше о нашем подходе к созданию tooling.report и посмотреть запись нашей сессии на web.dev LIVE.
Конфиденциальность и безопасность в интернете
Мы считаем, что интернет должен быть открытым и уважать конфиденциальность пользователей, а также поддерживать ключевые сценарии использования, которые делают его удобным для всех.
В 2019 году команда Chrome предложила обновить стандарт файлов cookie, чтобы по умолчанию ограничить их использование собственным контекстом и требовать явной пометки для стороннего контекста. В частности, это обеспечивает защиту от подделки межсайтовых запросов. Сейчас это предложение внедряется в Chrome, Firefox, Edge и других браузерах.
Хотя в Chrome решили временно отменить эти изменения в связи с COVID-19, к сожалению, во время кризиса, когда люди наиболее уязвимы, вы также видите рост числа таких атак. Поэтому со стабильной версией Chrome 84 (середина июля 2020 г.) изменения снова начнут внедряться во всех версиях Chrome, начиная с 80. Подробную информацию вы найдете в руководстве по файлам cookie SameSite и видеозаписи семинара web.dev LIVE.
Кроме того, в рамках инициативы Privacy Sandbox мы предлагаем ряд стандартов, которые позволят людям зарабатывать на жизнь с помощью веб-платформы, но при этом будут лучше защищать конфиденциальность пользователей. Мы активно собираем отзывы об этих предложениях и участвуем в открытых форумах W3C, чтобы обсудить как наши предложения, так и предложения других сторон. Подробнее об этой инициативе рассказывается в разделе Безопасность и конфиденциальность в открытом интернете.
Наконец, уязвимость Spectre позволяла вредоносному коду, запущенному в одном процессе браузера, считывать любые данные, связанные с этим процессом, даже если они поступали из другого источника. Один из способов защиты от таких атак – изоляция сайтов, то есть запуск каждого сайта в отдельном процессе. Чтобы узнать больше, посмотрите трансляцию web.dev LIVE, посвященную новым правилам Cross-Origin Opener Policy и Cross-Origin Embedder Policy (COOP и COEP).
Создание веб-страницы с мощными возможностями
Chrome стремится предоставить вам возможность создавать веб-приложения высочайшего качества, которые обеспечат вам максимальный охват пользователей на разных устройствах. Сочетая устанавливаемость и надежность PWA с проектом возможностей (Project Fugu), Chrome фокусируется на трех вещах, чтобы сократить разрыв между приложениями для конкретных платформ и Интернетом, чтобы помочь вам создавать и предоставлять отличные возможности.
Во-первых, команды Chrome усердно работают над тем, чтобы предоставить веб-разработчикам и пользователям больше контроля над процессом установки, добавляя продвижение установки в омнибокс и многое другое. Несмотря на повсеместное распространение интернета, некоторым компаниям по-прежнему важно иметь свое приложение в магазине. Чтобы помочь, Chrome запустил Bubblewrap – библиотеку и CLI, которые позволяют легко добавить PWA в Google Play. На самом деле, PWABuilder.com теперь использует Bubblewrap под капотом. Если ваше приложение соответствует критериям, вы можете создать APK-файл и загрузить PWA в Google Play всего за несколько кликов.
Во-вторых, Chrome обеспечивает более тесную интеграцию с операционной системой, например возможность делиться фотографиями, песнями и другими файлами, вызывая системную службу обмена с помощью Web Share API, или возможность получать контент, когда им делятся из другого установленного приложения. Вы можете держать пользователей в курсе событий или незаметно уведомлять их о новых действиях с помощью значков приложений. Кроме того, пользователям теперь проще быстро начать действие с помощью ярлыков приложений, которые появятся в Chrome 84 (середина июля 2020 г.).
И наконец, в Chrome появились новые возможности, которые позволяют реализовать сценарии, ранее недоступные. Например, редакторы могут читать и записывать файлы в локальной файловой системе пользователя или получать список локально установленных шрифтов, чтобы пользователи могли использовать их в своих проектах.
На конференции web.dev LIVE мы рассказали о множестве других возможностей и функций, которые позволяют создавать веб-приложения, не уступающие по функциональности приложениям для конкретных платформ. Все мероприятия второго дня можно посмотреть на странице web.dev/live.
Что нового в инструментах разработчика Chrome и Lighthouse 6.0
Инструменты разработчика Chrome: новая вкладка "Проблемы", эмулятор дальтонизма и поддержка Web Vitals
Одна из самых полезных функций инструментов разработчика Chrome – это возможность выявлять проблемы на веб-странице и сообщать о них разработчику. Это особенно важно в связи с переходом на интернет, ориентированный на конфиденциальность. Чтобы снизить утомляемость от уведомлений и беспорядок в консоли, в инструментах разработчика Chrome была запущена вкладка "Проблемы", на которой основное внимание уделяется трем типам критических проблем: проблемы с файлами cookie, смешанный контент и проблемы с COEP. Чтобы узнать больше, посмотрите видео Поиск и устранение проблем с помощью вкладки "Проблемы".
Кроме того, поскольку Core Web Vitals стали одним из самых важных наборов показателей, которые веб-разработчики должны отслеживать и измерять, DevTools хочет, чтобы разработчики могли легко отслеживать, насколько они соответствуют этим пороговым значениям. Поэтому эти три показателя теперь находятся на панели производительности инструментов разработчика Chrome.
И наконец, поскольку все больше разработчиков уделяют внимание специальным возможностям, в DevTools появился эмулятор нарушений цветового зрения, который позволяет разработчикам эмулировать нечеткое зрение и другие типы нарушений зрения. Подробнее об этой и других функциях можно узнать на сеансе Новые возможности Инструментов разработчика.
Lighthouse 6.0: новые показатели, лабораторные измерения Core Web Vitals, обновленная оценка производительности и новые аудиты
Lighthouse – это автоматизированный инструмент с открытым исходным кодом, который помогает разработчикам повышать эффективность сайтов. В последней версии команда Lighthouse сосредоточилась на предоставлении информации, основанной на показателях, которые дают вам сбалансированное представление о качестве вашего пользовательского опыта по критическим параметрам.
Чтобы обеспечить согласованность, в Lighthouse была добавлена поддержка основных интернет-показателей: LCP, TBT (прокси-показатель для FID, поскольку Lighthouse – это лабораторный инструмент, а FID можно измерить только в полевых условиях) и CLS. Кроме того, из Lighthouse были удалены три старых показателя: первая значимая отрисовка, первое бездействие ЦП и максимальная потенциальная задержка после первого ввода. Это связано с тем, что показатели могут меняться, а новые показатели лучше отражают ту часть пользовательского опыта, которую пытается измерить Lighthouse. Кроме того, на основе отзывов пользователей мы скорректировали влияние каждого показателя на общую оценку производительности.
В Lighthouse также добавлен калькулятор оценки, который позволяет сравнить оценки производительности в версиях 5 и 6. Когда вы запускаете аудит с помощью Lighthouse 6.0, отчет содержит ссылку на калькулятор с заполненными результатами.
Наконец, в Lighthouse добавлено множество новых проверок, в основном связанных с анализом JavaScript и специальных возможностей.
Чтобы узнать больше, посмотрите видео Что нового в инструментах для оценки скорости.
Подробнее…
Благодарим всех, кто присоединился к нам, чтобы обсудить возможности и проблемы веб-платформы.
В этой записи мы рассказали лишь о некоторых основных моментах мероприятия, но на самом деле их было гораздо больше. Посмотрите все сессии и подпишитесь на новостную рассылку web.dev, чтобы получать больше контента прямо на почту. А в разделе Региональные мероприятия на сайте web.dev/live вы найдете информацию о предстоящих мероприятиях сообщества в вашем часовом поясе.