1. Modern Web Rehberi nedir?
Modern Web Rehberi, modern en iyi uygulamaları ve tarayıcı uyumluluğunu doğrudan kodlama aracılarınıza uygular. Bu beceriler, kodunuzun mevcut web platformu özellikleriyle uyumlu kalmasını sağlar. Modern Web Rehberi, yeni prototipler geliştirmekten eski sistemleri yeniden düzenlemeye kadar modern web standartlarına erişim sağlar.
Geliştiriciler bu özelliği kullanarak:
- Sağlam bir temel oluşturun: Birlikte çalışabilen web özelliklerini kullanan projeler başlatın.
- Eski kodu modernleştirin: Yaygın kullanıcı arayüzü kalıplarının özel uygulamalarını değiştirin.
- Geliştirirken öğrenin: Beceri, geliştirme sırasında bağlama duyarlı rehberlik sağladığı için modern web kalıpları hakkındaki bilginizi geliştirin.
Eski bir uygulamayı denetleyerek, bir Baseline hedef belirleyerek ve standart yapay zeka önerilerini Modern Web Rehberi kurallarıyla karşılaştırarak, eski veya genel model çıktılarına güvenmek yerine yüksek performanslı, modern web kodu oluşturmak için Modern Web Rehberi ile geliştirilmiş kodlama aracılarına istem girmeyi öğrenirsiniz.
2. Ön koşullar
Bu codelab'e başlamadan önce aşağıdaki bilgilere sahip olduğunuzdan emin olun:
- Modern Web Rehberi belgeleri ve aracıdan bağımsız yükleme
- Baseline ve Lighthouse hakkında temel bilgi
- İstem yazma hakkında temel bilgi
Bu kod laboratuvarında şunlar kullanılır:
- Modern Web Rehberi (v0.0.173)
- Antigravity CLI (Gemini 3.5 Flash ile v1.0.10)
Bu codelab, kasıtlı olarak eski koddan oluşan eski bir "Cozy Nook" uygulamasıyla başlar. Demo deposunu klonlayın ve cozy-nook-bookshop web uygulamasına gidin.
git clone git@github.com:GoogleChromeLabs.modern-web-guidance-demos.git
cd modern-web-guidance-demos/legacy-demos/cozy-nook-bookshop/
3. Temel hedefiniz belirleme
Baseline, tarayıcılarda hangi özelliklerin birlikte çalışabileceği hakkında bilgi sağlar. Ayrıca, tarayıcı motorlarını ve sürümlerini belirtmenizi gerektirmeden hangi tarayıcıları desteklemek istediğinizi ifade etmenize olanak tanır. Bir özelliğin birlikte çalışabilir olması durumunda bu özellik, temel özellik olarak kabul edilir.
Web uygulamanızı geliştirmeden önce temel hedef kitlenizi seçin. Varsayılan olarak modern-web-guidance, en az 30 aydır birlikte çalışabilen özellikleri içeren Baseline Widely available'ı kullanır. Daha yeni özellikleri desteklemeniz gerekiyorsa AGENTS.md dosyanıza uygun Baseline hedefi eklemeniz gerekir.
Bu codelab'de proje, baseline widely available on 2026-06-01 sabit hedefini kullanır.
// AGENTS.md
This project's Baseline target is "Baseline widely available on 2026-06-01".
4. Proje önceliklerini belirleme
Temel hedefiniz seçtikten sonra öncelikleri tanımlayın ve ilgili özellikleri ve konuları gruplandırın. Bir özellik oluştururken olduğu gibi, artımlı iyileştirme zihinsel modelini benimseyin.
Güncellemelerinizi belirli eski özelliklere veya daha geniş web geliştirme disiplinlerine göre kategorilere ayırın. Örneğin:
- Performans: Core Web Vitals'nizi optimize edin.
- Kullanıcı deneyimi: Etkileşimleri ve kullanılabilirliği iyileştirin.
- Erişilebilirlik: Uygulamanıza erişimi genişletmek için erişilebilirlik sorunlarını giderin.
- Formlar ve güvenlik: Giriş işlemeyi modernleştirin ve uygulamanızın veri giriş noktalarını güçlendirin.
Bu codelab'de, Modern Web Rehberi becerisinin hızını nasıl artırdığını görmek için eski kitapçı uygulamasının performansını karşılaştırmaya odaklanacaksınız. Temsilcinin yaptığı değişiklikleri izlemek ve sonucun proje hedeflerinizle uyumlu olduğundan emin olmak için her seferinde bir göreve odaklanın.
Başlamak için Lighthouse denetimi kullanarak kitapçı uygulamasının ilk durumundaki performansıyla ilgili net bir resim elde edin.
Yerel makinenizde Antigravity CLI'yı açın ve yeni bir oturum başlatın:
agy
Aşağıdakine benzer bir aracı çıkışı görmeniz gerekir.
● 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
Markdown dosyasını açtığımızda aşağıdaki sonuçları elde ederiz:
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 |
Uygulama, mobil cihazlardaki performans için 100 üzerinden 61 puan alıyor. Uygulamayı mobil cihazlar için optimize etme ve performans puanını artırmaya yönelik öneriler için modern-web-guidance sorgusunu kullanın.
5. Performansı artırmak için sorgu
Standart temel model tarafından oluşturulan öneriler ile modern-web-guidance etkin olduğunda üretilen öneriler arasındaki farkları değerlendirmek için temsilciden performans optimizasyonu önerileri isterken bir karşılaştırma testi yapın.
Öncelikle modern-web-guidance'yı yüklemeden temel modele sorgu göndererek ne tür mobil web performansı geliştirmeleri önerebileceğini görün.
Modelin neden önerdiğine dair gerekçelerle birlikte web özelliklerinin çıktısını gördüğünüzde başka bir terminal penceresinde modern-web-guidance komutunu çalıştırıp tüm varsayılanları kabul edin.
npx modern-web-guidance@latest install
Antigravity'ye dönün, yeni yüklenen beceriyi sorgulayın ve kendisini temel modelin önerdiği listeyle karşılaştırmasını isteyin.
● 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)
Aracı akıl yürütmeyi tamamladıktan sonra, modern-web-guidance becerisiyle ve becerisi olmadan modelin önerilerini gösteren bir karşılaştırmalı analiz sunar ve çakışan önerileri vurgular. Aşağıdaki çıkış, Gemini modelinin sürümüne ve mevcut modern-web-guidance sürümüne bağlıdır.
Yerel ortamlar farklılık gösterebileceğinden, GitHub deposunda bir sorun açarak Modern Web Rehberi ile ilgili özel sonuçlarınızı ve geri bildirimlerinizi paylaşın.
Aracının çıkışı aşağıdaki gibi olmalıdır:
### 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. |
Karşılaştırmaya daha yakından bakmak için aşağıdaki tabloya göz atın:
Optimizasyon alanı | Temel model önerisi | Modern Web Rehberi kuralı | Zorunlu kısıtlamalar ve tutarsızlıklar |
Geç yükleme ve getirme önceliği etkileşimi | Geç yükleme ve yüksek öncelikli öğelerin standart ayrımı. | Zorunlu: LCP resimlerinde | Kısıtlama: Ekranın alt kısmında yer alan ve geç yüklenen resimler, görüntü alanına girdiklerinde normal öncelikte yüklenmelidir. Düşük öncelik kesinlikle ekranın üst kısmında yer alan gizli içeriklere ayrılmıştır. |
Tahmine dayalı içerik | Genellikle sonraki sayfa öğelerini veya varlıklarını önceden yükler. | Yapılması gerekenler: Bir sonraki ziyaret etme olasılığınız olan sayfaları önceden getirmek veya önceden oluşturmak için Tahmin Kuralları API'sini (JSON tabanlı komut dosyası) kullanın. | Uyuşmazlık: Temel model, temel öğe ön yüklemelerini önerir. Rehberde modern spekülasyon kuralları (liste ve doküman kuralları) tanıtılmaktadır. |
Tahmine dayalı içerik yükleme kısıtlamaları | Standart spekülatif önceden getirme. | Tek sayfalık uygulamalarda (SPA'lar) spekülasyon kurallarını kullanmayın. Durum değişikliklerini tetikleyen URL'ler (örneğin, | Kısıtlama: Arka plandaki tarayıcı isteklerinin yanlışlıkla oturum veya işlem tetiklemesini önlemek için SPA yönlendiriciler ve durum değiştiren işlemler için spekülasyon kurallarını açıkça engeller. |
Ana iş parçacığı ve INP | Uzun süren görevleri bölme ve etkinlikleri kısıtlama | Yapılması gerekenler: 50 ms kuralını uygulayın: 50 ms'den uzun süren tüm komut dosyası yürütmeleri ana iş parçacığına bırakılmalıdır. | Kısıtlama: Yalnızca |
CSS içerik görünürlüğü | Standart stil sadeleştirme. | Yapılması gereken: Yalnızca büyük ve karmaşık sayfalardaki ekran dışı öğeler için | Kısıtlama: Ek yük ve atlama riskleri nedeniyle |
Tabloda, temel modelin performansı nasıl artıracağını anladığı ancak modern-web-guidance'nın bu geniş kapsamlı önerileri katı kurallara dönüştürdüğü gösteriliyor.
"Lazy loading & fetch priority interaction" (Geç yükleme ve getirme önceliği etkileşimi) bölümünde temel model, loading="lazy" özelliğinin iyi bir uygulama olduğunu kabul ediyor ancak beceri, önemli bir bilgi veriyor: fetchpriority="low" özelliğini asla loading="lazy" özelliğiyle birlikte kullanmayın. Bu zorunluluk, yapay zeka aracıyla kod yazarken işe yarar.
Temsilci, katı modern-web-guidance kurallarını anladıktan sonra, uygulamadaki farkı görmek için her iki yaklaşıma yönelik kodu taslak olarak hazırlamasını isteyin.
Ajanın önerdiği planları inceleyin:
▾ 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. Kılavuzlu ve kılavuzsuz uygulamaları karşılaştırma
Aşağıda, bu kitapçı uygulaması için Gemini ve modern-web-guidance ile yapılan karşılaştırma testinden elde edilen örnek aracı çıktıları yer almaktadır.
Sonuçlarınız farklı görünebilir. Bu nedenle, katı adımlar yerine bu stratejiyi kullanın. Bilgisayarınızda kitapçı uygulaması için modern-web-guidance'yı etkinleştirdiğinizde işlerin nasıl değiştiğini görmek için bu planları kullanın. Kendi karşılaştırma testlerinizi tamamladıktan sonra, temsilcinize belirli kurulumunuz için hangi yaklaşımın en iyi sonucu verdiğini sorun.
Güncellemeler yaparken gerçek dünyadaki iyileştirmeleri görmek için uygulamanızın performansını Lighthouse veya DevTools for Agents ile takip edebilirsiniz.
1. Geç yükleme ve getirme önceliği etkileşimi
Ana iş parçacığı bant genişliği çekişmesini önlemek için ekran dışındaki resimleri optimize edin.
A planı (temel model)
Tüm ekran dışı resimlere standart loading="lazy" uygulayın. (En iyi olmayan: Ekran dışı öğeleri geç yükleyin ancak görünür olan ve LCP'yi içermeyen katın üstü öğelerinin LCP resmiyle rekabet etmesine izin verin.)
<img src="https://..." alt="..." class="pick-small-img" loading="lazy">
Plan B (Modern Web Rehberi)
Başlangıçta görünür olmayan, katın üstü öğelerini fetchpriority="low" ile hedefleyin ve standart tembel yüklenen resimlerin varsayılan önceliklerde kalmasını sağlayın. (En iyi seçenek: Kaydırma ile yükleme sürelerini azaltmadan kritik oluşturma yolunu engelleyen gizli öğeleri düşürün.)
<img src="https://..." fetchpriority="low" width="96" height="144" alt="..." class="pick-small-img" loading="lazy">
2. Tahmine dayalı içerik
Sonraki sayfa dokümanlarını veya öğelerini önceden getirerek gelecekteki sayfa yükleme hızını artırın.
A planı (temel model)
Bu yaklaşımda öğeleri kullanılır. (Yetersiz: Alt sayfa geçişlerinde yaklaşık 1 saniyelik gecikme devam ediyor.)
<link rel="prefetch" href="about.html">
<link rel="prefetch" href="contact.html">
Plan B (Modern Web Rehberi)
Spekülasyon Kuralları API'sini kullanır. (En iyi seçenek: Tahmin Kuralları, algılanan gezinme süresini azaltmak için eşleşen sorgularla önceden getirme ve önceden oluşturma işlemleri yapmanıza olanak tanır.)
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
3. Tahmine dayalı içerik yükleme kısıtlamaları
Örneğin, /logout veya /basket.html gibi belirli sayfaların önceden getirilmesini açıkça engelleyerek güvenlik, performans veya durum çakışmalarını önleyin.
A planı (temel model)
Bu yaklaşım, geliştiricilerin hangi URL'lerin dahil edileceğini manuel olarak yönetmesini gerektirir. (Yetersiz: Bu yaklaşım, istenmeyen arka plan işlemlerinin daha yüksek güvenlik riski oluşturduğu için risklidir.)
Plan B (Modern Web Rehberi)
Bu yaklaşım, yönetimsel, durum bilgisi içeren veya alışveriş yollarını bildirimsel olarak hariç tutar. (En iyi seçenek: Programatik hariç tutmalar, tarayıcının istenmeyen arka plan işlemlerini yürütmesini engeller.)
<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. Ana iş parçacığı ve Interaction to Next Paint (INP)
Yüksek yanıt hızı sağlamak için kullanıcı girişinde ana iş parçacığı kullanılabilirliğine öncelik verin.
A planı (temel model):
Eşzamanlı geri çağırma döngülerini kullanarak yoğun hesaplamaları erteleyin. (En uygun değil: Sayfada yoğun bir ana iş parçacığı varsa yüksek bir Interaction to Next Paint (INP) değeriyle karşılaşabilirsiniz.)
function renderBigCatalog(items) {
items.forEach(item => {
renderItem(item);
});
}
B Planı (Modern Web Rehberi):
Ana iş parçacığının yanıt vermeye devam etmesi için scheduler.yield() kullanarak ana iş parçacığına geçin. (En iyi seçenek: scheduler.yield() yöntemi, görev açlığı olmadan girişlerin yanıt vermesini sağlar.)
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
Ekran dışı öğelerin oluşturma işlemlerini erteleyerek ekran dışı düzen hesaplamalarını yönetin.
A planı (temel model)
Stil sayfası paketlerini küçültün. (En iyi olmayan: İlk boyamada standart oluşturma ek yükü.)
.book-item {
display: flex;
margin: 1rem;
}
Plan B (Modern Web Rehberi)
Görüntü alanı sınırına yaklaşana kadar ekran dışındaki öğelerin boyanmasını atlayın. (En iyi seçenek: Büyük sayfalarda mobil oluşturma yükünü önler. modern-web-guidance aracı, content-visibility'nin yalnızca ekran dışı öğelere uygulanmasını sağlar ve bunu contain-intrinsic-size ile eşleştirir. Bu bağlam olmadan temel bir model, bunu genel olarak uygulayabilir ve bu da kaydırma sırasında önemli düzen kaymalarına neden olabilir.)
.book-item {
display: flex;
margin: 1rem;
content-visibility: auto;
contain-intrinsic-size: auto 350px;
}
7. Uygulama ve doğrulama
Farklılıkları analiz edip B Planı'nı optimize edilmiş yaklaşım olarak belirledikten sonra projeye uygulayabilirsiniz. Artık bu Modern Web Rehberi kurallarının gerçek dünyadaki Lighthouse puanınızı nasıl etkilediğini görebilirsiniz.
Aracı, yerleşik fetchpriority'yı uygular, Speculation Rules API'yi kurar ve mikro görev oluşturma işlevini ekler. Son Lighthouse raporu oluşturulduğunda mobil puan, başlangıçtaki 100 üzerinden 61 puandan yükselir.
Eski kodu resmen modernize ettiniz.
8. Önceliklere göre yineleme yapma
Bu yaklaşım, başvurunuzu değerlendirir modern-web-guidance ve modern web geliştirme en iyi uygulamalarına ne kadar uyduğunu değerlendirir. İlerledikçe farklı yapılandırmalarla denemeler yapın:
- Yeni özellik ekleme: Ekran alanını en üst düzeye çıkarmak için kaydırma sırasında gizlenen kayan bir başlık önerin.
- Farklı referans hedeflerle deneme yapma: Etkileri gözlemlemek için projedeki referans durumunu değiştirin.
- Belirli disiplinlere odaklanın ve farklı seçimlerin kod tabanınızı nasıl etkilediğini gözlemleyin.
Tekrar, büyük veya eski uygulamaların karmaşıklıklarında gezinmenize, hassaslaştırmanıza, test etmenize, oluşturmanıza ve tekrarlamanıza yardımcı olur.
9. Sonraki adımlar
Modern Web Rehberi'ni kullanma hakkında daha fazla bilgi için Modern Web Rehberi komutları dokümanları ve Temsilciler için Geliştirici Araçları sayfalarına bakın.
Modern Web Rehberi ile ilgili sorularınız veya geri bildirimleriniz varsa GitHub deposunda sorun bildirin.