1. Czym jest Przewodnik po współczesnych technologiach internetowych?
Przewodnik po współczesnych technologiach internetowych stosuje nowoczesne sprawdzone metody i zapewnia zgodność z przeglądarkami bezpośrednio w Twoich agentach kodowania. Dzięki tym umiejętnościom Twój kod pozostaje zgodny z aktualnymi możliwościami platformy internetowej. Przewodnik po współczesnych technologiach internetowych zapewnia dostęp do nowoczesnych standardów internetowych – od tworzenia nowych prototypów po refaktoryzację starszych systemów.
Deweloperzy mogą go używać do:
- budowania na solidnych podstawach: rozpoczynania projektów, które korzystają z interoperacyjnych funkcji internetowych;
- modernizowania starszego kodu: zastępowania niestandardowych implementacji typowych wzorców interfejsu użytkownika;
- uczenia się podczas tworzenia: poszerzania wiedzy o nowoczesnych wzorcach internetowych, ponieważ umiejętność ta zapewnia wskazówki uwzględniające kontekst podczas tworzenia.
Audytując starszą aplikację, ustawiając wartość docelową odniesienia i porównując standardowe sugestie AI z regułami Przewodnika po współczesnych technologiach internetowych, uczysz się, jak prosić agentów kodowania ulepszonych o Przewodnik po współczesnych technologiach internetowych o generowanie kodu internetowego o wysokiej wydajności zamiast polegać na przestarzałych lub ogólnych wynikach modelu.
2. Wymagania wstępne
Zanim zaczniesz to ćwiczenie, upewnij się, że masz następującą wiedzę:
- dokumentacja Przewodnika po współczesnych technologiach internetowych i instalacja niezależna od agenta
- podstawowa wiedza o wartości odniesienia i Lighthouse
- podstawowa wiedza o promptach.
To ćwiczenie korzysta z tych elementów:
- Przewodnik po współczesnych technologiach internetowych (wersja 0.0.173)
- Antigravity CLI (wersja 1.0.10 z Gemini 3.5 Flash).
To ćwiczenie zaczyna się od starszej aplikacji „Cozy Nook”, która celowo składa się ze starszego kodu. Skopiuj repozytorium demonstracyjne i przejdź do aplikacji internetowej cozy-nook-bookshop.
git clone git@github.com:GoogleChromeLabs.modern-web-guidance-demos.git
cd modern-web-guidance-demos/legacy-demos/cozy-nook-bookshop/
3. Ustaw wartość docelową odniesienia
Wartość odniesienia zawiera informacje o tym, które funkcje są obecnie interoperacyjne w przeglądarkach. Umożliwia też określenie, które przeglądarki chcesz obsługiwać, bez konieczności podawania silników i wersji przeglądarek. Funkcja jest uważana za wartość odniesienia, jeśli jest interoperacyjna.
Zanim zaczniesz tworzyć aplikację internetową, wybierz wartość docelową odniesienia. Domyślnie modern-web-guidance używa wartości odniesienia Powszechnie dostępna, która obejmuje funkcje interoperacyjne od co najmniej 30 miesięcy. Jeśli musisz obsługiwać nowsze funkcje, musisz uwzględnić odpowiednią wartość docelową odniesienia w pliku AGENTS.md.
W tym ćwiczeniu projekt używa stałej wartości docelowej baseline widely available on 2026-06-01.
// AGENTS.md
This project's Baseline target is "Baseline widely available on 2026-06-01".
4. Określ priorytety projektu
Po wybraniu wartości docelowej odniesienia określ priorytety i pogrupuj powiązane funkcje i tematy. Przyjmij model mentalny stopniowego ulepszania, tak jak w przypadku tworzenia funkcji.
Kategoryzuj aktualizacje na podstawie konkretnych przestarzałych funkcji lub szerszych dyscyplin tworzenia stron internetowych, na przykład:
- Skuteczność: zoptymalizuj Core Web Vitals.
- Wrażenia użytkownika: popraw interakcje i użyteczność.
- Ułatwienia dostępu: rozwiąż problemy z ułatwieniami dostępu, aby zwiększyć dostęp do aplikacji.
- Formularze i bezpieczeństwo: zmodernizuj obsługę danych wejściowych i wzmocnij punkty wprowadzania danych w aplikacji.
W tym ćwiczeniu skupisz się na porównaniu skuteczności starszej aplikacji księgarni bookshop app, aby zobaczyć, jak umiejętność Przewodnika po współczesnych technologiach internetowych poprawia jej szybkość. Skup się na jednym zadaniu naraz, aby monitorować zmiany wprowadzane przez agenta i upewnić się, że wynik jest zgodny z celami projektu.
Na początek przeprowadź audyt Lighthouse, aby uzyskać jasny obraz tego, jak działa aplikacja księgarni w stanie początkowym.
Otwórz Antigravity CLI na komputerze lokalnym i rozpocznij nową sesję:
agy
Powinny pojawić się dane wyjściowe agenta podobne do tych:
● Bash(ctrl+o to expand)
▸ Thought for 13s
This report will detail the desktop and mobile scores, provide a comparative metrics table, explain the root causes of the performance bottlenecks, and offer highly actionable recommendations based on modern web standards (e.g. Baseline Widely available on 2026-06-01 target).
● Create(lighthouse_audit_report.md) (ctrl+o to expand)
▸ Thought for 5s
Confirming Task Completion
I have successfully run the Lighthouse audits using npx lighthouse for both desktop and mobile viewports against a production build of the application.
The generated local reports have been saved in the project root:
• Mobile Reports: lighthouse-mobile.report.html and lighthouse-mobile.report.json
• Desktop Reports: lighthouse-desktop.report.html and lighthouse-desktop.report.json
I have compiled the audit scores, identified performance bottlenecks, and outlined a step-by-step key improvement action plan in the following artifact:
Open lighthouse_audit_report.md
Po otwarciu Markdowna uzyskujemy te wyniki:
Here is the complete Lighthouse audit report generated for the application:
**Lighthouse Audit Report: Cozy Nook Bookshop**
This report provides the Lighthouse audit scores, core web vitals performance
metrics, and key areas for improvement for The Legacy Cozy Nook in development mode.
**Summary Scores**
| Category | Mobile Score | Desktop Score |
|-----------------|--------------|---------------|
| Performance | 61 / 100 | 93 / 100 |
| Accessibility | 98 / 100 | 98 / 100 |
| Best Practices | 96 / 100 | 96 / 100 |
| SEO | 92 / 100 | 92 / 100 |
**⚡ Core Web Vitals & Key Metrics**
| Metric | Mobile Value | Desktop Value |
|-----------------|--------------|---------------|
| First Contentful Paint (FCP) | 2.9 s | 0.7 s |
| Largest Contentful Paint (LCP) | 4.8 s | 1.2 s |
| Total Blocking Time (TBT) | 0 ms | 0 ms |
| Cumulative Layout Shift (CLS) | 0.336 | 0.114 |
| Speed Index (SI) | 2.9 s | 0.7 s |
Aplikacja uzyskuje 61/100 punktów za skuteczność na urządzeniach mobilnych. Zapytaj modern-web-guidance o rekomendacje dotyczące optymalizacji aplikacji pod kątem urządzeń mobilnych i poprawy wyniku skuteczności.
5. Zapytanie o poprawę skuteczności
Aby ocenić różnice między rekomendacjami generowanymi przez standardowy model podstawowy a tymi, które są generowane, gdy aktywny jest modern-web-guidance, przeprowadź test porównawczy, prosząc agenta o sugestie dotyczące optymalizacji skuteczności.
Najpierw, bez instalowania modern-web-guidance, zapytaj model podstawowy, aby zobaczyć, jakie ulepszenia skuteczności w internecie mobilnym może on zalecić.
Gdy zobaczysz dane wyjściowe funkcji internetowych z uzasadnieniem, dlaczego model je zaleca, zainstaluj modern-web-guidance w innym oknie terminala i zaakceptuj wszystkie ustawienia domyślne.
npx modern-web-guidance@latest install
Wróć do Antigravity, zapytaj nowo zainstalowaną umiejętność i poproś ją o porównanie się z listą rekomendowaną przez model podstawowy.
● Bash(npx -y modern-web-guidance@latest search "performance")
⎿ [{"id":"performance","description":"Actionable guidelines for optimizing modern web applications. Use this guide when auditing performance, optimizing loading metrics, fixing slow interactions and optimizing Core Web Vitals (LCP, INP, CLS)","category":"performance","similarity":0.5569},
{"id":"efficient-background-processing","description":"Conserve system resources and battery life by pausing background JavaScript execution (such as `<canvas>` animations, WebGL rendering, or high-frequency WebSocket data polling) when the component is off-screen and then resume them just-in-time when they scroll back into view.","category":"performance","featuresUsed":["content-visibility"], "similarity":0.5066},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this
guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html", "similarity":0.4478},
{"id":"faster-spa-view-transitions","description":"Enable faster transitions back to previously visited views in a Single-Page Application (SPA) by preserving their structural DOM state instead of
destroying and rebuilding them on every navigation.","category":"performance","featuresUsed":["content-visibility"], "similarity":0.444},
{"id":"identify-heavy-scripts","description":"Identify the scripts most responsible for long animation frames","category":"performance","featuresUsed":["Long animation
frames"], "similarity":0.4287}] (ctrl+o to collapse)
● Bash(npx -y modern-web-guidance@latest search "image")
⎿ [{"id":"deliver-optimized-decorative-images","description":"Deliver optimized decorative images (such as backgrounds, UI icons, or complex masks) by simultaneously providing next-generation image formats
(like AVIF or WebP) alongside multiple pixel densities (like 1x and 2x) so the browser can dynamically negotiate the best combination of file size and visual quality for the user's device
capabilities.","category":"user-experience","featuresUsed":["image-set()"], "similarity":0.4038},
{"id":"performance","description":"Actionable guidelines for optimizing modern web applications. Use this guide when auditing performance, optimizing loading metrics, fixing slow interactions and
optimizing Core Web Vitals (LCP, INP, CLS)","category":"performance", "similarity":0.3761},
{"id":"visually-texture-content","description":"Apply realistic weathering and texture patterns to elements to give them an organic, aged, or physical material
appearance.","category":"user-experience","featuresUsed":["Masks"], "similarity":0.3716},
{"id":"resolution-optimized-pseudo-elements","description":"Use resolution-optimized images in CSS pseudo-elements (such as `::before` and `::after`) to reduce the number of DOM
nodes.","category":"performance","featuresUsed":["image-set()"], "similarity":0.3566},
{"id":"optimize-image-priority","description":"Optimize the loading priority of Largest Contentful Paint (LCP) candidate images and deprioritize non-critical images to reduce critical resource load
delays.","category":"performance","featuresUsed":["Fetch priority"],"similarity":0.32}] (ctrl+o to collapse)
● Bash(npx -y modern-web-guidance@latest retrieve "performance,optimize-image-priority")
⎿ <output +165 lines>
- **RECOMMENDED**: Avoid using `fetchpriority="auto"`. If you want the default priority, omit the attribute entirely to keep your HTML clean.
- **DO NOT** combine `fetchpriority="high"` with `loading="lazy"` for the LCP image.
- **DO NOT** use the deprecated `importance` attribute. It has been replaced by `fetchpriority` and is not supported by any browser.
## Fallback strategy
Baseline status for Fetch priority: Newly available. It's been Baseline since 2024-10-29.
Supported by: Chrome 103 (Jun 2022), Edge 103 (Jun 2022), Firefox 132 (Oct 2024), and Safari 17.2 (Dec 2023).
The `fetchpriority` attribute is a progressive enhancement for the `<img>` element. If a browser does not support it, the attribute is ignored, and the browser uses its default priority heuristics. (ctrl+o
to collapse)
Gdy agent zakończy rozumowanie, przedstawi analizę porównawczą, która pokazuje rekomendacje modelu z umiejętnością modern-web-guidance i bez niej oraz wyróżnia nakładające się sugestie. Te dane wyjściowe zależą od wersji modelu Gemini i aktualnej wersji modern-web-guidance.
Ponieważ środowiska lokalne mogą się różnić, podziel się konkretnymi wynikami i opiniami na temat Przewodnika po współczesnych technologiach internetowych, otwierając zgłoszenie w repozytorium GitHub.
Dane wyjściowe agenta powinny być podobne do tych:
### 1. Base Model Knowledge Recommendations (Internal Training Only)
Based purely on standard web development practices, the following steps are recommended to improve the application's mobile performance score:
• Hero Image Optimization: Move the dynamic Javascript-loaded hero image into the source HTML file ( index.html ) so the browser preload scanner can fetch it immediately. Add fetchpriority="high" and serve the image in modern WebP
or AVIF formats.
• Layout Stability (CLS): Provide explicit width and height dimensions in HTML image elements so the browser can calculate the layout box size before the image has finished loading.
• Payload Compression: Minify JS and CSS bundles and compress images to reduce the 6.1 MB payload.
• Resource Optimization: Defer non-critical scripts and lazy-load offscreen/below-the-fold images.
──────
### 2. Fetched Modern Web Guidance Guides
The following official performance guides were successfully fetched and inspected from the repository's local skills folder:
1. optimize-image-priority.md
2. improve-next-page-load-performance.md
3. performance.md
──────
### 3. Comparison & Key Constraints Comparison
Below is the side-by-side comparison of the base model recommendations against the fetched performance guidelines:
| Optimization Area | Base Model Recommendation | Modern Web Guidance Rule | Mandatory Constraints & Discrepancies |
|---|---|---|---|
| Lazy Loading & Fetch Priority Interaction | Standard separation of lazy-load and high priority. | MANDATORY: Do not combine fetchpriority="high" with loading="lazy" on LCP images, and do not use fetchpriority="low" on standard below-the-fold lazy-loaded images. | Constraint: Below-the-fold lazy-loaded images must load at normal priority when they enter the viewport; low priority is reserved strictly for hidden above-the-fold content. |
| Speculative Loading | Preload the next page elements or assets generally. | DO: Use the Speculation Rules API (JSON-based script) to prefetch or prerender pages the user will likely visit next. | Discrepancy: The base model recommends traditional asset preloads. The guide introduces modern speculation rules (list and document rules). |
| Speculative Loading Restrictions | Standard speculative prefetching. | DO NOT use speculation rules on Single Page Applications (SPAs). DO NOT speculate URLs that trigger state changes (e.g., /logout , /add-to-cart ). | Constraint: Explicitly blocks speculation rules for SPA routers and state-changing actions to prevent unintentional sessions/actions from being triggered by background browser requests. |
| Main Thread & INP | Break up long tasks and throttle events. | DO: Implement the 50ms rule: any script execution > 50ms must yield to the main thread. Use scheduler.yield() with a Promise fallback. | Constraint: Explicitly forbids relying only on setTimeout(..., 0) because it places continuations at the back of the queue, potentially starving user input. |
| CSS Content Visibility | Standard style minification. | DO: Pair content-visibility: auto with contain-intrinsic-size for offscreen elements on large, complex pages only. | Constraint: Forbids using content-visibility: auto on simple/small pages or above-the-fold content due to overhead and jumping risks. |
Więcej informacji o porównaniu znajdziesz w tej tabeli:
Obszar optymalizacji | Rekomendacja modelu podstawowego | Reguła Przewodnika po współczesnych technologiach internetowych | Obowiązkowe ograniczenia i rozbieżności |
Leniwe ładowanie i interakcja z priorytetem pobierania | Standardowe rozdzielenie leniwego ładowania i wysokiego priorytetu. | Obowiązkowe: nie łącz | Ograniczenie: obrazy leniwie ładowane poniżej widocznego obszaru muszą być ładowane z normalnym priorytetem, gdy pojawią się w widocznym obszarze. Niski priorytet jest zarezerwowany wyłącznie dla ukrytych treści powyżej widocznego obszaru. |
Ładowanie spekulacyjne | Wstępnie wczytaj elementy lub zasoby następnej strony. | Zrób to: użyj interfejsu Speculation Rules API (skryptu opartego na JSON), aby wstępnie pobrać lub wstępnie wyrenderować strony, które prawdopodobnie odwiedzisz w następnej kolejności. | Rozbieżność: model podstawowy zaleca podstawowe wstępne wczytywanie zasobów. Przewodnik wprowadza nowoczesne reguły spekulacji (reguły listy i dokumentu). |
Ograniczenia ładowania spekulacyjnego | Standardowe wstępne pobieranie spekulacyjne. | Nie używaj reguł spekulacji w aplikacjach jednostronicowych (SPA). Nie spekuluj adresów URL, które powodują zmiany stanu (np. | Ograniczenie: wyraźnie blokuje reguły spekulacji dla routerów SPA i działań zmieniających stan, aby zapobiec przypadkowemu wywołaniu sesji lub działań przez żądania przeglądarki w tle. |
Wątek główny i INP | Dziel długie zadania i ograniczaj zdarzenia. | Zrób to: zaimplementuj regułę 50 ms: każde wykonanie skryptu dłuższe niż 50 ms musi ustąpić wątkowi głównemu. Użyj | Ograniczenie: wyraźnie zabrania polegania tylko na |
Widoczność treści CSS | Standardowa minifikacja stylu. | Zrób to: połącz | Ograniczenie: zabrania używania |
Tabela pokazuje, że model podstawowy wie, jak zwiększyć skuteczność, ale modern-web-guidance przekształca te ogólne rekomendacje w ścisłe reguły.
W sekcji „Leniwe ładowanie i interakcja z priorytetem pobierania” model podstawowy rozpoznaje, że loading="lazy" to dobra praktyka, ale umiejętność ta zawiera kluczowe informacje: nigdy nie łącz fetchpriority="low" z atrybutem loading="lazy". To egzekwowanie jest przydatne podczas kodowania za pomocą agentów AI.
Gdy agent zrozumie ścisłe reguły modern-web-guidance, poproś go o przygotowanie kodu dla obu podejść, aby zobaczyć różnicę w implementacji.
Sprawdź plany rekomendowane przez agenta:
▾ Thought for 2s
Formulating Mobile Optimization Plans
Okay, I'm currently focused on crafting two mobile optimization plans as
requested. I'm structuring them specifically for both a base model and one
leveraging modern-web-guidance. I'm adding sources and baselines to each for
comparison. My goal is to present these plans to you for review before any
implementation begins. I'm trying to make sure I get this exactly right.
...
● ListDir(modern-web-guidance-demos/legacy-demos/cozy-nook-bookshop/static/assets)
⎿ 8 files, 0 directories (ctrl+o to collapse)
Below are two implementation plans to optimize the mobile performance of The
Cozy Nook to a 90+ score.
──────
### Plan A: Base Model Only (Traditional Web Performance)
This plan uses classic web performance optimization patterns based on general
knowledge from standard MDN/web.dev documentation.
#### Proposed Changes
1. LCP Hero Image HTML Declaration:
• Modify index.html to include the static hero image source directly:
<img src="./assets/hero-img.png" alt="Old Books stack on wooden table" class="hero-img">
• Remove the dynamic JS source injection in hero.js to prevent JS execution delay blocking the render.
2. Critical Preload Link:
• Add a preload link in the <head> of index.html to prioritize the asset request:
<link rel="preload" as="image" href="./assets/hero-img.png">
3. Cumulative Layout Shift (CLS) Fixes:
• Add explicit width and height dimensions to all static image elements in index.html (e.g., hero, staff picks, avatars).
#### Sources & References
• Preloading Assets: MDN Web Docs - Preloading Content https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload
• CLS Prevention: web.dev - Optimize Cumulative Layout Shift https://web.dev/articles/cls
### Plan B: Modern Web Guidance (Recommended)
This plan strictly follows Google Chrome's modern guidelines, progressive
enhancements, and rules. It minimizes resource contention and leverages native
speculation tools.
#### Proposed Changes
1. HTML Declaration with Native Fetch Priority:
• Modify index.html to load the hero image inline and declare priority:
<img src="./assets/hero-img.png" fetchpriority="high" alt="Old Books stack on wooden table" class="hero-img">
• Constraint Met: Do not add a duplicate <link rel="preload">. Modern web
guidance mandates letting the browser's preload scanner natively discover
the raw HTML image tag. Adding a separate preload resource block causes
unnecessary network overhead.
• Remove the dynamic source loading in hero.js.
2. Explicit Layout Boundaries (CLS):
• Set physical width and height attributes matching the design aspect
ratio directly on the hero, pick covers, and avatar elements inside
index.html.
3. Speculative MPA Navigation (Next-page optimization):
• Since this is a Multi-Page Application (MPA), embed a Speculation Rules
script block in the bottom of index.html to prefetch same-origin routes
(about.html, contact.html, details.html) with moderate eagerness with
script type "speculationrules" with the following content.
{
"prefetch": [{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/basket.html" } }
]
},
"eagerness": "moderate"
}]
}
• Constraint Met: We explicitly exclude shopping checkout items like
basket.html from prefetching to avoid unnecessary/accidental request
triggers.
#### Sources & References
• optimize-image-priority.md
• improve-next-page-load-performance.md
• performance.md
6. Porównaj implementacje bez wskazówek i z wskazówkami
Poniżej znajdziesz przykładowe dane wyjściowe agenta z testów porównawczych z Gemini i modern-web-guidance dla tej aplikacji księgarni.
Twoje wyniki mogą się różnić, dlatego stosuj tę strategię zamiast sztywnych kroków. Użyj tych planów, aby zobaczyć, jak zmieni się sytuacja, gdy włączysz modern-web-guidance w aplikacji księgarni na komputerze. Po zakończeniu własnych testów porównawczych zapytaj agenta, które podejście najlepiej sprawdzi się w Twojej konfiguracji.
Możesz śledzić skuteczność aplikacji za pomocą Lighthouse lub Narzędzi deweloperskich dla agentów, aby zobaczyć rzeczywiste ulepszenia podczas wprowadzania aktualizacji.
1. Leniwe ładowanie i interakcja z priorytetem pobierania
Zoptymalizuj obrazy poza ekranem, aby uniknąć konfliktu przepustowości wątku głównego.
Plan A (model podstawowy)
Zastosuj standardowe loading="lazy" do wszystkich obrazów poza ekranem. (Nieoptymalne: leniwie ładuj zasoby poza ekranem, ale pozwól widocznym zasobom powyżej widocznego obszaru, które nie są LCP, konkurować z obrazem LCP).
<img src="https://..." alt="..." class="pick-small-img" loading="lazy">
Plan B (Przewodnik po współczesnych technologiach internetowych)
Ustaw fetchpriority="low" dla początkowo niewidocznych elementów powyżej widocznego obszaru i upewnij się, że standardowe obrazy leniwie ładowane zachowują domyślne priorytety. (Najlepsza opcja: obniż priorytet ukrytych zasobów, które blokują krytyczną ścieżkę renderowania, bez zmniejszania czasu ładowania podczas przewijania).
<img src="https://..." fetchpriority="low" width="96" height="144" alt="..." class="pick-small-img" loading="lazy">
2. Ładowanie spekulacyjne
Przyspiesz przyszłe ładowanie stron, wstępnie pobierając dokumenty lub zasoby następnej strony.
Plan A (model podstawowy)
To podejście używa elementów. (Nieoptymalne: przejścia podstron nadal mają około 1-sekundowe opóźnienie).
<link rel="prefetch" href="about.html">
<link rel="prefetch" href="contact.html">
Plan B (Przewodnik po współczesnych technologiach internetowych)
Używa interfejsu Speculation Rules API. (Najlepsza opcja: reguły spekulacji umożliwiają wstępne pobieranie i wstępne renderowanie za pomocą pasujących zapytań, aby skrócić postrzegany czas nawigacji).
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
3. Ograniczenia ładowania spekulacyjnego
Zapobiegaj konfliktom związanym z bezpieczeństwem, skutecznością lub stanem, wyraźnie blokując wstępne pobieranie niektórych stron, np. /logout lub /basket.html.
Plan A (model podstawowy)
To podejście wymaga od deweloperów ręcznego zarządzania adresami URL, które mają być uwzględniane. (Nieoptymalne: to podejście jest ryzykowne, ponieważ zwiększa ryzyko związane z bezpieczeństwem przypadkowych działań w tle).
Plan B (Przewodnik po współczesnych technologiach internetowych)
To podejście deklaratywnie wyklucza ścieżki administracyjne, stanowe lub związane z zakupami. (Najlepsza opcja: wykluczenia programowe uniemożliwiają przeglądarce wykonywanie niezamierzonych działań w tle).
<script type="speculationrules">
{
"prefetch": [{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/wp-admin/*" } },
{ "not": { "href_matches": "/basket.html" } },
{ "not": { "selector_matches": ".do-not-prerender" } }
]
},
"eagerness": "moderate"
}]
}
</script>
4. Wątek główny i interakcja do kolejnego wyrenderowania (INP)
Nadaj priorytet dostępności wątku głównego dla danych wejściowych użytkownika, aby zachować wysoką responsywność.
Plan A (model podstawowy):
Odłóż złożone obliczenia za pomocą synchronicznych pętli wywołań zwrotnych. (Nieoptymalne: jeśli strona ma zajęty wątek główny, możesz zauważyć wysoką interakcję do kolejnego wyrenderowania (INP)).
function renderBigCatalog(items) {
items.forEach(item => {
renderItem(item);
});
}
Plan B (Przewodnik po współczesnych technologiach internetowych):
Aby wątek główny był responsywny, użyj scheduler.yield(), aby ustąpić wątkowi głównemu. (Najlepsza opcja: metoda scheduler.yield() pomaga zachować responsywność danych wejściowych bez braku zadań).
async function yieldToMain() {
if ('scheduler' in window && 'yield' in scheduler) {
return await scheduler.yield();
}
return new Promise(resolve => setTimeout(resolve, 0));
}
async function renderBigCatalog(items) {
for (let i = 0; i < items.length; i++) {
renderItem(items[i]);
if (i % 50 === 0) {
await yieldToMain();
}
}
}
5. CSS content-visibility
Zarządzaj obliczeniami układu poza ekranem, odkładając operacje renderowania elementów poza ekranem.
Plan A (model podstawowy)
Zminimalizuj pakiety arkuszy stylów. (Nieoptymalne: standardowe obciążenie renderowania podczas pierwszego wyrenderowania).
.book-item {
display: flex;
margin: 1rem;
}
Plan B (Przewodnik po współczesnych technologiach internetowych)
Pomiń renderowanie elementów poza ekranem, dopóki nie zbliżą się do granicy widocznego obszaru. (Najlepsza opcja: zapobiega obciążeniu renderowania na urządzeniach mobilnych na dużych stronach. Narzędzie modern-web-guidance zapewnia, że content-visibility jest stosowane tylko do elementów poza ekranem i łączy je z contain-intrinsic-size. Bez tego kontekstu model podstawowy może stosować go globalnie, co może powodować znaczne przesunięcia układu podczas przewijania).
.book-item {
display: flex;
margin: 1rem;
content-visibility: auto;
contain-intrinsic-size: auto 350px;
}
7. Wdrażanie i weryfikacja
Po przeanalizowaniu różnic i stwierdzeniu, że Plan B jest zoptymalizowanym podejściem, możesz zastosować go w projekcie. Możesz teraz zobaczyć, jak te reguły Przewodnika po współczesnych technologiach internetowych wpływają na rzeczywisty wynik Lighthouse.
Agent stosuje wbudowany fetchpriority, konfiguruje interfejs Speculation Rules API i dodaje mikrotaski. Gdy zostanie wygenerowany końcowy raport Lighthouse, wynik na urządzeniach mobilnych wzrośnie z początkowych 61 na 100.
Starszy kod został oficjalnie zmodernizowany.
8. Iteracja względem priorytetów
To podejście ocenia aplikację po zastosowaniu modern-web-guidance i sprawdza, jak jest ona zgodna z nowoczesnymi sprawdzonymi metodami tworzenia stron internetowych. W miarę postępów eksperymentuj z różnymi konfiguracjami:
- Dodaj nową funkcję: zarekomenduj pływający nagłówek, który ukrywa się podczas przewijania, aby zmaksymalizować miejsce na ekranie.
- Eksperymentuj z różnymi wartościami docelowymi odniesienia: zmień stan wartości odniesienia w projekcie, aby zobaczyć efekty.
- Skup się na konkretnych dyscyplinach i obserwuj, jak różne wybory wpływają na bazę kodu.
Iteracja pomaga radzić sobie ze złożonością dużych lub starszych aplikacji. Ulepszaj, testuj, twórz i powtarzaj.
9. Dalsze kroki
Więcej informacji o korzystaniu z Przewodnika po współczesnych technologiach internetowych znajdziesz w dokumentacji poleceń Przewodnika po współczesnych technologiach internetowych i Narzędzi deweloperskich dla agentów.
Jeśli masz pytania lub opinie na temat Przewodnika po współczesnych technologiach internetowych, zgłoś problem w repozytorium GitHub.