Google PageSpeed Insights это инструмент, который вы можете использовать для измерения воспринимаемой задержки вашего сайта. Получение хорошего балла здесь жизненно важно, потому что Google объявила, что он будет использовать эти оценки в качестве ввода в свой алгоритм рейтинга поиска.
Мы отправились, чтобы увидеть, что потребуется, чтобы набрать 100 на Penesspeed Insights на мобильном. Когда мы приступили к этим усилиям, мы уже забили 100 на рабочем столе, но современная коммерция – мобильная коммерция, и там мы забили только в середине 60-х годов. В этом сообщении в блоге мы делимся способами, чтобы ваш сайт забил 100 на мобильном телефоне. Многие компании претендуют на рабочий стол, но 100 на мобильном телефоне немного единорога. Так что давайте погрузимся в.
Builder.io – это стандартный сайт Next.js. Поскольку сам сайт работает на платформе Content Builder, содержимое уже придерживается всех лучших практик для размеров изображений, предварительной нагрузки и т. Д. Тем не менее, он все еще забил только в 60-х годах. Почему?
Это помогает посмотреть на разрыв, который составляет счет.
Проблема может быть разбита на:
- TBT/TTI: JavaScript вызывает слишком много времени блокировки на странице.
- FCP/LCP: Страница имеет слишком много контента для рендеринга для мобильных браузеров.
Поэтому мы должны стремиться:
- Уменьшить количество JavaScript.
- Уменьшите количество содержания для исходного визуализации.
Почему так много JavaScript?
Наша домашняя страница по существу является статической страницей. Почему это нужно JavaScript? Ну, домашняя страница представляет собой сайт Next.js, что означает, что это приложение React (мы используем Митоз Чтобы преобразовать вывод нашего редактора перетаскивания в реакцию). Хотя подавляющее большинство сайта статически, есть три вещи, которые требуют JavaScript:
- Навигационная система: меню требуют интерактивности и, следовательно, JavaScript. Также различные меню используются для настольных и мобильных устройств.
- Нам нужно загрузить виджет чата
- Нам нужна Google Analytics.
Давайте погрузимся в каждую отдельно.
Приложение Bootstrap.
Несмотря на то, что это в первую очередь статический сайт, оно все еще приложение. Чтобы сделать работу меню, приложение должно быть загруженным. В частности, ему необходимо управлять регидратом, где структура сравнивает шаблоны против DOM и устанавливает все слушатели DOM. Этот процесс делает существующие рамки воспроизводимыми. Другими словами, даже если 95% страницы статичны, структура должна загружать все шаблоны и повторно выполнить их для определения присутствия слушателей. Последствия состоит в том, что сайт загружается дважды, один раз как HTML, а затем снова в виде JSX в JavaScript.
Чтобы сделать все хуже, процесс регидратации медленный. Рамки должны посещать каждый узел DOM и согласовывать его против VDOM, который требует времени. И процесс регидратации не может быть задержан, так как это тот же процесс, который устанавливает слушателей DOM. Задержка регидратации будет означать, что меню не будут работать.
То, что мы описываем выше, является фундаментальным ограничением каждой существующей структуры. Видите ли, они все воспроизводятся. Это также означает, что ни одна структура не позволит вам набрать 100 на мобильном сайте на реальном мире. Количество HTML и JavaScript просто слишком здорово вписываться в крошечный щеп, который PageSpeed Allots для него на мобильном.
Нам нужно принципиально переосмыслить проблему. Поскольку большая часть сайта статична, нам не должно быть вновь загрузка этой части в JavaScript или платить за регидратацию чего-то, чего нам не нужно. Это где Qwik действительно сияет. Qwik это возобновляемый не воспроизводимый И это имеет все различие. В результате Qwik не надо:
- Быть загруженным на странице нагрузки
- Пройти Дом, чтобы определить, где слушатели являются
- С нетерпением скачать и выполнять JavaScript, чтобы сделать меню работать
Все вышеперечисленное означает, что практически нет JavaScript для выполнения нагрузки сайта, и все же мы можем сохранить всю интерактивность сайта.
Внутренняя связь
Intercom – это сторонний виджет, работающий на нашем сайте, который позволяет нам взаимодействовать с нашими клиентами. Стандартный способ установки – это отбросить кусок JavaScript в свой HTML, например:
Тем не менее, есть два вопроса с вышеуказанным:
- Он добавляет JavaScript, который должен быть загружен и выполнен. Это будет рассчитывать против нашего TBT/TTI.
- Это может вызвать сдвиги макета, которые сочетаются против CLS. Это потому, что интернет-интерфейс сначала отображается без виджета, а затем снова с ним, когда JavaScript загружается и выполняется.
Qwik решает обе проблемы одновременно.
Во-первых, он захватывает DOM, который имеет домофон для визуализации виджета. Далее DOM вставляется на фактическую страницу, как так:
...
Преимущество этого состоит в том, что виджета немедленно отображается с остальной частью приложения. Независимо от задержки или мерцания, пока браузер загружает домофон JavaScript и выполняет создание виджета. Результатом является лучший пользовательский опыт и более быстрый загрузочный сайт. (Это также сохраняет пропускную способность на мобильных устройствах.)
Тем не менее, нам все еще нужен способ обнаружить щелчок на виджете и какой-то код, чтобы заменить виджет Myd с фактическим виджетом домофона, когда пользователь взаимодействует с ним. Это достигается с ON: click = "ui: boot_intercom"
атрибут. Атрибут говорит Qwik скачать boot_intercom.js.
Если пользователь нажимает на виджете MOCK.
Содержание: boot_intercom.js.
export default async function(element) { await import('https://widget.intercom.io/widget/abcd1234'); const container = element.parentElement; const body = container.parentElement; body.removeChild(container); Intercom('boot', { app_id: 'abcd1234' }); Intercom('show'); }
Файл выше загрузки Real Intercom Widget, удаляет MOCK и Bootstraps Intercom. Все это происходит естественно, без пользователей, когда-либо замечая распределитель.
Гугл Аналитика
До сих пор мы боролись с хорошей борьбой в задержке JavaScript и, следовательно, улучшение производительности веб-сайта. Аналитика отличается, так как мы не можем его отложить и должны загрузить его немедленно. Один только Bootstraphy Analytics предотвратит нас за счет оценки 100 на PageSpeed Insights для мобильных устройств. Чтобы исправить это, мы будем работать Googleianalytics в веб-рабочем, используя PartyTown Отказ Подробнее об этом в более позднем посте
Задержка JavaScript
Работа, описанная выше, понижает количество JavaScript, который веб-сайт должен загрузить и выполнять примерно на 1 КБ, что делает простой 1 мс для выполнения. По сути, нет времени. Такое минимальное количество JavaScript – это то, что позволяет нам забить идеальную оценку на TBT/TTI.
HTML задерживается
Однако даже с по существу никаких JavaScript мы все еще не можем забить 100 для мобильных устройств, если мы не исправим количество HTML, отправленное клиенту для приведенного выше рендеринга. Чтобы улучшить FCP/LCP, мы просто должны уменьшить это до минимума. Это делается только путем отправки вышеперечисленного HTML.
Это не новая идея, но это сложно выполнить. Текстовые рамки делают это сложно, так как нет простого способа разбить приложение на куски, которые находятся выше и ниже сгиба. VDOM не помогает здесь, потому что приложение генерирует целую видушку, даже если только часть она проецируется. Рамки будут воссоздать весь сайт на регидратацию, если часть этого отсутствовала, привело бы еще больше работы над начальным загрузкой.
В идеале мы бы хотели не отправлять HTML, который находится ниже сгиба, при сохранении полностью интерактивной системы меню выше сгиба. На практике это трудно сделать, как видно из-за отсутствия таких лучших практик в дикой природе. Слишком сложно сделать, поэтому никто не делает это.
Qwik – Centric, что делает все различие. Вся страница отображается на сервере. Затем часть страницы, которая не должна быть отправлена, расположена и удалена. Как пользовательские прокрутки, отсутствующая часть ленивая загружается и вставлена. Qwik не возражает против такого рода манипуляций DOM, потому что оно без гражданства и домос.
Вот настоящий код на нашем сервере, который включает ленивую загрузку сайта ниже сгиба:
async render(): Promise{ await (this.vmSandbox.require('./server-index') as ServerIndexModule).serverIndex(this); const lazyNode = this.document.querySelector('section[lazyload=true]'); if (lazyNode) { const lazyHTML = lazyNode.innerHTML; lazyNode.innerHTML = ''; (lazyNode as HTMLElement).style.height = '999em'; lazyNode.setAttribute('on:document:scroll', 'ui:/lazy'); this.transpiledEsmFiles['lazy.js'] = ` export default (element) => { element.removeAttribute('on:document:scroll'); element.style.height = null; element.innerHTML = ${JSON.stringify(lazyHTML)}; };`; } }
Код прост и до такой степени, что это было бы трудно достичь с любым из существующих структур.
Ознакомьтесь с приведенной ниже ленивой нагрузкой в действие:
Обратите внимание, что страница первой нагрузки без содержимого ниже сгиба; Как только пользователь прокручивается, содержимое заполняется. Это население в моменте момента, поскольку не существует сложного кода для выполнения. Просто быстро и просто innerhtml
Отказ
Попробуйте это
Опыт страницы для себя здесь: https://www.builder.io/?Render=qwik Отказ (И увидеть счет на PagesPeed ) Мы все еще не хватаем аналитики, но это скоро придет.
Как то, что вы видите? Наш план состоит в том, чтобы сделать Qwik доступным для каждого клиента Builder.io, чтобы их сайты были перегружены для скорости из коробки. Вы никогда не видели платформу, которая это быстро раньше.
Вы находите вышеупомянутые? Тогда Присоединяйтесь к нашей команде И помочь нам сделать веб быстро!
- Попробуйте это на Штабблиц
- Звезда нас на github.com/builderio/qwik.
- Следуйте за нами на @Qwikdev. и @builderio.
- Чат нас на Раздор
- Присоединяйтесь к builder.io
Оригинал: “https://dev.to/mhevery/how-to-score-100-on-google-pagespeed-insights-on-mobile-2e0i”