Makaleler
Uzun görevleri optimize edin
Size "ana ileti dizisini engellememeniz" ve "uzun görevleri bölmeniz" söylendi, ama bunları yapmak ne anlama geliyor?
Ödeme yöntemi ayarlama
Web Payments'ı kullanan bir ödeme işlemi, ödeme uygulamanızın bulunmasıyla başlar. Ödeme yönteminin nasıl oluşturulacağını ve satıcıların ve müşterilerin ödeme yapması için ödeme uygulamanızı nasıl hazırlayacağınızı öğrenin.
Modülleri önceden yükleyin
Modül önceden yükleme, JavaScript modüllerini önceden bildirimli şekilde yükleme yöntemi sunar.
Formlarınızda tarayıcı otomatik doldurma özelliğini ölçme
Kullanıcı deneyimini optimize etmek için kullanıcıların formlarınızla nasıl etkileşimde bulunduğunu anlamanız gerekir. Tarayıcı otomatik doldurma özelliği bu süreçte önemli bir rol oynar. Kullanıcıların formlarınızda otomatik doldurma özelliğini nasıl kullandığıyla ilgili verileri nasıl toplayacağınızı ve analiz edeceğinizi öğrenin.
1. Bölüm: Online toksisiteyle mücadele için istemci tarafı yapay zeka
"Kullanıcılarınızı koruyun ve toksisite algılama özelliğiyle daha güvenli bir online ortam oluşturun. Birinci bölümde, toksisiteyi kaynağından (kullanıcı klavyeleri) azaltmak için yapay zekayı dağıtmak üzere ihtiyaç duyduğunuz bağlamı paylaşıyoruz."
2. Bölüm: İstemci tarafında yapay zeka ile toksisite algılama özelliği oluşturma
Toksik içerik algılama, kullanıcılarınızı korur ve daha güvenli bir internet ortamı oluşturur. İkinci bölümde, toksisiteyi kaynağından tespit edip azaltmak için istemci tarafı bir yapay zeka aracının nasıl oluşturulacağını öğreniyoruz.
Toplam Engelleme Süresi (TBT)
Bu yayında Toplam Engelleme Süresi (TBT) metriği ve bu metriğin nasıl ölçüleceği açıklanmaktadır.
Core Web Vitals'ı iyileştirmenin en etkili yolları
Chrome'un, web performansını optimize etmek ve Core Web Vitals'ı iyileştirmek için en büyük fırsatlar olarak tanımladığı en iyi uygulamalar koleksiyonu
Web Verileri'ni ölçmeye başlama
Sitenizin Web Verileri'ni hem gerçek dünyada hem de laboratuvar ortamlarında nasıl ölçeceğinizi öğrenin.
Largest Contentful Paint'i Optimize Edin
LCP'nin nasıl ayrıntılandırılacağı ve iyileştirilebilecek temel alanların nasıl belirleneceğiyle ilgili adım adım açıklamalı kılavuz.
Web Vitals
Sağlıklı bir site için temel metrikler
LLM özelliğini özetlemeyle karşılaştırma
Değerlendirme tekniği olarak LLM ile farklı model ve istemlerin sonuçlarını değerlendirin. Model doğrulaması, gerçek kişilere bırakılmak yerine başka bir LLM'ye devredilir.
CSS içerik görünürlüğü özelliği artık "Referans Yeni kullanılabilir" olarak değiştirildi
CSS içerik görünürlüğü özelliği artık "Temel Yeni kullanılabilir" olarak değiştirildi.
Core Web Vitals metrik eşiklerinin tanımlanma şekli
Önemli Web Verileri eşiklerinin arkasındaki araştırma ve metodoloji
Laboratuvardaki yavaş etkileşimleri manuel olarak teşhis etme
Alan verilerinizi incelediğinizde bazı yavaş etkileşimlerinizin olduğunu fark ettiniz. Sonraki adım, bu etkileşimlerin manuel olarak nasıl test edileceği hakkında daha fazla bilgi edinmek ve bunların nedenlerini belirlemektir.
Google araçlarıyla Önemli Web Verileri iş akışları
Core Web Vitals'ın öneminin giderek artmasıyla site sahipleri ve geliştiriciler performansa ve önemli kullanıcı deneyimlerine gittikçe daha fazla odaklanıyor. Google, sayfaları değerlendirmenize, optimize etmenize ve izlemenize yardımcı olacak birçok araç sağlar ancak farklı veri kaynakları ve bunları etkili bir şekilde kullanma konusunda kullanıcıların kafası sıkılır. Bu kılavuzda çeşitli araçların bir arada bulunduğu bir iş akışı önerilmiş ve geliştirme sürecinde bu araçların nerede ve nasıl anlamlı olduğu açıklığa kavuşturulmuştur.
Referans değer
Bu makalede Baseline'ın kuruluş hikayesi, Google'ın dahil olma hikayesi ve WebDX Topluluk Grubu'nun sahipliği açıklanmaktadır.
Geri-ileri önbellek
Tarayıcının geri ve ileri düğmelerini kullanırken sayfalarınızı hızlı yüklemeler için nasıl optimize edeceğinizi öğrenin.
CSS iç içe yerleştirme, CSSNestedDeclarations ile iyileştirildi
CSS iç içe yerleştirme çok daha iyi hale geliyor.
First Input Delay (FID)
Bu yayında, First Input Delay (FID) metriği tanıtılmakta ve bu metriğin nasıl ölçüleceği açıklanmaktadır.
Sahadaki performansta hata ayıklama
Analizlerle gerçek kullanıcı sorunlarını tanımlayıp düzeltmenize yardımcı olması için performans verilerinizi hata ayıklama bilgileriyle nasıl ilişkilendireceğinizi öğrenin
CSS @property özelliğinin performansını karşılaştırma
@propertyin CSS'nizin performansı üzerinde nasıl bir etkisi vardır?
İstemci tarafı yapay zeka için performansı ve kullanıcı deneyimini iyileştirin
Düşük gecikme süresi, azaltılmış sunucu tarafı maliyetleri, API anahtarı gerekmemesi, artan kullanıcı gizliliği ve çevrimdışı erişim gibi istemci tarafı yapay zekanın avantajlarını keşfedin.
Core Web Vitals ile reklam gelirini Google araçlarıyla ilişkilendirme
Core Web Vitals'ınızı reklam geliriyle ilişkilendirmeye yardımcı olmak için Google araçlarını nasıl kullanabileceğinizi öğrenin.
Ekran dışı iframe'leri geç yüklemenin zamanı geldi!
Bu yayında, yükleme özelliği ve iframe'lerin yüklenmesini kontrol etmek için bu özelliğin nasıl kullanılacağı ele alınmaktadır.
Web için depolama alanı
Tarayıcıda veri depolamak için birçok farklı seçenek vardır. İhtiyaçlarınıza en uygun seçenek hangisi?
Aynı alanda birden fazla progresif web uygulaması oluşturma
Aynı alanı yeniden kullanan birden fazla PWA oluşturmanın, artı ve eksileriyle birlikte önerilen ve önerilmeyen yöntemlerine göz atın.
Web Push Protokolü
Push bildirimi aboneliklerini yöneten ve web push protokolü isteklerini bir push hizmetine gönderen sunucu oluşturmayı gösteren adım adım etkileşimli bir eğitim.
Chrome, web uygulaması manifest dosyasında yapılan güncellemeleri nasıl işler?
PWA'nız için web uygulamanızın manifest dosyasındaki simgeleri, kısayolları, renkleri ve diğer meta verileri değiştirmek için gerekenler.
Yüklenebilir olmak için ne gerekir?
Progresif Web Uygulaması yüklenebilirlik ölçütleri.
İyi bir progresif web uygulaması olmak için neler gerekir?
Bir Progresif Web Uygulaması'nı iyi veya mükemmel yapan nedir?
Web uygulaması manifest dosyası ekle
Web uygulaması manifest dosyası, tarayıcıya web uygulamanızın nasıl davranması gerektiğini bildiren basit bir JSON dosyasıdır.
Katı İçerik Güvenliği Politikası (İGP) ile siteler arası komut dosyası kullanımını (XSS) azaltın
Siteler arası komut dosyası çalıştırmaya karşı derinlemesine savunma olarak komut dosyası tek seferlik rastgele sayısına veya karma değerlerine dayalı CSP dağıtmayı öğrenin.
Web'deki donanım cihazlarına erişme
Bu makale, web geliştiricilerinin belirli bir cihaza göre doğru donanım API'sini seçmesine yardımcı olur.
İlgili kaynak istekleri ile sitelerinizde geçiş anahtarının yeniden kullanılmasına izin verin
Geçiş anahtarının siteleriniz genelinde yeniden kullanılmasına izin vermek için İlgili Kaynak İstekleri'ni nasıl kullanacağınızı öğrenin.
Doğru resim biçimini seçin
Doğru resim biçimini seçmek, web sitenizde optimize edilmiş resimler yayınlamanın ilk adımıdır. Bu yayın doğru seçimi yapmanıza yardımcı olur.
Web için tarayıcı düzeyinde resim geç yükleme
Bu yayında, yükleme özelliği ve bu özelliğin resimlerin yüklenmesini kontrol etmek için nasıl kullanılabileceği ele alınmaktadır.
Özel metrikler
Özel metrikler, site deneyiminizin sitenize özgü yönlerini ölçmenizi ve optimize etmenizi sağlar.
Google Analytics 4 ve BigQuery ile performansı ölçme ve hata ayıklama
Web Verileri verilerini Google Analytics 4 mülklerine göndermeyi ve verileri BigQuery ve Looker Studio'da analiz için dışa aktarmayı öğrenin.
Web izinleriyle ilgili en iyi uygulamalar
Bu rehberde, gereksiz istemleri ve erişimi engellemek için kullanıcılardan hassas özelliklere (ör. kamera, mikrofon ve konum) erişim izni isterken web sitelerinin izlemesi gereken en iyi uygulamalar yer almaktadır.
Çerez bildirimleri için en iyi uygulamalar
Çerez bildirimlerinin performansı, performans ölçümünü ve kullanıcı deneyimini nasıl etkilediği hakkında bilgi edinin.
Media Session API'si ile medya bildirimlerini ve oynatma kontrollerini özelleştirme
Web geliştiricileri, Media Session API'yi kullanarak medya bildirimlerini özelleştirebilir ve değişiklikleri arama veya izleme gibi medyayla ilgili etkinliklere yanıt verebilir.
Sekme dizinini kullanma
Bir öğenin sekme konumunu açıkça ayarlamak için tabindex özelliğini kullanın.
Alandaki yavaş etkileşimleri bulma
Web sitenizin Sonraki Boyamayla Etkileşimini optimize etmek üzere laboratuvardaki yavaş etkileşimleri yeniden oluşturmadan önce, bu etkileşimleri bulmak için alan verilerine odaklanmanız gerekir. Bunu nasıl yapacağınızı bu kılavuzdan öğrenebilirsiniz.
İlk Bayt Zamanı (TTFB)
Bu gönderide, İlk Bayt Zamanı (TTFB) metriği tanıtılmakta ve nasıl ölçüleceği açıklanmaktadır.
Daha küçük LLM'ler için pratik hızlı mühendislik
Farklı LLM'ler, modeller ve model boyutlarında tercih ettiğiniz sonuçları elde etmek için istemlerinizi nasıl düzenleyeceğinizi öğrenin.
İlk Bayt Zamanı Optimizasyonu
Time to First Byte metriği için nasıl optimizasyon yapacağınızı öğrenin.
Sonraki boyamayla etkileşim (INP)
Bu yayında, Sonraki Boyamayla Etkileşim (INP) metriği tanıtılıyor, işleyiş şekli, nasıl ölçüleceği açıklanıyor ve iyileştirilmesine dair öneriler sunuluyor.
Light-dark() ile CSS renk şemasına bağlı renkler
description: Light-dark() işleviyle, kullanılan renk şemasına tepki veren renkleri tanımlayın.
Web uygulamaları için WebAssembly performans kalıpları
WebAssembly'den yararlanmak isteyen web geliştiricilerini hedefleyen bu kılavuzda, çalışan bir örnek yardımıyla CPU yoğun görevlerde dış kaynak kullanımı için Wasm'dan nasıl yararlanacağınızı öğreneceksiniz.
CSS animasyonlu ızgara düzenleri
CSS ızgarasında "grid-template-columns" ve "grid-template-rows" özellikleri, sırasıyla satır adlarını tanımlamanıza ve ızgara sütunları ile satırlarının boyutlarını izlemenize olanak tanır. Bu özelliklerin interpolasyonunun desteklenmesi, ızgara düzenlerinin bir animasyonun veya geçişin orta noktasına tutturmak yerine durumlar arasında sorunsuz bir şekilde geçiş yapmasını sağlar.
Oyun kumandanızla Chrome dinozor oyununu oynayın
Web oyunlarını Gamepad API ile kontrol etmeyi öğrenin.
Inert özelliği
Etkin olmayan özellik, bir öğeye ait kullanıcı girişi etkinliklerini (odak etkinlikleri ve yardımcı teknolojilerden etkinlikler dahil) kaldırma ve geri yükleme işlemini basitleştiren genel bir HTML özelliğidir.
Yapay Zeka nedir?
Yapay zeka (AI) alanını oluşturan çeşitli teknoloji türlerini temsil etmek için genellikle birbirinin yerine kullanılır.
Site aramanızı bir üst seviyeye taşıyın: Üretken yapay zeka ile içeriğe dayalı yanıtlar
Yapay zeka araçlarını kullanırken ve yeni içerikler üretirken dikkate alınması gereken birçok etik nokta vardır.
Web.dev AI Ekibi ile tanışın
Teknoloji yazarları ve geliştirici ilişkileri ekibiyle tanışın.
Etik ve yapay zeka
Yapay zeka araçlarını kullanırken ve yeni içerikler üretirken dikkate alınması gereken birçok etik nokta vardır.
AAGUID ile geçiş anahtarı sağlayıcısını belirleme
Bağlı taraflar, AAGUID'yi inceleyerek geçiş anahtarının nereden geldiğini belirleyebilir. İşleyiş şeklini öğrenin.
Binaryen ile Wasm için derleme ve optimize etme
ExampleScript adlı sentetik oyuncak dili örneğini kullanarak Binaryen.js API'sini kullanarak JavaScript'te WebAssembly modüllerini yazmayı ve optimize etmeyi öğrenin.
HTML5 ile ses ve video yakalama
Ses/video yakalama, uzun zamandır web geliştirmenin en "kutsal kâsesi" olmuştur. Bu işi yapmak için yıllardır tarayıcı eklentilerine ( Flash veya Silverlight ) güvenmek zorunda kaldık. Hadi! HTML5'in yardımına ihtiyacınız var. Bu durum açıkça
<Model-viewer> web bileşeni
<model-viewer> web bileşeni, bir web sayfasındaki 3D modelleri bildirimli şekilde kullanmanıza olanak tanır.
kullanıcıDoğrulama ile ilgili ayrıntılı inceleme
WebAuthn'da "user Verification"ı nasıl kullanacağınızı öğrenin
CrUX verileri neden RUM verilerimden farklı?
RUM verilerinin neden CrUX'ten farklı Önemli Web Verileri sayıları gösterebileceğini öğrenin.
Web geliştiricileri için erişilebilirlik
Kapsayıcı ve herkes için erişilebilir siteler oluşturmak önemlidir. Optimize edebileceğimiz en az altı temel engellilik alanı vardır: görme, işitme, hareketlilik, bilişsel, konuşma ve nöral.
Üçüncü Taraf JavaScript Yükleme
Üçüncü taraf komut dosyaları, çok çeşitli yararlı özellikler sağlayarak web'i daha dinamik hale getirir. Performans üzerindeki etkilerini azaltmak için üçüncü taraf komut dosyalarının yüklenmesini nasıl optimize edeceğinizi öğrenin.
Largest Contentful Paint (LCP)
Bu yayında Largest Contentful Paint (LCP) metriği tanıtılmakta ve bu metriğin nasıl ölçüleceği açıklanmaktadır.
Zaten varsa yeni bir geçiş anahtarı oluşturulmasını engelle
Kullanıcının şifre yöneticisinde zaten yeni bir geçiş anahtarı varsa oluşturulmasını nasıl engelleyeceğinizi öğrenin.
IndexedDB ile çalışma
IndexedDB ile ilgili temel bilgiler kılavuzu.
Her kullanıcı arabirimi geliştiricisinin 2024'te bilmesi gereken 5 CSS snippet'i
Hemen kullanabileceğiniz değerli, güçlü ve kararlı CSS.
URL bölümleri nelerdir?
Ana makine, site ve kaynak arasındaki fark nedir? eTLD+1 nedir? Bu makalede açıklanmaktadır.
Keşfedilebilir kimlik bilgilerinin ayrıntılı incelemesi
Herkese açık kimlik bilgilerinin neler olduğunu ve kullanım alanınıza uygun kullanıcı deneyimlerini nasıl oluşturacağınızı öğrenin.
Oluşturma performansı
Kullanıcılar, sitelerin ve uygulamaların iyi çalışmadığını fark eder; bu nedenle, oluşturma performansını optimize etmek çok önemlidir.
RedirectObserver: Öğeler için document.onresize gibidir
"Yeniden boyutlandırmaObserver"; bir öğe' içerik dikdörtgeninin boyutu değiştiğinde, buna göre tepki verebilmeniz için sizi bilgilendirir.
Metin tabanlı öğelerin kodlama ve aktarım boyutunu optimize edin
Sayfa yükleme hızını iyileştirmek için yapabileceğiniz, gereksiz kaynak indirmelerini ortadan kaldırmanın yanı sıra, kalan kaynakları optimize edip sıkıştırarak toplam indirme boyutunu en aza indirmektir.
OffscreenCanvas: Bir web çalışanıyla tuval işlemlerinizi hızlandırın
Bu dokümanda, web uygulamanızda grafik oluştururken performans iyileştirmeleri elde etmek için OffscreenCanvas API'yi nasıl kullanabileceğiniz açıklanmaktadır.
First Contentful Paint (FCP)
Bu yayında İlk Zengin İçerikli Boyama (FCP) metriği tanıtılmakta ve bu metriğin nasıl ölçüleceği açıklanmaktadır.
İçerik yayınlama ağları (CDN)
Bu makalede, içerik yayınlama ağlarına (CDN'ler) kapsamlı bir genel bakış sunulmaktadır. Ayrıca, CDN kurulumunu nasıl seçeceğiniz, yapılandıracağınız ve optimize edeceğiniz de açıklanmaktadır.
İyi bir oturum kapatma deneyiminin özellikleri nelerdir?
Bir kullanıcı web sitesinden çıkış yaptığında ne yapılması gerektiğine dair pratik geliştirici rehberliği.
Etkileşime Hazır Olma Süresi (TTI)
Bu yayında Etkileşime Hazır Olma Süresi (TTI) metriği tanıtılmakta ve metriğin nasıl ölçüleceği açıklanmaktadır.
Fetch Priority API ile kaynak yüklemesini optimize etme
Fetch Priority API, kaynakların tarayıcıya göre göreli önceliğini gösterir. Optimum yükleme olanağını sağlayabilir ve Önemli Web Verileri'ni iyileştirebilir.
:user-valid ve :user-invalid sözde sınıfları
:user-valid ve :user-invalid sözde sınıflar ve giriş doğrulamada kullanıcı deneyimini geliştirmek için bunların nasıl kullanılacağı hakkında.
İşle ilgili karar mercileri için Core Web Vitals'ı optimize edin
İşle ilgili karar mercilerinin ve geliştirici olmayanların Önemli Web Verileri'ni nasıl iyileştirebileceğini öğrenin.
JavaScript'te base64 kodlama dizelerinin nüansları
Base64 kodlaması uygulama ve dizelerin kodunu çözme işlemlerinde sık karşılaşılan sorunları anlayıp bunlardan kaçının.
CSS alt ızgarası
Alt ızgara, ızgarada paylaşılabilirliği etkinleştirerek iç içe yerleştirilmiş ızgaraların üst öğelere ve kardeşlere uyumlu olmasını sağlar.
Sayfa hızını etkilemeden reklamları etkili bir şekilde yükleme
Günümüzün dijital dünyasında, çevrimiçi reklamcılık hepimizin keyif aldığı ücretsiz web'in önemli bir parçası. Ancak, düzgün uygulanmayan reklamlar göz atma deneyiminin yavaşlamasına, kullanıcıların canını sıkmasına ve etkileşimin azalmasına neden olabilir. Sayfa hızınızı etkilemeden reklamları etkili bir şekilde yüklemeyi, sorunsuz bir kullanıcı deneyimi sağlamayı ve web sitesi sahiplerine gelir fırsatlarını en üst düzeye çıkarmayı öğrenin.
Yaygın olarak kullanılan dört kod kapsamı türü
Kod kapsamının ne olduğunu öğrenin ve bunu ölçmek için yaygın olarak kullanılan dört yöntemi keşfedin.
Test etmek veya test etmemek, teknik açıdan
Neyi test etmeniz gerektiğini ve neleri göz ardı edebileceğinizi belirleyin.
Test senaryolarını ve önceliklerini tanımlama
Neyi test edeceğinizi belirleyin, test durumlarınızı tanımlayın ve önceliklendirin.
Kullanıcı odaklı performans metrikleri
Kullanıcı odaklı performans metrikleri, sitenizin deneyimini anlamada ve gerçek kullanıcıların yararına olacak şekilde iyileştirmede kritik bir araçtır.
Duyarlı resimleri önceden yükleme
Mükemmel kullanıcı deneyimi sağlamak için duyarlı resimleri önceden yüklemeye yönelik yeni ve heyecan verici olanaklar hakkında bilgi edinin.
CSS ile yazıyı kullanıcı tercihlerine uyarlama
Kullanıcıların içeriğinizi en rahat şekilde okuyabilmesi için yazı tipini kullanıcılarınızın tercihlerine uyarlama yöntemi.
Piramit mi Yengeç mi? Size uygun bir test stratejisi bulun
Farklı test türlerini, projenizle eşleşen makul bir stratejide nasıl birleştireceğinizi keşfedin.
Yaygın olarak kullanılan üç test otomasyonu türü
Temel bilgilerle başlayalım! İki genel test modunu ve yaygın üç test otomasyonu türünü keşfetme.
Gereksiz İndirmeleri Ortadan Kaldırma
Her kaynağın daha iyi bir kullanıcı deneyimi sunmaya yardımcı olduğundan emin olmak için kaynaklarınızı düzenli olarak denetlemeniz gerekir.
mkbitmap'i WebAssembly'ye derleme
mkbit eşlem C programı bir görüntüyü okur ve şu sırayla bir veya daha fazla işlemi ona uygular: ters çevirme, yüksek geçiş filtrelemesi, ölçeklendirme ve eşik. Her işlem ayrı ayrı kontrol edilip açılabilir veya kapatılabilir. Bu makalede, mkbit eşlemin WebAssembly'de nasıl derleneceği gösterilmektedir.
WebAssembly nedir ve nereden geldi?
Taşınabilir ikili kod biçimi ve yürütülebilir programlar için karşılık gelen metin biçimi olan WebAssembly'ye (bazen Wasm olarak da bilinir) giriş ve bu tür programlar ile ana makine ortamları arasındaki etkileşimleri kolaylaştıran yazılım arayüzleri sunar.
Kaynak gizli dosya sistemi
Dosya Sistemi Standardı, sayfanın kaynağına özel ve kullanıcı tarafından görülemeyen bir depolama uç noktası olarak özel kaynak dosya sistemi (OPFS) sunar. Bu sistem, performans için yüksek oranda optimize edilmiş özel bir dosya türüne isteğe bağlı
Kullanıcı verilerini modern web uygulamalarında güvenli bir şekilde barındırma
Web uygulamalarında kullanıcı tarafından kontrol edilen içeriği güvenli bir şekilde görüntüleme.
Daha duyarlı web siteleri için AVIF'yi dağıtma
AVIF'nin ekosistemde nasıl benimsendiğine ve geliştiricilerin sabit resimler ve animasyonlar için AVIF'den ne tür performans ve kalite avantajları elde edebileceğine dair genel bakış.
Sonraki boyamayla etkileşimi optimize edin
Web sitenizin Next Paint ile Etkileşimini nasıl optimize edeceğinizi öğrenin.
Bugün kullanabileceğiniz temel özellikler
Referans Değer'in parçası olan özelliklerden yalnızca bazıları hakkında bilgi edinin.
Komut dosyası değerlendirmesi ve uzun görevler
Komut dosyalarını yüklerken, tarayıcının bunları yürütmeden önce değerlendirmesi zaman alır ve bu da uzun görevlere neden olabilir. Komut dosyası değerlendirmenin nasıl çalıştığını ve sayfa yükleme sırasında uzun görevlere neden olmasını önlemek için neler yapabileceğinizi öğrenin.
Büyük DOM boyutlarının etkileşimi ne ölçüde etkilediği ve bu konuda neler yapılabileceği
Büyük DOM boyutları, etkileşimlerin hızlı olup olmadığını belirleyen faktör olabilir. DOM boyutu ile INP arasındaki ilişki, DOM boyutunu küçültmek için neler yapabileceğiniz ve sayfanızda çok fazla DOM öğesi olduğunda oluşturma işlemini sınırlandırmanın diğer yolları hakkında daha fazla bilgi edinin.
HTML ve etkileşim için istemci tarafı oluşturma
JavaScript ile HTML oluşturmak, sunucu tarafından gönderilen HTML'nin oluşturulmasından farklıdır ve performansı etkileyebilir. Bu kılavuzdaki farkı ve özellikle etkileşimler söz konusu olduğunda web sitenizin oluşturma performansını korumak için neler yapabileceğinizi öğrenin.
Giriş gecikmesini optimize edin
Giriş gecikmesi, toplam etkileşim gecikmesine önemli ölçüde katkıda bulunabilir ve sayfanızın INP'sini olumsuz yönde etkileyebilir. Bu kılavuzda giriş gecikmesinin ne olduğunu ve daha hızlı etkileşim için bu gecikmeyi nasıl azaltabileceğinizi öğrenin.
Önemli Web Verileri sorunlarını ayıklamak için Web Verileri uzantısını kullanma
Web Verileri uzantısı artık Önemli Web Verileri sorunlarının temel nedenlerini belirlemenize yardımcı olmak için daha fazla hata ayıklama bilgisi gösteriyor.
Cumulative Layout Shift'i Optimize Etme
Cumulative Layout Shift (CLS), kullanıcıların sayfa içeriğindeki ani değişimlerle ne sıklıkta karşılaştıklarını ölçen bir metriktir. Bu kılavuzda, boyut veya dinamik içerik barındırmayan resimler ve iframe'ler gibi CLS'nin yaygın nedenlerini optimize etmeyi ele alacağız.
WordPress Playground ve WebAssembly ile tarayıcı içi WordPress deneyimleri oluşturun
PHP tarafından desteklenen tam WordPress ve WebAssembly ile yalnızca tarayıcıda çalışan
Cumulative Layout Shift (CLS)
Bu yayında, Cumulative Layout Shift (CLS) metriği tanıtılmakta ve bunun nasıl ölçüleceği açıklanmaktadır.
WebAssembly tarafından kullanıma sunulan, geliştiriciler için yeni işlevler
WebAssembly sayesinde artık web'de kullanılabilen bir araç sergisi.
Uygulama mağazalarında PWA'lar
Progresif Web Uygulamaları; Android Play Store, Microsoft Store gibi uygulama mağazalarına gönderilebilir.
Kaynak haritaları nedir?
Kaynak eşlemeleriyle web'de hata ayıklama deneyimini iyileştirin.
Her kullanıcı arabirimi geliştiricisinin 2023'te bilmesi gereken 6 CSS snippet'i
Hemen kullanabileceğiniz değerli, güçlü ve kararlı CSS.
CSS'deki trigonometrik işlevler
CSS'de sinüs, kosinüs, tanjant ve diğer değerleri hesaplayın.
requestVideoFrameCallback() ile videoda video karesi başına verimli işlemler gerçekleştirin
requestVideoFrameCallback() yöntemi, web yazarlarının, birleştiriciye yeni bir video karesi gönderildiğinde oluşturma adımlarında çalışan bir geri çağırma kaydetmesine olanak tanır.
GDE topluluğunda öne çıkanlar: Lars Knudsen
Google Developers Experts (GDE) programının üyeleriyle yapılan bir dizi röportajdan biri.
Medya uygulamaları için yeni kalıplar
Bu blog yayını, medya uygulamaları için yeni bir kalıp koleksiyonunu duyurdu.
CSS İpucu! Animasyonlu Gradyan Metin
Kapsamlı özel özellikler ve background-clip ile animasyonlu gradyan metin efekti oluşturalım CodePen 'e gidip yeni bir kalem oluşturun. Metninizin işaretlemesini oluşturun. "Hızlı" kelimesini içeren bir başlık kullanalım: Ardından body 'e daha koyu
Chrometober oluşturuluyor!
Kayan kitap, bu Chrometober ile eğlenceli ve korkutucu ipuçları ile püf noktaları paylaşarak nasıl hayata geçirildi.
İpucu bileşeni oluşturma
Renk uyarlanabilir ve erişilebilir bir ipucu özel öğesi oluşturmaya dair temel bilgiler içeren bir genel bakış.
Şifresiz girişler için geçiş anahtarı oluşturma
Geçiş anahtarları, web sitelerinin kullanıcı hesaplarını daha güvenli, basit, kullanımı kolay ve şifresiz hale getirir. Bu makalede, kullanıcıların web siteniz için geçiş anahtarı oluşturmasına nasıl izin vereceğiniz açıklanmaktadır.
Formları otomatik doldurma aracılığıyla geçiş anahtarıyla oturum açma
Geçiş anahtarları, web sitelerinin kullanıcı hesaplarını daha güvenli, basit, kullanımı kolay ve şifresiz hale getirir. Bu makalede, mevcut şifre kullanıcıları için şifre anahtarı içeren şifresiz oturum açma özelliğinin nasıl tasarlanması gerektiği açıklanmaktadır.
Kayan işlem düğmesi (FAB) bileşeni oluşturma
Renk uyarlanabilir, duyarlı ve erişilebilir FAB bileşenleri oluşturmaya dair temel bir genel bakış.
Yazı tipleriyle ilgili en iyi uygulamalar
Web yazı tiplerinin Önemli Web Verileri için nasıl optimize edileceğini öğrenin.
Web Tasarımı Renk Kontrastı Testi
Tasarımınızın erişilebilir renk kontrastını test etmek ve doğrulamak için kullanılan üç araca ve tekniğe genel bakış.
CSS İpucu! Animasyonlu Yükleyici
Kapsamlı özel özellikler ve animation-timing-function ile animasyonlu bir CSS yükleyici oluşturalım CodePen 'e gidip yeni bir kalem oluşturun. Yükleyicimiz için işaretlemeyi oluşturun. Satır içi özel özelliklerin kullanımına dikkat edin: Satır
GDE topluluğunda öne çıkanlar: Alba Silvente Fuentes
Google Developers Experts (GDE) programının üyeleriyle yapılan bir dizi röportajdan biri.
Bir web sitesi için ana gezinme sistemini oluşturma
Bu eğitimde, bir web sitesinde erişilebilir bir ana gezinmenin nasıl oluşturulacağı açıklanmaktadır. Anlamsal HTML'yi, erişilebilirliği ve ARIA özelliklerini kullanmanın bazen faydadan çok zarar verdiği konusunda bilgi edinirsiniz.
:modal mi?
Bu kullanışlı CSS sözde seçici, kalıcı öğeleri seçmenize olanak tanır.
Reklam öğesi listesi stili
Liste stilini oluşturmanın bazı yararlı ve yaratıcı yollarına göz atın.
Etiketler ve etiket yöneticileri için en iyi uygulamalar
Etiketleri ve etiket yöneticilerini Core Web Vitals için optimize edin.
Eğri ızgara illüzyonu oluşturma
CSS ile optik illüzyonlar yaratmanın eğlenceli bir keşfi.
Nordhealth'in Web Bileşenlerinde Özel Mülkleri Nasıl Kullandığı
Tasarım sistemlerinde ve bileşen kitaplıklarında Özel Özellikleri kullanmanın avantajları.
Ayrı dönüşüm özellikleriyle CSS dönüşümleri üzerinde daha ayrıntılı kontrol
Dönüşümlere sezgisel bir şekilde yaklaşmak için bağımsız çevirme, döndürme ve ölçeklendirme özelliklerini nasıl kullanabileceğinizi öğrenin.
CSS kenarlık animasyonları
CSS'de kenarlığı canlandırmanın çeşitli yollarını inceleme
BBC daha iyi güvenlik ve performans için HSTS'yi nasıl kullanıma sunuyor?
BBC, güvenliği ve performansı iyileştirmek amacıyla web sitesinde HSTS'yi kullanıma sunuyor. Bunun ne anlama geldiğini ve HSTS'nin size nasıl yardımcı olabileceğini öğrenin.
Laboratuvar ve alan verileri neden farklı olabilir (ve bu konuda ne yapılmalı?)
Önemli Web Verileri metriklerini izleyen araçların neden farklı sayılar bildirebileceğini ve bu farklılıkların nasıl yorumlanacağını öğrenin.
İki tarafın da kazanacağı bir durum
GDE Enrique Fernandez Guerra'nın STK HelpDev'i için açık kaynak kullanma hakkındaki görüşleri.
Internet Explorer'ın sonu
Maersk.com'daki müşteriler ve geliştiriciler için Internet Explorer desteğinin sonlandırılması.
HTML5Rocks'a veda
Hoşça kalın HTML5Rocks, seni tanımak ne güzel.
Birinci taraf kurabiye tarifleri
Güvenliği, tarayıcılar arası uyumluluğu sağlamak ve üçüncü taraf çerezleri kullanımdan kaldırıldıktan sonra bozulma ihtimalini en aza indirmek için birinci taraf çerezlerinin nasıl ayarlanacağını öğrenin.
Web'de ses ve video oynatmayı senkronize edin.
Web Audio API, AV senkronizasyonunun düzgün şekilde yapılmasını sağlar.
Havalı bir kenarlık oluşturmak için konik gradyanlar kullanın
Konik degradeler, bu güzel kenarlık örneği gibi ilginç efektler oluşturmak için kullanılabilir. Adam Argyle tarafından oluşturulan ve ilk olarak Twitter'daki bu tweet üzerinden paylaşılan bu CodePen 'de, kenar oluşturmak için konik degrade 'nin nasıl
Getirme API'sini kullanırken hata işlemeyi uygulama
Getirme API'si ile çalışırken hataları yakalama.
JavaScript kitaplıkları ve çerçeveler arasındaki fark
İstemci taraflı JavaScript ortamı bağlamında çerçeveler ve kitaplıklar arasındaki farkları anlayın.
JavaScript kitaplığı veya çerçevesi seçin
JavaScript kitaplığı veya çerçevesi kullanmayla ilgili kararları anlayın.
Hızlı ve güzel web yazı tipleri API'si
Google Fonts CSS API'nin işleyiş şekli, nasıl kullanılacağı ve web yazı tiplerinizi verimli bir şekilde nasıl sunabileceği ile ilgili güncelleme.
Kullanıcı Arabirimi Geliştiricisi Terminal Kılavuzu
Bu kaynak, terminalde hızlıca yolunuzu bulmanıza yardımcı olabilir.
GOV.UK, kullanıcı arabiriminden jQuery'yi kaldırıyor.
GOV.UK, jQuery bağımlılığını kullanıcı arabiriminden kaldırdı. Ne olduğunu asla tahmin edemezsiniz. (Evet, katılacaksınız.)
Düğme bileşeni oluşturma
Renk uyarlanabilir, duyarlı ve erişilebilir bileşenlerin nasıl oluşturulacağına dair temel bir genel bakış.
Tarayıcının önceden yükleme tarayıcısıyla mücadele etmeyin
Tarayıcının önceden yükleme tarayıcısının ne olduğunu, performansa nasıl yardımcı olduğunu ve her zaman olduğu gibi çalışmaması için neler yapabileceğinizi öğrenin.
Boşluğu doldurmak
Web için uygulama geliştirmeyi kolaylaştırma.
Sahada Web Verileri'ni ölçmek için en iyi uygulamalar
Web Verileri'ni mevcut analiz aracınızla ölçme
Geliştirici topluluğunda cesaret ve ilham bulma
Mentorluk programlarının kendilerini lider olmaları için nasıl desteklediği hakkında bilgi veren Web Google Developers Uzmanları.
Gerçek hayatta değişken yazı tipleri
Değişken yazı tipleriyle ilgili çok sayıda örnek içeren pratik bir kılavuzu paylaşma.
CSS Gradient Creator ile hızlı şekilde güzel CSS renk geçişleri oluşturun
Josh W Comeau'nun bu aracı, hoş görünen gradyanlar oluşturmayı son derece basit hale getiriyor.
Web geliştiricilerinin en sık karşılaştığı sorunları ayrıntılı olarak inceleyin
Web geliştiricileriyle yapılan bire bir görüşmelerden toplanan, en önemli sorunlu noktalarla ilgili analizler koleksiyonu.
images.tooling.report ile sitenizin resmini mükemmel hale getirin
Resim araçlarının durumuna göz atın.
Genel ve yerel değişken kapsamı
Kapsam ve JavaScript'te nasıl çalıştığı hakkında bilgi edinin.
İletişim kutusu bileşeni oluşturma
"" öğesi" ile renge uyumlu, duyarlı ve erişilebilir mini ve büyük modlar oluşturmaya dair temel bir genel bakış.
Web'de medya oynatma hatalarını ayıklama
Web'de medya oynatma hatalarının nasıl ayıklanacağını öğrenin.
GDE topluluğunda öne çıkanlar: Nishu Goel
Google Developers Experts (GDE) programının üyeleriyle yapılan bir dizi röportajdan biri.
Çok fazla geç yüklemenin performans etkileri
Resimleri ilk görüntü alanında meraklı bir şekilde yüklemek, geri kalanını ise çok geç şekilde yüklemektir. Böylece, daha az bayt yükleyerek Web Verileri'ni iyileştirebilirsiniz.
Yükleme çubuğu bileşeni oluşturma
"" öğesi bulunan renk uyarlanabilir ve erişilebilir bir yükleme çubuğunun nasıl oluşturulacağına dair temel bir genel bakış.
Formlar'daki Kimlik Bilgilerini Kaydet
Kayıt ve oturum açma formlarınızı mümkün olduğunca basit tutun. Kullanıcıların geri döndüklerinde tekrar oturum açmak zorunda kalmaması için oturum açma formlarındaki kimlik bilgilerini kaydedin. Formlardaki kullanıcı kimlik bilgilerini depolamak
Chrome ve Firefox yakında ana sürüm 100'e ulaşacak
User-Agent dizesi değişiklikleri, Chrome ve Firefox'un bu etkiyi azaltmak için uyguladığı stratejiler ve nasıl yardımcı olabileceğiniz.
Uyarlanabilir site simgesi oluşturma
Uyarlanabilir site simgesi oluşturmaya dair temel bir genel bakış.
HTTP Önbelleğini güncelleyerek güvenliği ve gizliliği artırın
Önbellek Kontrolü başlığının unutulması veya yanlış kullanılması, web sitenizin ve kullanıcılarınızın gizliliğini olumsuz yönde etkileyebilir. Yüksek değere sahip web siteleriyle ilgili öneriler alın.
Emscripten'da kanvasa çizim
Emscripten ile WebAssembly'den web'deki bir kanvasta 2D grafikler oluşturmayı öğrenin.
Ek HTML öğeleri
Sağlıklı bir site için temel metrikler
USB uygulamaları web'e bağlanıyor. 2. Bölüm: gPhoto2
Harici kameraları bir web uygulamasından USB üzerinden kontrol etmek için gPhoto2'nin WebAssembly'ye nasıl aktarıldığını öğrenin.
Ağ Hatası Günlük Kaydı (NEL)
İstemci taraflı ağ hatalarını toplamak için Ağ Hatası Günlük Kaydı (NEL) kullanın.
WebAssembly özellik algılama
Tüm tarayıcılarda kullanıcıları desteklerken en yeni WebAssembly özelliklerini nasıl kullanacağınızı öğrenin.
USB uygulamaları web'e bağlanıyor. 1. Bölüm: Libusb
Harici cihazlarla etkileşime giren kodların WebAssembly ve Fugu API'leriyle web'e nasıl taşınabileceğini öğrenin.
Tema değiştirme bileşeni oluşturma
Uyarlanabilir ve erişilebilir bir tema değiştirme bileşeni oluşturmaya dair temel bir genel bakış.
Emscripten ile C++'ya JavaScript snippet'leri yerleştirme
Dış dünyayla iletişim kurmak için JavaScript kodunu WebAssembly kitaplığınıza nasıl yerleştireceğinizi öğrenin.
Oculus Quest 2'de PWA'lar
Oculus Quest 2, Meta şirketinin Oculus tarafından geliştirilen bir sanal gerçeklik (VR) başlığıdır. Geliştiriciler artık Oculus Quest 2'nin çoklu görev özelliğinden yararlanan 2D ve 3D Progresif Web Uygulamaları (PWA) oluşturup dağıtabilirler. Bu makalede, yaşadığınız deneyim ile Oculus Quest 2'de PWA'nızı oluşturma, başka cihazdan yükleme ve test etme süreci açıklanmaktadır.
Bina Tasarım Ekibi
Designcember'ın tatil takvimi tarzı deneyimini oluşturmak için kullanılan sürece ve araçlara göz atın.
Designcember Hesap Makinesi
Ortam ışığı sensöründen ve pencere kontrollerinin yer paylaşımı özelliğinden yararlanan bir güneş hesap makinesini web'de yeniden oluşturmaya yönelik kuşkulu bir girişim.
ConfigureClone kullanarak JavaScript'te derin kopyalama
Uzun bir süredir, bir JavaScript değerinin ayrıntılı bir kopyasını oluşturmak için geçici çözümlere ve kitaplıklara başvurmak zorundaydınız. Platform artık derin kopyalama için yerleşik bir işlev olan "configuredClone()" sunuyor.
Toast bileşeni oluşturma
Uyarlanabilir ve erişilebilir bir durum mesajı bileşeninin nasıl oluşturulacağına dair temel bir genel bakış.
UI fonu
Chrome'un, tasarım araçları, CSS ve HTML üzerinde çalışan kişilere hibe sağlamak için tasarlanan kullanıcı arayüzü fonunu duyuruyoruz.
3D oyun menü bileşeni oluşturma
Duyarlı, uyarlanabilir ve erişilebilir bir 3D oyun menüsünün nasıl oluşturulacağına dair temel bir genel bakış.
PageSpeed Insights'taki yenilikler
Sayfa ve site kalitesini daha iyi ölçmenize ve optimize etmenize yardımcı olması için PageSpeed Insights'taki en son yenilikler hakkında bilgi edinin.
Lighthouse kullanıcı işlemleri akışları
Kullanıcı işlemleri akışı boyunca performansı ve en iyi uygulamaları ölçmek için yeni Lighthouse API'yi deneyin.
Chrome Dev Summit 2021'de duyurulan her şey
2021 Chrome Dev Summit'te paylaşılan tüm önemli duyuruların bir özeti ve daha fazla bilgi için ihtiyacınız olan bağlantılar.
Animasyon yumuşaklığı metriğine doğru
Animasyonları ölçme, animasyon kareleri ve genel sayfa düzgünlüğü hakkında bilgi edinin.
Photoshop'un web yolculuğu
Chrome son üç yıldır, tarayıcıda bulunanların sınırlarını zorlamak isteyen web uygulamalarını güçlendirmek için çalışmalar yapıyor. Bu uygulamalardan biri de Photoshop'tur. Yazılımları doğrudan tarayıcıda Photoshop kadar karmaşık bir şekilde çalıştırma fikrini yalnızca birkaç yıl önce düşünmek zordu. Ancak Adobe, çeşitli yeni web teknolojilerini kullanarak Photoshop'un herkese açık bir beta sürümünü web'e taşıdı.
Çoklu seçim bileşeni oluşturma
Kullanıcı deneyimlerini sıralamak ve filtrelemek için duyarlı, uyarlanabilir ve erişilebilir, çoklu seçim bileşeninin nasıl oluşturulacağına dair temel bir genel bakış.
Gezinme zamanlaması ve kaynak zamanlaması ile sahada yükleme performansını değerlendirme
Sahadaki yükleme performansını değerlendirmek için Navigation and Resource Timing API'lerinin kullanımıyla ilgili temel bilgileri öğrenin.
Sanitizer API ile güvenli DOM işleme
Yeni Sanitizer API'nin amacı, rastgele dizelerin sayfaya güvenli bir şekilde eklenmesi için sağlam bir işlemci derlemektir. Bu makalede API tanıtılmakta ve kullanımı açıklanmaktadır.
Üçüncü taraf yerleşik öğeleri kullanmak için en iyi uygulamalar
Bu dokümanda, üçüncü taraf yerleştirmeleri yüklerken kullanabileceğiniz en iyi performans uygulamaları, verimli yükleme teknikleri ve popüler yerleştirmeler için düzen kaymalarını azaltmaya yardımcı olan Layout Shift Sonlandırıcı aracı açıklanmaktadır.
SPA mimarileri Önemli Web Verileri'ni nasıl etkiler?
SPA'lar, Önemli Web Verileri ve Google'ın mevcut ölçüm sınırlamalarını ele alma planıyla ilgili sık sorulan soruların yanıtları.
JavaScript etkinlik ayrıntılı incelemesi
preventDefault ve stopPropagation: Hangi yöntemin ne zaman kullanılacağı ve her yöntemin tam olarak ne işe yaradığı. JavaScript etkinliklerini işleme genellikle basittir. Bu durum özellikle basit (nispeten düz) bir HTML yapısıyla çalışırken
JavaScript olmayan kaynakları paket haline getirme
Çeşitli öğe türlerinin hem tarayıcılarda hem de paketleyicilerde çalışacak şekilde JavaScript'ten nasıl içe aktarılacağını ve gruplandırılacağını öğrenin.
Bölme düğmesi bileşeni oluşturma
Erişilebilir bir bölme düğmesi bileşeninin nasıl oluşturulacağına dair temel bilgiler içeren bir genel bakış.
Stil sayfalarını içe aktarmak için CSS Modülü Komut Dosyalarını kullanma
JavaScript modülleriyle aynı söz dizimini kullanarak CSS stil sayfalarını içe aktarmak için CSS modülü komut dosyalarını nasıl kullanacağınızı öğrenin.
Anahtar bileşeni oluşturma
Duyarlı ve erişilebilir bir anahtar bileşeni oluşturmaya dair temel bir genel bakış.
CSS vurgu rengi
Tek satır kodla yerleşik HTML formu girişlerine markanızın rengini taşıyın.
Kullanıcı tercihi medya özellikleri istemci ipucu üstbilgileri
İstemci ipucu başlıkları, sitelerin istekte bulunurken isteğe bağlı olarak kullanıcının medya tercihlerini almasına olanak tanır. Bu sayede sunucular, performans nedeniyle doğru CSS'yi satır içi olarak yerleştirebilir. CSS medya sorguları ve
İçerik haritası bileşeni oluşturma
Kullanıcıların sitenizde gezinmesi için duyarlı ve erişilebilir bir içerik haritası bileşeni oluşturmaya ilişkin temel bir genel bakış.
C, C++ ve Rust'tan WebAssembly iş parçacıklarını kullanma
Başka dillerde yazılmış çok iş parçacıklı uygulamaları WebAssembly'ye nasıl taşıyacağınızı öğrenin.
Medya akışıyla ilgili temel bilgiler
Medya akışı, içeriğin DASH ve HLS gibi protokoller kullanılarak bir aralık isteği aracılığıyla oynatma sırasında belirli bir sırada yeniden bir araya getirilebilen ayrı veri parçalarına ayrıldığı bir sunucudan sürekli olarak multimedya içeriği yayınlama yöntemidir.
Çevrimdışı yayın özellikli PWA
Çevrimdışı yayın ile PWA (Progresif Web Uygulaması) oluşturmanın çeşitli zorlukları var. Bu makalede, kullanıcılara yüksek kaliteli çevrimdışı medya deneyimi sunan API'ler ve teknikler hakkında bilgi edineceksiniz.
Medya şifrelemesi
Dijital hak yönetimi kavramlarını ve ham mov dosyasından MPEG-DASH veya HLS için paketlenmiş şifrelenmiş medyaya geçmek için gerekli komutları hem Net Key hem de Widevine şifrelemesi ile öğrenin.
Medya çerçeveleri
Medya çerçeveleri hem tescilli hem de açık kaynak çeşitlerine sahiptir. Bunların temelinde, çeşitli kapsayıcı biçimleri ve iletim protokolleri için ses ve/veya video oynatmayı destekleyen bir API kümesi yer alır.
Web Verileri uzantı güncellemesinde alan verileriyle yolunuzu bulun
Web Verileri uzantısı artık size sahadaki gerçek kullanıcı deneyimlerine kıyasla yerel deneyimlerinizin nerede olduğunu gösteriyor.
Renk şeması oluşturma
Dinamik ve yapılandırılabilir bir renk şeması oluşturmaya dair temel bir genel bakış
@font-face için CSS boyut düzenlemesi
Web yazı tipi yüklenirken artık yazı tipi boyutlarını normalleştirmek ve yazı tipleri arasında geçiş yaparken düzen kaymasını önlemek için ölçeğini ayarlayabilirsiniz
Sitenizdeki resimleri sıkıştırmak için AVIF kullanma
Mobil cihazlara masaüstü boyutlu resimler sunarken gerekenden 2-4 kat daha fazla veri kullanılabilir. Resimlere ilişkin "#34; herkese uygun tek beden" yaklaşımı yerine, farklı cihazlara farklı resim boyutları sunun.
Web araçlarında gelişen Cumulative Layout Shift
Bugünden itibaren Lighthouse, PageSpeed Insights ve Chrome Kullanıcı Deneyimi Raporu da dahil olmak üzere pek çok Chrome web aracı platformunda CLS değişikliği yapıldı.
Web Verileri için CSS
Bu makalede, Web Verileri'ni optimize etmek için CSS ile ilgili teknikler açıklanmaktadır.
Yeni CSS işlevsel sözde sınıf seçiciler :is() ve :where()
CSS seçici söz dizimine yapılan bu küçük görünüşte eklemelerin büyük bir etkisi olacaktır.
Yeni Progresif Web Uygulaması eğitimi kullanıma sunuldu
Güvenilir, yüklenebilir ve özellikli PWA'ların nasıl oluşturulacağını öğretmek için yeni bir codelab serisini içeren altı bölümden oluşan yeni Progresif Web Uygulaması eğitimi mevcuttur.
Yeni duyarlı içerik: Bileşen odaklı bir dünyada web tasarımı
Kullanıcı tercihine dayalı medya özellikleri, kapsayıcı sorguları ve katlanabilir ekranlar gibi yeni ekran türlerine yönelik medya sorguları, duyarlı web tasarımında yeni bir döneme girmemize olanak tanıyacaktır.
Kullanıcı Aracısı İstemci İpuçlarına Taşı
Sitenizi kullanıcı aracısı dizesinden yeni User-Agent İstemci İpuçları'na taşıma stratejileri.
Güvenlik üstbilgileri hızlı başvuru
Bu makalede, web sitenizi korumak için kullanabileceğiniz en önemli güvenlik başlıkları listelenmektedir. Web tabanlı güvenlik özelliklerini anlamak, bunları web sitenizde nasıl uygulayacağınızı öğrenmek ve hatırlatmaya ihtiyacınız olduğunda referans olarak kullanmak için bu kılavuzu kullanın.
Excalidraw ve Fugu: Temel Kullanıcı Yolculuklarını İyileştirme
Thomas Steiner'ın Excalidraw ve Fugu: Temel Kullanıcı Yolculuklarını İyileştirme adlı Google I/O 2021 konuşmasının yazısı
Service Worker'larda ES modülleri
Service Worker'lar, importScripts() işlevine alternatif olarak ES modüllerinin statik içe aktarmalarını kullanarak ekstra kod getirebilir.
Medya kaydırma çubuğu bileşeni oluşturma
TV, telefon, masaüstü bilgisayar ve benzeri cihazlar için duyarlı yatay kaydırma görünümü oluşturma konusunda temel bilgiler sunan genel bakış.
Lighthouse'u kullanarak Web Verileri'ni optimize etme
Bugün, sitenizin Web Verileri'nde nasıl iyileştirilebileceğini belirlemeye yardımcı olmak için Lighthouse, PageSpeed ve Geliştirici Araçları'ndaki yeni araç özelliklerini ele alacağız.
WebAssembly'den eşzamansız web API'lerini kullanma
Geleneksel olarak senkronize dilleri WebAssembly ile derlerken eşzamansız web API'lerini nasıl çağıracağınızı öğrenin.
Üçüncü taraf komut dosyalarını kontrol altında tutma
Üçüncü taraf komut dosyaları veya "etiketler" sitenizdeki performans sorunları kaynağı ve dolayısıyla optimizasyon hedefi olabilir. Ancak, eklediğiniz etiketleri optimize etmeye başlamadan önce, ihtiyacınız olmayan etiketleri optimize etmediğinizden emin olun. Bu makalede, yeni etiket isteklerini nasıl değerlendireceğiniz, mevcut etiketleri nasıl yöneteceğiniz ve inceleyeceğiniz açıklanmaktadır.
PWA'nızın başlık çubuğunun pencere kontrolleri yer paylaşımını özelleştirin
Geliştiriciler, Pencere Denetimleri Yer Paylaşımı özelliği sayesinde, yüklü PWA'ların başlık çubuğunu özelleştirebilirler. Böylece, PWA'ları daha çok uygulamaya benzer.
DataTransfer API'yi kullanarak bariyerleri ortadan kaldırma
DataTransfer nesnesi, bir sürükle ve bırak işlemi sırasında sürüklenen verileri barındırır. Her biri en az bir veri türünden olmak üzere bir veya daha fazla veri öğesi barındırabilir. Bu makalede, DataTransfer API ile neler yapabileceğiniz açıklanmaktadır.
Kaynaklar arası iframe'lerde OTP formlarını WebOTP API ile doldurma
WebOTP API artık bir iframe içinden OTP alabilir.
Bölünmüş metin animasyonları oluşturma
Bölünmüş harf ve kelime animasyonlarının nasıl oluşturulacağına ilişkin temel bir genel bakış.
CLS metriğini geliştirme
Sayfaların daha adil ve uzun ömürlü olması için CLS metriğini iyileştirme planları.
Web Geliştirici Memnuniyeti
Web Geliştirici Memnuniyeti, web geliştiricilerinin ihtiyaçlarıyla ilgili bilgi toplamaya yönelik bir Google projesidir. Hedefimiz daha güvenilir, tahmin edilebilir ve birlikte çalışabilen bir web platformu olup geliştiricilerin bu platforma yatırım yapmasını, platforma güvenmesini, platformu ve işlerini büyütmek için yeni özellikleri benimsemesini ve kullanmasını sağlamaktır.
Ayarlar bileşeni oluşturma
Kaydırma çubukları ve onay kutuları gibi bir ayarlar bileşeninin nasıl oluşturulacağına ilişkin temel bilgiler içeren bir genel bakış.
Düzen kaymalarında hata ayıklama
Düzen kaymalarını nasıl tanımlayıp düzelteceğinizi öğrenin.
JavaScript: Bunun anlamı nedir?
JavaScript'te "this"in değerini anlamak zor olabilir. Nasıl yapıldığını buradan öğrenebilirsiniz...
Mini uygulama bileşenleri
Bu bölümde, tüm mini uygulama platformlarının kullanıma sunduğu bileşenler hakkında ayrıntılı bilgi verilmektedir.
Proje yapısı, yaşam döngüsü ve paketler
Bu bölüm proje yapısını, yaşam döngüsünü ve mini uygulamaların paketlenmesini ele almaktadır.
Mini uygulama programlama ilkelerini örnek bir projeye uygulama
Bu bölümde, "mini uygulama yöntemini programlama" yaklaşımını uygulayan örnek bir proje gösterilmektedir.
Bir web geliştiricisinin mini uygulamalarla ilgili düşüncelerini sonuçlandırma
Bu bölüm, kalıpların dışında düşünmenin ve kendi balonunun dışından giriş ve ilham almanın, web'de daha iyi bir gelecek inşa ederken kesinlikle yardımcı olabileceği gözlemiyle mini uygulama koleksiyonunu sonlandırıyor.
Mini uygulama işaretleme, stil oluşturma, komut dosyası oluşturma ve güncelleme
Bu bölümde çeşitli mini uygulama platformlarının işaretleme, stil oluşturma, komut dosyası oluşturma ve güncelleme seçenekleri ele alınmaktadır.
Mini uygulama açık kaynak projeleri
Bu bölümde bazı ilgi çekici mini uygulama açık kaynak projeleri sunulmaktadır.
Mini uygulama yöntemini programlama
Bu bölümde, mini uygulama yöntemini programlama yöntemi açıklanmaktadır.
H5 ve QuickApp nedir?
Bu bölümde, her ikisi de mini uygulamalardan farklı olan H5 uygulamaları ve QuickApp ile ilgili arka plan bilgileri sağlanmaktadır.
Akışlar: Ayrıntılı kılavuz
Streams API'si, JavaScript'in ağ üzerinden alınan veri akışlarına programlı olarak erişmesine ve bunları istenen şekilde işlemesine olanak tanır.
Sekmeler bileşeni oluşturma
iOS ve Android uygulamalarında bulunanlara benzer bir sekme bileşeninin nasıl oluşturulacağına ilişkin temel bir genel bakış.
Kökler arası erişimi etkinleştirme rehberi
Kaynaklar arası yalıtım, bir web sayfasının SharedArrayBuffer gibi güçlü özellikleri kullanmasına olanak tanır. Bu makalede, web sitenizde kökler arası izolasyonu nasıl etkinleştireceğiniz açıklanmaktadır.
Origin-Agent-Cluster başlığıyla performans yalıtımı isteme
Kaynak Aracısı Kümesi başlığı, aynı alandaki diğer kaynaklara eşzamanlı erişimi sonlandırır ve kaynağınıza özel kaynakları vermesi için tarayıcıya ipuçları verir.
CSS aspect-ratio özelliği
Yeni en boy oranına sahip CSS özelliği sayesinde resimlerde ve öğelerde en boy oranını korumak artık daha kolay.
WebRTC artık bir W3C ve IETF standardı
WebRTC'nin tarihi, mimarisi, kullanım alanları ve geleceğine dair kısa bir genel bakış.
Bantlar için en iyi uygulamalar
Bantları performans ve kullanılabilirlik için nasıl optimize edeceğinizi öğrenin.
Yerel geliştirme için HTTPS kullanma
http://localhost, geliştirme amacıyla çoğu zaman HTTPS gibi davranır. Ancak, özel ana makine adları veya tarayıcılarda güvenli çerezlerin kullanılması gibi bazı özel durumlar vardır. Bu durumlarda, sitenizin üretimde nasıl çalıştığını doğru şekilde
Geri bildirim isteniyor: Uzun süreli sayfalar için daha iyi bir düzen kayması metriğine giden yol
Cumulative Layout Shift metriğini iyileştirmeye yönelik planlarımız hakkında bilgi edinin ve bize geri bildirimde bulunun.
Yerel geliştirme için HTTPS ne zaman kullanılır?
Bazı özel durumlar haricinde, yerel geliştirme için http://localhost kullanılması çoğu zaman uygundur. Bu yayında, yerel geliştirme sitenizi HTTPS ile çalıştırmanız gereken durumlar açıklanmaktadır. Ayrıca bkz: Yerel geliştirme için HTTPS kullanma.
Codelab: Sidenav bileşeni oluşturma
Duyarlı, dışa doğru kaydırmalı bir yan gezinme düzeni bileşenini nasıl oluşturacağınızı öğrenin.
Yan gezinme bileşeni oluşturma
Yan gezinme bölmesinin duyarlı bir slaytı oluşturmayla ilgili temel bilgiler
Codelab: CSS'de ortalama
CSS ile 5 farklı ortalama tekniğini öğrenin.
CSS'de ortalama
Bir dizi testten geçerken 5 ortalama tekniğini uygulayarak değişime en dayanıklı olanı seçin.
Önbelleğinizi seviyorum ❤️
İlk yükleme performansı önemlidir ancak her şey değildir. Sitenizi ikinci kez yükleyen kullanıcılar, içeriğinize erişmek için önbelleklerini kullanır. Bu nedenle, sitenizin hem hız hem de doğruluk açısından iyi çalıştığından emin olmak çok önemlidir.
Daha hızlı uygulamalar için modern JavaScript'i yayınlayın, gönderin ve yükleyin
Modern JavaScript, aktarılan ES5'e göre boyut ve performans iyileştirmeleri sunar ve web tarayıcılarının% 95'inde desteklenir. Modern JavaScript çıkışını etkinleştirmek uygulamanıza bu avantajları getirir ancak etki, ES5'e halihazırda aktarılmış olan bağımlılıklarla sınırlıdır. Bu kılavuzda, modern paketlerin npm'de nasıl yayınlanacağı, modern JavaScript paketlerinin nasıl yükleneceği ve en uygun şekilde paket haline getirileceği gösterilmektedir.
Tarayıcılar arası boyama işcıkları ve Houdini.how
Farklı tarayıcılarla Houdini Paint API'yi nasıl uygulayacağınızı öğrenin ve Houdini.how ile bir Houdini iş uygulaması dünyasını keşfedin.
Kayıt formu en iyi uygulamaları codelab'i
Güvenli, erişilebilir ve kullanımı kolay basit bir kayıt formu oluşturmak için platformlar arası tarayıcı özelliklerini kullanın.
Kayıt formu en iyi uygulamaları
Minimum çabayla kullanıcılarınızın kaydolmasına, giriş yapmasına ve hesap bilgilerini yönetmesine yardımcı olun.
AutoWebPerf ile denetimleri otomatikleştirme
Birden fazla kaynaktan performans verilerinin otomatik olarak toplanmasını sağlayan yeni bir modüler araç.
SMS OTP formu en iyi uygulamaları
Kullanıcıdan SMS ile gönderilen bir OTP'yi (tek kullanımlık şifre) sağlamasını istemek, kullanıcının telefon numarasını doğrulamak için yaygın olarak kullanılan bir yöntemdir. Bu yayında, mükemmel bir kullanıcı deneyimi sunan SMS OTP formu oluşturmak için en iyi uygulamalar sunulmaktadır.
Adres formuyla ilgili en iyi uygulamalar codelab'i
Adres formlarıyla ilgili en iyi uygulamaları öğrenin.
Ödeme formuyla ilgili en iyi uygulamalar codelab'i
Ödeme şekilleriyle ilgili en iyi uygulamaları öğrenin.
Ödeme ve adres formu için en iyi uygulamalar
Kullanıcılarınızın adres ve ödeme formlarını mümkün olduğunca hızlı ve kolay bir şekilde doldurmasına yardımcı olarak dönüşüm sayısını en üst düzeye çıkarın.
Service Worker'larla iki yönlü iletişim
Sayfa ve hizmet çalışanı arasında iki yönlü iletişim kanalı nasıl oluşturulur?
Çalışanlara genel bakış
Web çalışanları ve hizmet çalışanlarının web sitenizin performansını nasıl iyileştirebileceği ve ne zaman web çalışanı yerine hizmet çalışanının kullanılması gerektiği.
zorunluluk önbelleğe alma kılavuzu
Pencere ve hizmet çalışanının performans, önbelleğe alma ve çevrimdışı ile ilgili görevleri yerine getirmesi için nasıl iletişim kurulur?
Service Worker'ları içeren sayfalarda güncellemeler yayınlama
Service Worker'ların belirli etkinlikler hakkında bilgi vermek için sayfayla proaktif olarak nasıl iletişim kurabileceği.
Daha iyi bir FPS oyun deneyimi sunmak için fare hızlandırmayı devre dışı bırakın
Web uygulamaları artık işaretçi etkinliklerini kaydederken fare hızlandırmasını devre dışı bırakabilir.
Hikayeler bileşeni oluşturma
Web'deki Instagram Hikayeler'e benzer bir deneyim oluşturma konusunda temel bilgiler sunan bir genel bakış.
Codelab: Hikayeler bileşeni oluşturma
Web'de Instagram Hikayeler'e benzer bir deneyimi nasıl oluşturacağınızı öğrenin.
İçerik yönetim sistemleri için tarayıcı düzeyinde geç yükleme
Bu yayın, içerik yönetim sistemlerinde yükleme özelliğinin nasıl benimseneceği konusunda yol gösterici bilgiler sağlar.
Düzenli Aynı Site
"same-site" tanımı, URL şemasını içerecek şekilde değişmektedir. Bu nedenle, bir sitenin HTTP ve HTTPS sürümleri arasındaki bağlantılar artık siteler arası istekler olarak sayılmaktadır. Mümkün olduğunda sorunlardan kaçınmak için varsayılan olarak HTTPS'ye yükseltin veya hangi SameSite özellik değerlerinin gerektiğiyle ilgili ayrıntılar için okumaya devam edin.
Codelab: Push bildirim sunucusu oluşturma
Push bildirimi aboneliklerini yöneten ve web push protokolü isteklerini bir push hizmetine gönderen sunucu oluşturmayı gösteren adım adım etkileşimli bir eğitim.
Codelab: Push bildirimi istemcisi oluşturma
Kullanıcıyı push bildirimlerine abone yapan, push mesajlarını bildirim olarak görüntüleyen ve kullanıcının push bildirimleri aboneliğinden çıkaran bir istemciyi nasıl oluşturacağınızı gösteren adım adım etkileşimli bir eğitim.
Push bildirimlerine genel bakış
Push bildirimlerinin ne olduğuna, bunları neden kullanabileceğinize ve nasıl çalıştığına dair genel bir bakış.
Çevrimdışı kullanımı ölçme
Sitenizin neden daha iyi bir çevrimdışı deneyime ihtiyaç duyduğunu ortaya koyabilmek için sitenizin çevrimdışı kullanımını nasıl izleyebilirsiniz?
Yüksek performanslı CSS animasyonlarına örnekler
Yüksek performanslı tekniklerin nasıl karmaşık ve güzel animasyonlar oluşturabileceğini gösterme.
İmzalı Takaslar (SXG'ler)
SXG, bir kaynağın kaynağının yayınlanma şeklinden bağımsız olarak kimliğinin doğrulanmasını sağlayan bir iletim mekanizmasıdır.
CSS min(), max() ve clamp()
Min., Maksimum ve Sabitleme, daha az kod ipoteğiyle daha duyarlı stil sunan güçlü CSS özellikleri sağlar. Bu gönderide, iyi desteklenen bu CSS matematik işlevlerini kullanarak öğe boyutunu nasıl kontrol edeceğiniz, uygun boşlukları nasıl koruyacağınız ve değişken yazı biçimi nasıl uygulayacağınız açıklanmaktadır.
Akışa göre kısaltmalarla mantıksal düzen geliştirmeleri
Chromium için yeni mantıksal özellik kısayolları ve yeni ek özellikler.
Yüksek performanslı CSS animasyonları oluşturma
CSS animasyonlarınızın performansını iyileştirmek için dönüşüm ve opaklık CSS özelliklerini mümkün olduğunca kullanın ve düzeni veya boyamayı tetikleyen hiçbir şeyden kaçının.
Service Worker'da aralık isteklerini işleme
Kısmi yanıt istendiğinde hizmet çalışanınızın ne yapacağını bildiğinden emin olun.
Bazı animasyonlar neden yavaş?
İyi bir animasyon, mükemmel bir web deneyiminin olmazsa olmazıdır. Bu yayında, belirli animasyon türlerinin neden diğerlerinden daha iyi performans gösterdiği açıklanmaktadır.
Kamera kaydırma, yatırma ve yakınlaştırmayı denetleyin
Kameralardaki kaydırma, eğme ve yakınlaştırma özellikleri artık web üzerinden kontrol edilebiliyor.
Üçüncü taraf kaynak denemeleri nedir?
Kaynak denemeleri, yeni veya deneysel bir web platformu özelliğini test etmenin bir yoludur. Üçüncü taraf kaynak denemesi, yerleştirilmiş içerik sağlayıcılarının yeni bir özelliği birden fazla sitede denemesine olanak tanır. Kaynak denemeleri, yeni
Ayrılan pencere bellek sızıntıları
Ayrılan pencereler, bulunması ve düzeltilmesi zor, yaygın bir bellek sızıntısı türüdür.
Çevrimdışı yedek sayfa oluşturma
Uygulamanız için basit bir çevrimdışı deneyimi nasıl oluşturacağınızı öğrenin.
CSS's Clip-path özelliği ile ilginç resim şekilleri oluşturun
CSS'de kırpmak, tasarımlarımızda kutu gibi görünen her şeyden uzaklaşmamıza yardımcı olabilir. Çeşitli temel şekiller veya SVG kullanarak klip yolu oluşturabilirsiniz. Ardından, bir öğenin göstermek istemediğiniz parçalarını kesin.
CSS' maskeleme resmi özelliği ile resimlere efekt uygulayın
CSS maskeleme, resimleri maske katmanı olarak kullanma seçeneği sunar. Yani maskeniz olarak bir resim, SVG veya gradyan kullanarak resim düzenleyici olmadan ilginç efektler oluşturabilirsiniz.
CSS ::marker ile özel madde işaretleri
"CSS" veya "öğelerdeki sayıların veya madde işaretlerinin rengini, boyutunu veya türünü özelleştirmek için CSS kullanın."
Şifre değiştirme işleminde iyi bilinen bir URL ekleyerek kullanıcıların şifre değiştirmelerine yardımcı olun
İstekleri /.well-known/change-password adresine yönlendirerek şifre değiştirme URL'sine yönlendirerek kullanıcıların şifrelerini eskisine göre daha kolay şekilde güncellemesini sağlayabilirsiniz.
İsteğe bağlı ödeme bilgilerini hizmet çalışanıyla işleme
Web tabanlı ödeme uygulaması kaydedildikten sonra, satıcılardan gelen ödeme isteklerini kabul etmeye hazır hale gelir. Bu makalede, çalışma zamanında bir Service Worker'dan yapılan ödeme işleminin nasıl düzenleneceği açıklanmaktadır.
Ödeme işlemlerini bir hizmet çalışanıyla düzenleme
Web tabanlı ödeme uygulaması kaydedildikten sonra, satıcılardan gelen ödeme isteklerini kabul etmeye hazır hale gelir. Bu makalede, çalışma zamanında bir Service Worker'dan yapılan ödeme işleminin nasıl düzenleneceği açıklanmaktadır.
ARIA: zehir mi yoksa panzehir mi?
Ekran okuyuculara yalan söylemenin erişilebilirliği nasıl iyileştirdiği, içine tuz sürtülmezse!
Emscripten'ı kullanarak WebAssembly'de bellek sızıntılarının hatalarını ayıklama
Diğer dillerde yazılmış kitaplıkları web'e güvenli ve deyimsel bir şekilde getirmek için WebAssembly'yi nasıl kullanacağınızı öğrenin.
content-visible: oluşturma performansınızı artıran yeni CSS özelliği
CSS content-visibility özelliği, ekran dışındaki içeriğin oluşturulmasını atlayarak web içeriği oluşturma performansı avantajları sağlar. Bu makalede, auto anahtar kelimesini kullanarak ilk yükleme sürelerini kısaltmak için bu yeni CSS özelliğinin nasıl kullanılacağı gösterilmektedir. Ayrıca, CSS İçerme Spesifikasyonu ve içeriğinizin tarayıcıda nasıl oluşturulacağı üzerinde daha fazla kontrol sahibi olmanızı sağlayan içerik görünürlüğüyle ilgili diğer değerler hakkında bilgi edineceksiniz.
Pano erişiminin engeli kaldırılıyor
Eş zamansız Clipboard API izin dostu kopyalama ve yapıştırma işlemlerini kolaylaştırır.
Yönlendiren ve Yönlendiren Politikası ile ilgili en iyi uygulamalar
"strict-origin-when-cross-origin" değerine sahip bir yönlendiren politikası ayarlamayı deneyin. Bu politika, kaynaklar arasında veri sızıntısı riskini azaltırken yönlendirenin kullanışlılığını büyük oranda korur.
Android'de web
Farklı bileşenlerin, Android uygulamalarının içinde web içeriği oluşturmak için nasıl kullanılabileceğini öğrenin.
Google'da PWA oluşturma, 1. bölüm
Bulletin Ekibi'nin, PWA geliştirirken Service Worker'lar hakkında öğrendikleri.
Lighthouse CI ile performans izleme
Lighthouse CI'yı nasıl kuracağınızı ve geliştirici iş akışlarına nasıl entegre edeceğinizi öğrenin.
Google hesaplarındaki geçiş anahtarlarının kullanıcı deneyimini tasarlama
Google Hesaplarına daha iyi güvenlik ve daha iyi bir kullanıcı deneyimi sunma.
@property: CSS değişkenlerine süper güçler verme
Anlamsal yazma, yedek değer ve daha fazlasıyla CSS özel özelliklerini doğrudan CSS dosyanıza nasıl uygulayacağınızı öğrenin.
Android ödeme uygulamasından gönderim ve iletişim bilgileri sağlama
Satıcı, Payment Request API aracılığıyla istekte bulunduğunda kullanıcının seçtiği gönderim adresini ve iletişim bilgilerini sağlamak için Android ödeme uygulamanızda nasıl değişiklik yapacağınızı öğrenin.
Service Worker önbelleğe alma ve HTTP önbelleğe alma
Hizmet çalışanı önbelleğinde ve HTTP önbellek katmanlarında tutarlı veya farklı bir süre sonu mantığı kullanmanın avantajları ve dezavantajları.
Web tabanlı bir ödeme uygulamasını kaydetme
Web tabanlı bir ödeme uygulamasını müşterilerin tarayıcısına nasıl kaydedeceğinizi öğrenin. Ayrıca bu öğelerde nasıl hata ayıklayacağınızı da öğreneceksiniz.
Web tabanlı ödeme uygulamalarına genel bakış
Web tabanlı ödeme uygulamanızı Web Ödemeleri ile çalışacak ve müşterilere daha iyi bir kullanıcı deneyimi sunacak şekilde nasıl uyarlayacağınızı öğrenin.
Site hızı ve işletme metrikleri hakkında
Site hızının iş metrikleriniz üzerindeki etkisini değerlendirmek için A/B testinden yararlanın.
Sahadaki performansı incelemek için Chrome Kullanıcı Deneyimi Raporu'nu kullanma
Chrome Kullanıcı Deneyimi Raporu (eski adıyla CrUX), milyonlarca web sitesindeki gerçek kullanıcı deneyimi verilerinden oluşan, herkese açık bir veri kümesidir. Laboratuvar verilerinden farklı olarak CrUX verileri, sahaya dahil olmayı seçen kullanıcılardan gelir.
Gezinme isteklerini işleme
Gezinme istekleri, gezinme çubuğuna yeni bir URL girdiğinizde veya bir sayfadaki bağlantıyı izlediğinizde yapılan HTML istekleridir. Service Worker'ların performans üzerinde en büyük etkiyi yarattığı nokta budur: Ağı beklemeden yanıt vermek için bir hizmet çalışanı kullanarak gezinmelerin güvenilir bir şekilde hızlı ve esnek olmasını sağlayabilirsiniz.
Bir CSS satırında on modern düzen
Bu gönderide, oldukça fazla işlem gerektiren ve güçlü ve modern düzenler oluşturmanıza yardımcı olan birkaç etkili CSS satırı vurgulanmaktadır.
devicePixelContentBox ile piksel mükemmelliğinde oluşturma
Chrome 84 sürümünden itibaren ResizeObserver, öğenin boyutunu fiziksel piksel cinsinden ölçen cihaz-piksel-içerik-kutusu adı verilen yeni bir kutu ölçümünü destekler. Bu, özellikle yüksek yoğunluklu ekranlarda, piksel mükemmelliğinde grafikler oluşturmak için çok önemlidir.
web.dev CANLI özeti
3 günlük online topluluk etkinliğimizde duyurulan önemli haberlerin ve güncellemelerin özeti ve yaklaşan bölgesel etkinliklerle ilgili hatırlatma.
Oturum açma formu oluşturmak için platformlar arası tarayıcı özelliklerini kullanma
Güvenli, erişilebilir ve kullanımı kolay basit bir oturum açma formu oluşturmak için platformlar arası tarayıcı özelliklerini kullanın.
Oturum açma formuyla ilgili en iyi uygulamalar
Güvenli, erişilebilir ve kullanımı kolay oturum açma formları oluşturmak için platformlar arası tarayıcı özelliklerini kullanın.
Progresif Web Uygulamanızı kademeli olarak iyileştirin
Progresif Web Uygulamanızı tüm modern tarayıcılarda yararlı olacak şekilde kademeli olarak nasıl iyileştireceğinizi öğrenin, aynı zamanda dosya sistemi erişimi, sistem panosu erişimi, kişileri alma, periyodik arka plan senkronizasyonu, ekran uyanık kalma kilidi, web paylaşım özellikleri gibi yeni web özelliklerini destekleyen tarayıcılarda gelişmiş bir deneyim sunar.
Google Arama'da JavaScript sorunlarını gidermek için web geliştiricisi araçları
Bağımsız sayfalardaki veya bir sitenin tamamındaki SEO sorunlarında hata ayıklama.
Workbox ile esnek arama deneyimleri oluşturma
Arka Plan Senkronizasyonu ve Push API'sını kullanarak Workbox'ta esnek bir arama deneyimi oluşturma.
Web sayfasına medya ekleme
And etiketlerini kullanarak bir web sayfasına medya dosyası yerleştirebilirsiniz.
Daha önce hiç kimsenin bağlantı kurmadığı yerlerde kalın bağlantı oluşturun: Metin Parçaları
Metin Parçaları, URL parçasında bir metin snippet'i belirtmenizi sağlar. Bu tür bir metin parçası içeren bir URL'ye gidildiğinde, tarayıcı bunu vurgulayabilir ve/veya kullanıcının dikkatini çekebilir.
PWA'nızın bir uygulamaya daha benzer hale gelmesini sağlayın
Platforma özgü uygulama kalıplarını web teknolojileriyle nasıl uygulayacağınızı anlayarak progresif web uygulamanızı nasıl "gerçek" bir uygulama gibi hissettireceğinizi öğrenin.
İyi bir tarayıcı hatası bildirme
Tarayıcı satıcılarına tarayıcılarında, belirli bir cihaz veya platformda bulduğunuz sorunları bildirmek web platformunu daha iyi hale getirmenin ayrılmaz bir parçasıdır.
Performansı RAIL modeliyle ölçme
RAIL modeli, tasarımcıların ve geliştiricilerin, kullanıcı deneyimi üzerinde en yüksek etkiye sahip performans optimizasyonu çalışmalarını güvenilir bir şekilde hedeflemesini sağlar. RAIL modelinin hangi hedefleri ve yönergeleri belirlediğini ve bunları başarmak için hangi araçları kullanabileceğinizi öğrenin.
Quicklink ile React'ta gezinmeyi hızlandırın
Quicklink, boşta kaldığında görüntü alanı içi bağlantılarını önceden getirerek sonraki sayfa yüklemelerinin daha hızlı yapılmasını sağlayan bir kitaplıktır.
Meta Verileri Getirme özelliğiyle kaynaklarınızı web saldırılarına karşı koruyun
Meta Verileri Getirme, sunucuların kendilerini kaynaklar arası saldırılardan korumalarını sağlamak için tasarlanmış yeni bir web platformu özelliğidir.
İçerik yeniden sıralanıyor
CSS kullanarak bir düzen oluştururken klavyeyle gezinen kullanıcılar için bağlantısız bir deneyim oluşturmamaya dikkat etmeniz gerekir.
Chromium 84'te Web Animations API iyileştirmeleri
Web animasyonlarınızı düzenlemek çok daha kolay hale gelmek üzere.
Android ödeme uygulaması geliştiricileri kılavuzu
Android ödeme uygulamanızı Web Ödemeleri ile çalışacak şekilde nasıl uyarlayacağınızı ve müşterilere daha iyi bir kullanıcı deneyimi nasıl sağlayacağınızı öğrenin.
Ödeme işleminin ömrü
Satıcıların ödeme uygulamalarını nasıl entegre ettiğini, ödeme işlemlerinin Payment Request API ile nasıl çalıştığını ve Web Payments'ta nelerin mümkün olduğunu öğrenin.
Ödeme uygulamalarını Web Ödemeleri ile destekleme
Web Payments, web'de sorunsuz bir ödeme deneyimi sunmayı amaçlar. Nasıl çalıştığını ve avantajlarını öğrenin ve ödeme uygulamanızı Web Payments ile entegre etmeye hazırlanın.
Chromium 83'teki macOS system-ui yazı tipi için daha fazla değişken yazı tipi seçenekleri
Chromium 80'in macOS'te sistem arayüzü yazı tipi ağırlığı regresyonu vardı. Bozulmasının nedeni ve yeni süper güç, Chromium 83'te beklemeye değer.
Progresif Web Uygulamaları işletmelerin başarısını nasıl artırabilir?
PWA'nız için sağlam bir iş gerekçesi oluşturun. Ne zaman yatırım yapmanız gerektiğini ve yatırımınızın başarısını nasıl ölçebileceğinizi öğrenin.
Uygulama kısayollarıyla işlerinizi hızlıca tamamlayın
Uygulama kısayolları, kullanıcıların sık ihtiyaç duydukları birçok yaygın işleme hızlı erişim sağlar.
AppCache'i kaldırmaya hazırlanma
Chrome ve diğer tarayıcıların AppCache'i kaldırma planıyla ilgili ayrıntılar.
Yükleme stratejinizi belirleme
Yükleme oranlarını artırıp platform rekabetini ve kendi gelirini olumsuz etkilemeyi önlemek için farklı yükleme tekliflerini birleştirmeyle ilgili en iyi uygulamalar.
Kalıcı depolama alanı
Kalıcı depolama, kritik verilerin çıkarılmasına karşı korunmasına yardımcı olabilir ve veri kaybı ihtimalini azaltabilir.
CommonJS paketlerinizi nasıl büyütüyor?
CommonJS modülleri son derece dinamik olduğundan JavaScript optimize edicilerin ve paketlerin bunlar üzerinde gelişmiş optimizasyonlar yapması engellenir.
Güçlü özellikler için neden "köşeler arası erişime kapalı" olması gerekir?
Bazı web API'leri, Spectre gibi yan kanal saldırıları riskini artırır. Bu riski azaltmak amacıyla tarayıcılar, kökler arası erişime kapalı olarak adlandırılan bir tercihe dayalı yalıtılmış ortam sunar. "SharedArrayBuffer", "performance.measureUserAgentspecificMemory()" ve yüksek çözünürlüklü zamanlayıcı gibi güçlü özellikleri daha yüksek hassasiyetle kullanmak için neden çapraz kaynak izolasyonunun gerekli olduğunu öğrenin.
Chrome'da Web Ses uygulamalarının profilini oluşturma
Chrome Geliştirici Araçları'ndaki "about://tracing" ve **WebAudio** uzantısını kullanarak Chrome'da Web Audio uygulamalarının performansının nasıl profilini çıkaracağınızı öğrenin.
Ayrıntılı ögelemeyle, Next.js ve Gatsby sayfa yükleme performansı iyileştirildi
Hem Next.js hem de Gatsby'nin, yinelenen kodu en aza indirmek ve sayfa yükleme performansını iyileştirmek için derleme çıktılarını nasıl iyileştirdiğini öğrenin
"Aynı site" ve "aynı kaynak"
"aynı-site" ve "aynı kaynak" sık sık alıntılanan ancak genellikle yanlış anlaşılan terimlerdir. Bu sayfada bunların ne olduğu ve farkları açıklanmaktadır.
Web sayfanızın toplam bellek kullanımını measurementUserAgentspecificMemory() ile izleyin
Regresyonları tespit etmek için web sayfanızın üretim sürümünde bellek kullanımını nasıl ölçeceğinizi öğrenin.
COOP ve COEP kullanarak web sitenizi "kökenler arası erişime kapalı" hale getirme
Bazı web API'leri, Spectre gibi yan kanal saldırıları riskini artırır. Bu riski azaltmak amacıyla tarayıcılar, kökler arası erişime kapalı olarak adlandırılan bir tercihe dayalı yalıtılmış ortam sunar. Böyle bir ortam oluşturmak için COOP ve COEP'yi kullanın ve "SharedArrayBuffer", "performance.measureUserAgentspecificMemory()" veya daha yüksek hassasiyete sahip yüksek çözünürlüklü zamanlayıcı gibi güçlü özellikleri etkinleştirin.
web.dev mühendislik blogu 1: Siteyi nasıl oluşturuyoruz ve Web Bileşenleri'ni nasıl kullanıyoruz?
web.dev mühendislik ekibinin bu ilk yayınında, Eleventy ve Web Bileşenleri kullanımı da dahil olmak üzere siteyi nasıl oluşturduğumuz hakkında bilgi edinin.
Renk şeması CSS özelliği ve karşılık gelen meta etiketle koyu mod varsayılan stili iyileştirildi
Renk şeması CSS özelliği ve karşılık gelen meta etiket, geliştiricilerin sayfalarında kullanıcı aracısı stil sayfasının temaya özgü varsayılanlarını (ör. form kontrolleri, kaydırma çubukları ve CSS sistem renkleri) etkinleştirmelerini sağlar. Aynı zamanda, bu özellik tarayıcıların kendi başlarına dönüşüm uygulamasını da engeller.
Web sitenizin COVID-19 sürecinde herkes tarafından erişilebilir ve kullanılabilir olmasını sağlayın
Web sitenizin temel işlevlerinin her zaman kullanılabilir, erişilebilir, güvenli, kullanılabilir, bulunabilir ve hızlı olmasını sağlama.
Erişilebilir duyarlı tasarım
Çoklu cihazlarda en iyi deneyimi sunmak için duyarlı tasarım yapmanın iyi bir fikir olduğunu biliyoruz. Ancak, duyarlı tasarımın erişilebilirlik açısından da bir kazanç sağladığı söylenebilir.
Renk ve kontrast erişilebilirliği
Renk ve kontrast kullanımınızı iyileştirerek sayfalarınızı nasıl daha erişilebilir hale getirebileceğinizi öğrenin.
Aşırı yüklenmiş sunucuyu düzeltme
Sunucu performans sorununu belirleme, bu sorunu hızlıca giderme, sunucu performansını iyileştirme ve regresyonları önleme.
Erişilebilir dokunma hedefleri
Mobil veya dokunmatik ekranlı bir cihazda kullanıldığında etkileşimli öğelerin etraflarında yeterli alan olması önemlidir. Bu, başta motor bozukluğu olanlar olmak üzere herkese yardımcı olacaktır.
Güvenilir Türler ile DOM tabanlı siteler arası komut dosyası oluşturma güvenlik açıklarını önleyin
Modern web uygulamalarında DOM tabanlı siteler arası komut dosyası oluşturmayı engelleyen bir tarayıcı API'si olan Trusted Types ile tanışın.
Android uygulamanızda PWA (Progresif Web Uygulaması) kullanma
Android uygulamasında progresif web uygulaması (pwa) açma.
İsteğe bağlı yazı tiplerini önceden yükleyerek düzen kaymasını ve görünmez metnin (FOIT) yanıp sönmesini önleyin
Chrome 83, oluşturma döngülerini optimize ederek isteğe bağlı yazı tiplerini önceden yüklerken düzen kaymasını ortadan kaldırır. font-display: optional ile birleştirme, özel yazı tiplerinin sorunsuz oluşturulmasını sağlamanın en etkili yoludur.
İmzalanmış HTTP Takasları (SXG) nginx kullanılarak nasıl dağıtılır?
nginx kullanarak SXG dosyalarını alma ve yayınlama ve alt kaynağı önceden getirmenin zorlukları.
nginx kullanarak İmzalanmış HTTP Değişimleri (SXG) ayarlama
SXG uzantılarıyla TLS sertifikası oluşturma, SXG dosyaları oluşturmak için araçları yükleme ve SXG dosyalarını sunmak için nginx'i yapılandırma.
CSS arka plan resimlerini medya sorgularıyla optimize etme
Yeterli boyutta resimler göndermek için medya sorgularını kullanın. Bu teknik, genellikle duyarlı resimler olarak bilinir.
Web sitesi hızını işlevler arası sorunları çözme
Diğer departmanlar web sitesi hız optimizasyonu projenizin daha büyük bir başarıya ulaşmasına nasıl yardımcı olabilir?
Düzen değişikliklerinden sonra kaydırma yapışma
Chrome 81'den itibaren, sayfa düzeni değiştiğinde kaydırma çubukları sabitlenmiş olarak kalır. Başka bir deyişle, zorla yeniden tutturma işlemi için artık etkinlik işleyicileri eklemenize gerek yoktur.
Web Paketleyici'yi kullanarak İmzalı Takasları ayarlama
Web Paketleyici'yi kullanarak imzalı takasların (SXG'ler) nasıl sunulacağını öğrenin.
Kendi uygulama içi yükleme deneyiminizi sunma
Kullanıcılarınıza özel, sorunsuz bir uygulama içi yükleme deneyimi sunmak için beforeinstallprompt etkinliğini kullanın.
Sanal nesneleri gerçek dünya görünümlerinde konumlandırma
WebXR Hit Test API, sanal nesneleri gerçek dünyada yaşamanıza olanak tanıyan, web'in artırılmış gerçeklik özelliğinde yapılan bir geliştirmedir.
Artırılmış gerçeklik: Bunu zaten biliyor olabilirsiniz
WebXR Device API'yi daha önce kullandıysanız öğrenebileceğiniz çok az yeni şey olduğunu bilmekten memnun olacaksınız. WebXR oturumuna girme işlemi büyük ölçüde aynıdır. Kare döngüsü çalıştırılması büyük ölçüde aynıdır. Farklılıklar, içeriğin artırılmış gerçeklik için uygun şekilde gösterilmesine izin veren yapılandırmalardan kaynaklanır.
Sanal gerçeklik web'e geliyor, 2. bölüm
Sanal gerçeklik, Chrome 79'da web'e girdi. WebXR Device API'yi temel alan bu lansman, hem artırılmış hem de sanal gerçekliğin temelini oluşturmaktadır. Bu makale, bir XR oturumunun izleyicilere gösterildiği kısmı olan kare döngüsüne odaklanılan, serinin ikinci bölümüdür. Yakında başka tarayıcılar da WebXR Device API'yi destekleyecektir. Bu tarayıcılar arasında Firefox Reality, Oculus Tarayıcı, Edge ve Magic Leap Helio tarayıcısı gibi bazı tarayıcılar da yer alacaktır.
Web çerçevesi ekosistemini geliştirme
Chrome'un JavaScript ekosistemini ilerletmek için çeşitli açık kaynaklı araçlara nasıl yatırım yaptığını öğrenin
Progresif Web Uygulamaları nedir?
Progresif Web Uygulamaları'na (PWA) ve bunları diğer web uygulamalarından ayıran üç dayanağa giriş.
Workbox ile PWA'ları yerleşik paylaşım kullanıcı arayüzlerine entegre edin
Progresif Web Uygulamanızın, platforma özel uygulamaların yanı sıra sistem düzeyinde paylaşım kullanıcı arayüzlerinde görünmesi için Workbox'ta rotaları kaydetme.
PWA'larda maskelenebilir simgelerle uyarlanabilir simge desteği
Maskelenebilir simgeler, size daha fazla kontrol sağlayan ve progresif web uygulamanızın uyarlanabilir simgeler kullanmasına olanak tanıyan bir biçimdir. Maskelenebilir simgeler tüm Android cihazlarda harika görünebilir.
Eşzamanlı XMLHttpRequest() işlevinde sayfa kapatmayı iyileştirme
Kullanıcı sayfayı kapattığında bir sayfada veya uygulamada, gönderilmemiş analizler ya da başka veriler olması yaygın bir durumdur. Siteler, verileri sunucuya iletilene kadar sayfanın veya uygulamanın açık kalmasını sağlamak için XMLHttpRequest() için eşzamanlı bir çağrı kullanır. Kullanıcı deneyimine zarar verir ve veri tasarrufunun daha iyi yollarını göz ardı eder. Chrome 80, bu sorunu gidermek için yakın zamanda bir spesifikasyon değişikliği uyguluyor.
Modül çalışanlarıyla web'de mesaj dizisi oluşturma
Modül çalışanları, standart JavaScript modüllerinin ergonomik ve performans avantajlarını korurken pahalı bir kodu arka plandaki bir iş parçacığına taşıyarak ana iş parçacığının engellemesinin kaldırılmasını kolaylaştırır.
Hız aracıyla ilgili gelişmeler: Chrome Geliştirici Zirvesi 2019'da öne çıkanlar
Yeni performans metrikleri, PageSpeed Insights ve Chrome Kullanıcı Deneyimi Raporu (CrUX) güncellemelerinin yanı sıra web ekosisteminin Web Almanak analizinden elde edilen bilgiler dahil olmak üzere hız araçlarındaki en son gelişmeler hakkında bilgi edinin.
Uyarlanabilir yükleme: Yavaş cihazlarda web performansını iyileştirme
Uyarlanabilir yükleme kalıbı, bunun nasıl uygulanacağı ve Facebook, Tinder, eBay ve diğer şirketlerin üretimde uyarlanabilir yüklemeyi nasıl kullandığı hakkında bilgi edinin.
JavaScript'i tarayıcının ana iş parçacığı dışında çalıştırmak için web çalışanlarını kullanın
Tarayıcının ana iş parçacığı aşırı derecede fazla çalışıyor. Kodu ana ileti dizisinden kaldırmak için web çalışanlarını kullanarak uygulamanızın güvenilirliğini ve kullanıcı deneyimini önemli ölçüde iyileştirebilirsiniz.
2019 yaz resim optimizasyonu anketinden alınan geri bildirimler
Anket katılımcılarının çeşitli görsel optimizasyon teknikleri hakkındaki yorumları.
Push bildirimleri sunucusu oluşturma
Bu codelab'de push bildirimleri sunucusu oluşturmayı öğrenin.
Next.js ile varsayılan performans
Next.js, React uygulamanızdaki birçok optimizasyonu sizin yerinize yapar. Next.js, yerleşik bir dizi performans optimizasyonuna sahip, belirli bir bakış açısına sahip bir React çerçevesidir. Çerçevenin temel fikri, bu özelliklerin varsayılan olarak
AMP, Next.js uygulamanızda hızı nasıl garanti edebilir?
Next.js uygulamanızda AMP'yi desteklemenin avantajları ve dezavantajları hakkında bilgi edinin AMP, hızlı sayfa yüklemelerini garanti eden bir web bileşeni çerçevesidir. Next.js, AMP için yerleşik desteğe sahiptir. Bu kılavuzda öncelikle AMP'nin
Next.js'de dinamik içe aktarmalarla kod bölme
Kod bölme ve akıllı yükleme stratejileriyle Next.js uygulamanızı hızlandırma. Bu yayında, farklı kod bölme türleri ve Next.js uygulamalarınızı hızlandırmak için dinamik içe aktarma işlemlerinin nasıl kullanılacağı açıklanmaktadır. Next.js, varsayılan
Web Paylaşımı API'si ile işletim sistemi paylaşımı kullanıcı arayüzü ile entegrasyon
Web Paylaşımı API'si sayesinde web uygulamaları, sistem tarafından sağlanan paylaşım özelliklerini platforma özgü uygulamalarla aynı şekilde kullanabilir. Web Paylaşımı API'si, web uygulamalarının cihazda yüklü diğer uygulamalarla platforma özel uygulamalarla aynı şekilde bağlantı, metin ve dosya paylaşmasına olanak tanır.
Next.js'de yönlendirme önceden getirme
Next.js, rota ön yükleme özelliğiyle gezinmeyi nasıl hızlandırır ve bu özelliği nasıl özelleştirebilirsiniz? Bu yayında, Next.js'de yönlendirmenin nasıl çalıştığını, hız için nasıl optimize edildiğini ve ihtiyaçlarınıza en uygun şekilde nasıl
Sanal gerçeklik web'e geliyor
Sanal gerçeklik, Chrome 79'da web'e girdi. WebXR Devicer API'yi temel alan bu lansman, hem artırılmış hem de sanal gerçekliğin temelini oluşturmaktadır. Bu makale, temel kavramların ele alındığı ve XR oturumuna nasıl girileceğinin açıklandığı bu serinin ilk bölümüdür. Yakında başka tarayıcılar da WebXR Device API'yi destekleyecektir. Bu tarayıcılar arasında Firefox Reality, Oculus Tarayıcı, Edge ve Magic Leap Helio tarayıcısı gibi bazı tarayıcılar da yer alacaktır.
SameSite kurabiye tarifleri
Siteler artık çerezleri siteler arası kullanım için açıkça işaretleyebilir. Bu değişiklik uygulandıktan sonra birinci taraf ve üçüncü taraf çerezlerinizin çalışmaya devam etmesini sağlamak için çerezlerinizi nasıl işaretleyeceğinizi öğrenin.
Çerezleri anlama
Çerezlerin nasıl çalıştığı ve birinci taraf ve üçüncü taraf çerezleri hakkında bilgi edinin.
Hızlı reklamlar önemlidir
Hızlı reklamların değerini ve reklam hızı üzerine nasıl düşünmeniz gerektiğini anlayın.
Kullanıcılarla etkileşime geçmek ve kullanıcılarla yeniden etkileşime geçmek için push bildirimlerini kullanma
Hedeflenmiş, zamanında yapılan güncellemelerle kullanıcılarla etkileşime geçmek için push bildirimlerini kullanın.
Bildirimler API'sini kullanmaya başlama
Bu codelab'de kullanıcı izni isteme ve bildirim gönderme hakkında bilgi edinin.
Bildirimleri yönetmek için Service Worker kullanma
Bu codelab'de, Service Worker ile bildirimleri nasıl yöneteceğinizi öğrenebilirsiniz.
Düzen kararsızlığını düzeltme
Düzen kararsızlığı sorunlarını tanımlamak ve düzeltmek için WebPageTest'i kullanma kılavuzu.
Özellikli telefonlarda bile bir web uygulamasını hızlı yükleme teknikleri
Özellikli telefonlar yeniden canlanıyor ve 2G'nin norm olduğu gelişmekte olan pazarlarda popüler hale geliyor. Mobil Minesweeper klonu PROXX'un 2G özellikli telefonlarda hızlı yüklenmesini sağlayarak öğrendiklerimizi sizinle paylaşıyoruz.
Houdini'nin yeni API'si ile daha akıllı özel mülkler
Kullanışlı olsalar da, herhangi bir değeri alıp geçersiz kılınabildikleri ve bunlarla geçiş kullanamayacağınız için CSS değişkenlerinin kullanılması zordur. CSS Mülkleri ve Değerler API'si Düzey 1, bu sorunların üstesinden gelir.
Gelecekteki gezinmeleri hızlandırmak için kaynakları önceden yükleme
rel=prefetch kaynak ipucu ve bu ipucunun nasıl kullanılacağı hakkında daha fazla bilgi edinin.
Önceden getirmenin iki yolu: <link> etiketleri ve HTTP üstbilgileri
Kaynakları önceden getirerek gelecekteki gezinmeleri nasıl hızlandıracağınızı öğrenin.
Karma içerik düzeltiliyor
Kullanıcıları korumak ve tüm içeriğinizin yüklendiğinden emin olmak için web sitenizdeki karma içerik hatalarını nasıl düzelteceğinizi öğrenin.
Karma içerik nedir?
Karma içerik, ilk HTML güvenli bir HTTPS bağlantısı üzerinden yüklenirken, ancak diğer kaynaklar güvenli olmayan bir HTTP bağlantısı üzerinden yüklendiğinde ortaya çıkar.
Web için temel videolarla resimlerin ötesine geçin
Araştırmalar, web videolarının daha fazla etkileşim ve satış sağladığını gösteriyor. Henüz sitelerinize video eklememiş olsanız bile videonun eklenmesine yalnızca zaman kalır.
Progresif Web Uygulamanıza Apple dokunma simgesi ekleme
iOS ana ekranlarında hangi simgenin gösterileceğinin nasıl belirtileceğinin etkileşimli gösterimi.
Hazır Oynatıcı Web
Web platformu günümüzde oyun geliştirme için son derece olgunlaşmış durumda. Modern bir web oyunu geliştirmenin anahtarı, oyun tasarımı ve para kazanmayla ilgili en iyi uygulamaları benimsemektir. Bu gönderi, söz konusu hedefe yönelik yol gösterici bilgiler sağlamaktadır.
Çok kaynaklı sitelerdeki progresif web uygulamaları
Çok kaynaklı mimariler, PWA'ları oluştururken birçok zorluk yaratır. Birden fazla kaynağın iyi ve kötü kullanımlarını keşfedin, birden çok kaynak içeren sitelerde PWA'lar oluşturmaya yönelik bazı geçici çözümleri keşfedin.
Web yazı tipi boyutunu küçült
Bu yayında, iyi bir yazı tipinin yavaş olduğu anlamına gelmemesi için sitenizde kullandığınız WebFonts'un boyutunu nasıl küçülteceğiniz açıklanmaktadır.
WebFont'un yüklenmesini ve oluşturulmasını optimize edin
Bu yayında, sayfa yüklendiğinde WebFonts kullanılamadığında düzen kaymalarını ve boş sayfaları önlemek için WebFonts'un nasıl yükleneceği açıklanmaktadır.
Angular KSA ile Progresif Web Uygulaması oluşturma
Yüklenebilir progresif Angular uygulamaları oluşturmayı öğrenin.
Üçüncü taraf JavaScript'i verimli bir şekilde yükleyin
Üçüncü taraf komut dosyalarını kullanırken karşılaşılan yaygın tuzaklardan kaçınarak yükleme sürelerini ve kullanıcı deneyimini nasıl iyileştireceğinizi öğrenin.
Yavaş üçüncü taraf JavaScript'i tanımlama
Yavaş üçüncü taraf kaynaklarını tespit etmek için Lighthouse ve Chrome Geliştirici Araçları'nı nasıl kullanacağınızı öğrenin.
Resimleri optimize etmek için resim CDN'lerini kullanma
Sitenizin görüntülerini optimize etmek ve kullanıcılarınız için veri maliyetini azaltmak üzere bir görüntü CDN'si kullanmayı düşünün.
Üçüncü taraf JavaScript performansı
Bu gönderide, yaygın olarak kullanılan üçüncü taraf JavaScript türleri ve bunların neden olabileceği performans sorunları açıklanmaktadır. Ayrıca, üçüncü taraf komut dosyalarının nasıl optimize edileceği hakkında genel yönergeler sağlar.
Üçüncü taraf JavaScript'i optimize edin
Lighthouse'un yardımıyla yavaş üçüncü taraf kaynaklarını optimize etme teknikleri hakkında bilgi edinin.
Daha özellikli form kontrolleri
Yeni web platformu özellikleri, yerleşik form kontrolleri gibi çalışan özel öğeler oluşturmayı kolaylaştırır.
Algılanan sayfa hızını iyileştirmek için ağ bağlantılarını erkenden oluşturun
rel=preconnect ve rel=dns-prefetch kaynak ipuçları ve bunların nasıl kullanılacağı hakkında bilgi edinin.
Arka plan filtresiyle OS tarzı arka planlar oluşturun
CSS arka plan filtresi özelliğini kullanarak web'deki kullanıcı arayüzü öğelerine bulanıklaştırma ve şeffaflık gibi arka plan efektlerini nasıl ekleyeceğinizi öğrenin.
Yeniden doğrulama yöntemiyle eski içeriği güncel tutma
Eski İçeriği Yeniden Doğrulama özelliği, geliştiricilerin aciliyet (önbelleğe alınmış içeriğin hemen yüklenmesi) ile güncellik arasında denge kurmasına yardımcı olur. Böylece, önbelleğe alınan içerikte yapılan güncellemelerin gelecekte kullanılması sağlanır.
Angular CDK ile büyük listeleri sanallaştırın
Angular Bileşen Geliştirme Kiti ile sanal kaydırma uygulayarak büyük listeleri nasıl daha duyarlı hale getireceğinizi öğrenin.
Angular'da rota önceden yükleme stratejileri
Daha hızlı uygulamalar için Angular'ın önceden yükleme stratejilerini nasıl kullanacağınızı öğrenin.
Angular'ın değişiklik algılamasını optimize etme
Angular uygulamanızın değişiklik algılama özelliğini daha duyarlı hale getirmek için nasıl optimize edeceğinizi öğrenin.
Tahmine dayalı önceden getirme özelliğiyle web'de daha hızlı gezinme
Kod bölme, uygulamalarınızı hızlandırmanızı sağlar ancak sonraki gezinmeyi yavaşlatabilir. Tahmine dayalı önceden getirme, kullanıcının bir sonraki kullanma olasılığının yüksek olduğu içeriği akıllı bir şekilde önceden getirmek ve ağ kullanımını optimize etmek için veri analizini kullanmanın etkili bir yoludur.
Ağ kalitesine bağlı olarak videoyu resim sunmaya uyarlayın
İçeriğinizi ağ kalitesine göre uyarlamak için Network Information API'yi nasıl kullanacağınızı öğrenin.
Kodlayıcı ile Angular uygulamanızın erişilebilirliğini denetleyin
Codelyzer kullanarak Angular uygulamanızı nasıl erişilebilir hale getireceğinizi öğrenin.
Angular KSA ile performans bütçeleri
Performans bütçelerini doğrudan Angular KSA'da nasıl kullanacağınızı öğrenin.
Angular hizmet çalışanı ile önbelleğe alma
Uygulamanızdaki statik öğeleri önbelleğe almak için Angular hizmet çalışanını nasıl kullanacağınızı öğrenin.
Preferreds-color-scheme: "Merhaba karanlık, eski dostum
Birçok cihaz artık işletim sistemi genelinde koyu modu veya koyu tema deneyimini desteklemektedir. Bu gönderide, web sayfalarında koyu modun nasıl desteklenebileceği açıklanmakta, en iyi uygulamalar listelenmektedir ve web geliştiricilerinin kullanıcılara belirli web sayfalarında işletim sistemi düzeyindeki tercihlerini geçersiz kılma imkanı sunmasını sağlayan koyu mod-açma/kapatma adlı özel öğe tanıtılmaktadır.
Başlayın: Angular uygulamasını optimize etme
Angular uygulamanızı nasıl daha hızlı, daha güvenilir, bulunabilir, yüklenebilir ve erişilebilir hale getireceğinizi öğrenin.
Angular'da rota düzeyinde kod bölme
Rota düzeyinde kod bölme işlevini kullanarak ilk uygulama paketinizi nasıl küçülteceğinizi öğrenin.
Web performansı için en iyi ipuçları
Doğru resim boyutunu otomatik olarak seçmek için srcset özelliğini kullanın.
Web bileşenleri: Web'in güçlenmesine yardımcı olan gizli bileşen
Bu gönderi, Polymer Project'ten Kevin Schaaf ve Salesforce'tan Caridy Patiño tarafından verilen 2019 yılında web bileşenlerinin durumuyla ilgili bir konuşmayı özetlemektedir.
Performans bütçeleri için Lighthouse'u kullanma
Lighthouse artık performans bütçelerini destekliyor. LightWallet adlı bu özellik beş dakikadan kısa bir sürede kurulabilir ve sayfa kaynaklarının boyutu ve miktarıyla ilgili feedvack sağlar.
Web Payments API'lerinde yapılan güncellemeler
Chrome 53'te Payment Request API'nin ve Chrome 68'de Payment Handler API'nin kullanıma sunulmasından bu yana bu özelliklerle ilgili epey değişiklik yapıldı. Bu gönderide, söz konusu güncellemeler özetlenmektedir ve API değişiklikleri birikmeye devam edecektir.
Hızın değeri
Pazarlama kampanyaları gibi harici faktörleri hariç tutarak site iyileştirmelerinin oluşturduğu geliri gösterir.
Masaüstünde Progresif Web Uygulamaları İçin Adres Çubuğu Yüklemesi
Chrome'un adres çubuğuna (çok amaçlı adres çubuğu) eklenen yeni bir yükle düğmesiyle progresif web uygulamalarını kolayca yükleyebilirsiniz.
Performans, dönüşümü nasıl artırabilir?
Web sitesi performansının e-ticaret dönüşüm hunisinin farklı bölümleri üzerindeki etkisini öğrenin
Kullanıcılara PWA'mın yüklenebilir olduğunu nasıl bildiririm?
Progresif Web Uygulamaları ve en iyi uygulamaların yüklenmesini teşvik etme.
Hizmet çalışanı düşünce yapısı
Service Worker'larla çalışmak çoğu web geliştiricisi için yeni ve alışılmadık bir durumdur. Bu gönderide, konular hakkında fikir sahibi olmanıza yardımcı olacak bazı ipuçları sunuluyor.
PWA (Progresif Web Uygulaması) yüklemeyi teşvik etme şablonları
Progresif Web Uygulamaları ve en iyi uygulamaların yüklenmesini teşvik etme.
Hızlı yükleme süreleri ve daha fazlası için resim politikaları
Resimler önemli miktarda görsel alan kaplar ve web sitesinde indirilen baytların büyük bir kısmını oluşturur. Aşırı büyük resimleri belirlemek için yeni özellik politikalarını kullanın.
Kritik ile kritik CSS'leri ayıklama ve satır içine alma
Kritik CSS'leri çıkarıp satır içine almak ve oluşturma sürelerini iyileştirmek için "Kritik" özelliğini nasıl kullanacağınızı öğrenin.
Uzun JavaScript görevleri Etkileşime Hazır Olma Sürenizi geciktiriyor mu?
Maliyetli, işi önleyen kullanıcı etkileşimini teşhis etmeyi öğrenin.
Kritik CSS'leri ayıklama
Kritik CSS tekniğiyle oluşturma sürelerini iyileştirmeyi ve projeniz için en iyi aracı seçmeyi öğrenin.
Geniş ölçekte hız: Web performansındaki yenilikler neler?
Google I/O 2019'da, herkes için daha iyi kullanıcı deneyimi sağlayacağını umduğumuz üç yeni Web Performansı girişimini tanıttık.
PROXX ile tanışın
PWA olarak geliştirilmiş mayın tarlası benzeri bir oyun olan PROXX. Bu özellik çok çeşitli cihazlarda çalışır ve cihaz ne kadar yetenekliyse görsel görünümü de kademeli olarak iyileştirir.
SameSite çerezleri hakkında açıklama
SameSite özelliğiyle birinci taraf ve üçüncü taraf kullanımı için çerezlerinizi işaretlemeyi öğrenin. CSRF saldırılarına karşı korumayı iyileştirmek için SameSite’nin Lax ve Strict değerlerini kullanarak sitenizin güvenliğini artırabilirsiniz. Yeni None özelliğini belirtmeniz, çerezlerinizi siteler arası kullanım için açıkça işaretlemenize olanak tanır.
Web Algısı Araç Seti ile görsel arama
Kullanıcılar kameralarını kullanarak sitenizde arama yapabilse güzel olmaz mıydı?
Ağ kalitesine göre uyarlanabilir sunum
Kullanıcılara sunulan öğeleri, bağlantı kalitesine göre uyarlamak için Network Information API'yi kullanın.
Portallar ile uygulamalı: web'de sorunsuz gezinme
Yeni önerilen Portals API, özel geçişlerle sorunsuz gezinmeye olanak sağlarken kullanıcı arabiriminizi basit tutmanıza yardımcı olur. Bu makalede, sitenizde kullanıcı deneyimini iyileştirmek için Portal'ları kullanma konusunda uygulamalı deneyim elde edin.
Brotli ile ağ yüklerini küçültün ve sıkıştırın
Bu codelab'de, Brotli sıkıştırmasının sıkıştırma oranlarını ve uygulamanızın genel boyutunu nasıl daha da küçültebileceğini öğrenin.
I/O 2019'da web.dev
Web.dev ekibi, Google I/O 2019 için yeni bir tasarım, daha fazla Lighthouse belgesi ve yepyeni bir blog dahil olmak üzere bir dizi güncelleme gönderdi.
Nasıl hızlı kalınır?
Hızı optimize eden markalar genellikle hızlı bir şekilde geri çekileni fark eder. Bu gönderide, hızlı deneyiminizi nasıl hızlandıracağınızı ele alacağız.
Hız nedir?
Hız önemlidir ancak tam olarak ne kastediyoruz? Hızlı bir siteye sahip olmak ne demektir?
Hız nasıl ölçülür?
Gerçek dünya performansı, kullanıcıların cihazları, ağ bağlantıları ve diğer faktörlerdeki farklılıklardan dolayı oldukça değişkendir. Bu yayında, sayfa performansını değerlendirmek için laboratuvar veya alan verilerini toplamanıza yardımcı olabilecek araçları keşfedeceğiz.
Create React App ile bir web uygulaması manifesti ekleme
Create React Uygulaması, varsayılan olarak bir web uygulaması manifesti içerir. Bu dosyada değişiklik yapmak, uygulamanızın kullanıcının cihazına yüklendiğinde görüntülenme şeklini değiştirmenize olanak tanır.
Tepki penceresi ile büyük listeleri sanalleştirin
tepki-penceresi, büyük listelerin verimli bir şekilde oluşturulmasına olanak tanıyan bir kitaplıktır.
React.lazy ve Suspense ile kod bölme
React.lazy yöntemi, dinamik içe aktarma işlemleri kullanarak React uygulamasının bileşen düzeyinde kod bölünmesini kolaylaştırır. Kullanıcılarınıza uygun yükleme durumlarını göstermek için "Büyüme" ile birlikte kullanın.
react-axe ve eslint-plugin-jsx-a11y ile erişilebilirlik denetimi
tepki-axe, bir React uygulamasını denetleyen ve erişilebilirlik sorunlarını Chrome DevTools konsoluna kaydeden bir kitaplıktır. eslint-plugin-jsx-a11y, çeşitli erişilebilirlik kurallarını doğrudan JSX'inizde tanımlayıp uygulayan bir ESLint eklentisidir. Bunların birlikte kullanılması, uygulamanızdaki erişilebilirlikle ilgili endişeleri bulmak ve gidermek için kapsamlı bir denetim yaklaşımı sağlayabilir.
Create React Uygulamasında Workbox ile Önbelleğe Alma
Çalışma kutusu, her derlemede uygulamanızdaki tüm statik öğeleri önbelleğe alan varsayılan bir yapılandırmaya sahip olan Create React Uygulamasında yerleşik olarak bulunur.
Tepki tutturma özellikli rotaları önceden oluşturma
tepki-snap, sitenizdeki sayfaları statik HTML dosyalarına önceden oluşturan üçüncü taraf bir kitaplıktır. Bu, uygulamanızdaki İlk Boyama sürelerini iyileştirebilir.
Başlayın: React uygulamanızı optimize etme
React, kullanıcı arayüzü oluşturmayı kolaylaştıran açık kaynaklı bir kitaplıktır. Bu öğrenme rotasında, ekosistemde yer alan ve uygulamanızın performansını ve kullanılabilirliğini iyileştirmek için kullanmanız gereken farklı API'ler ve araçlar ele alınmaktadır.
Codelab: Yükleme hızını iyileştirmek için önemli öğeleri önceden yükleme
Bu codelab'de kaynakları önceden yükleyerek ve önceden getirerek sayfaların performansını nasıl iyileştireceğinizi öğrenin.
azaltılmış-hareketi tercih eder: Bazen daha az hareket daha çok
Tercih edilen azaltılmış hareket medya sorgusu, kullanıcının sistemin kullandığı animasyon veya hareket miktarını en aza indirmesini isteyip istemediğini algılar. Bu, küçültülmüş animasyonlara ihtiyaç duyan veya bunları tercih eden kullanıcılar içindir; Örneğin vestibüler rahatsızlığı olan kişiler, genellikle animasyonların minimum düzeyde tutulmasını tercih eder.
Kritik olmayan CSS'leri ertele
Kritik Oluşturma Yolu'nu optimize etmek ve İlk Zengin İçerikli Boyama'yı (FCP) iyileştirmek amacıyla kritik olmayan CSS'leri nasıl erteleyeceğinizi öğrenin.
Güvenmek iyidir, gözlem daha iyi: Intersection Observer v2
Intersection Observer v2 yalnızca kesişimleri kendi başına gözlemlemekle kalmayıp kesişen öğenin kesişim sırasında görünür olup olmadığını da tespit etme özelliğini ekler.
Duyarlı web tasarımıyla ilgili temel bilgiler
Görüntülendikleri cihazın ihtiyaçlarına ve özelliklerine uygun siteler oluşturun.
Yapılandırılabilir Stil Sayfaları
Yapılandırılabilir Stil Sayfaları, FOUC endişesi yaşamadan stiller oluşturmanın ve dokümanlara veya gölge köklerine dağıtmanın sorunsuz bir yolunu sağlar.
Web'de oluşturma
Uygulamalarda mantık uygulama ve oluşturma ile ilgili öneriler.
Derleme sürecinize performans bütçelerini dahil edin
Performans bütçenizi takip etmenin en iyi yolu, bütçenizi otomatikleştirmektir. İhtiyaçlarınıza ve mevcut ayarlarınıza en uygun aracı nasıl seçeceğinizi öğrenin.
Travis CI ile paket boyutunu kullanma
Minimum kurulumla performans bütçelerini tanımlayın ve Travis CI ile paket boyutunu kullanarak bunları geliştirme iş akışınızın bir parçası olarak uygulayın.
Webpack ile performans bütçeleri belirleme
Webpack ile performans bütçelerini ayarlamayı ve paket boyutunuzu kontrol altında tutmayı öğrenin.
Performans bütçesi belirlemek için Lighthouse Bot'u kullanma
Hızlanmak için çok çalıştınız. Şimdi Lighthouse Bot ile Travis CI'da performans testini otomatik hale getirerek hızınızı koruduğunuzdan emin olun.
Emscripten ve npm
WebAssembly'yi bu kuruluma nasıl entegre edebilirsiniz? Bu makalede, örnek olarak C/C++ ve Emscripten kullanarak bu durumu çözeceğiz.
Uygulamanız yüklü mü? getInstallInstallRelatedApps() bunu size bildirir!
getUploadRelatedApps() API, iOS/Android/masaüstü uygulamanızın veya PWA'nızın kullanıcının cihazında yüklü olup olmadığını kontrol etmenizi sağlayan bir web platformu API'sidir.
Sayfaların daha hızlı yüklenmesi için modern tarayıcılara modern kod sunma
Bu codelab'de ne kadar kod aktarıldığını taklit ederek uygulamaların performansını nasıl iyileştireceğinizi öğrenin.
İstemci İpuçlarıyla Kullanıcılara Uyum Sağlama
İstemci ipuçları, bir kullanıcının cihaz ve ağ bağlantısının özelliklerine göre sayfa kaynaklarını sunma şeklimizi değiştirmek için kullanabileceğimiz bir dizi HTTP isteği üst bilgisidir. Bu makalede, müşteri ipuçları ve bu ipuçlarının nasıl çalıştığıyla ilgili her şeyi öğrenecek, sitenizi kullanıcılar için daha hızlı hale getirmek için bunları nasıl kullanabileceğinize dair birkaç fikir edineceksiniz.
Erişilebilirlik nedir?
Erişilebilir site, içeriği kullanıcının engellerinden bağımsız olarak erişilebilen ve işlevselliği mümkün olan en çeşitli kullanıcı kitlelerinin kullanabileceği bir sitedir.
Anlamsal bilgiler ve ekran okuyucular
Ekran okuyucular gibi yardımcı teknolojilerin kullanıcılara ne anons edileceğini nasıl bildiklerini merak ettiğiniz oldu mu hiç? Bu sorunun yanıtı, geliştiricilerin sayfalarını anlamsal HTML ile işaretlemelerine dayanıyor. Peki anlambilim nedir ve ekran okuyucular bunları nasıl kullanır?
Başlıklar ve önemli noktalar
Başlıklar ve önemli noktalar için doğru öğeleri kullanarak yardımcı teknoloji kullanıcıları için gezinme deneyimini önemli ölçüde iyileştirebilirsiniz.
Stil odağı
Odak göstergesi (genellikle "odak halkasıyla" belirtilir) o sırada odaklanılan öğeyi tanımlar. Fare kullanamayan kullanıcılar için bu gösterge, fare işaretçileri için bir destek noktası görevi gördüğünden son derece önemlidir.
Sekme diziniyle odağı kontrol etme
Standart HTML öğelerinde klavye erişilebilirliği yerleşik olarak bulunur. Özel etkileşimli bileşenler oluştururken, klavyeden erişilebilir olduklarından emin olmak için tabindex'i kullanın.
Etiketler ve metin alternatifleri
Ekran okuyucunun kullanıcıya sesli bir kullanıcı arayüzü sunması için anlamlı öğelerin uygun etiketleri veya metin alternatifleri olması gerekir. Etiket veya metin alternatifi, bir öğeye, erişilebilirlik ağacında öğe semantiğini ifade etmek için temel özelliklerden biri olan erişilebilir adını verir.
Klavyede kolay kazanımlar için semantik HTML kullanın
Doğru semantik HTML öğelerini kullanarak klavye erişim gereksinimlerinizin çoğunu veya tamamını karşılayabilirsiniz. Bu sayede, sekme diziniyle uğraşmak için daha az zaman ve daha mutlu kullanıcılar söz konusu oluyor!
Klavye erişimiyle ilgili temel bilgiler
Geçici ve kalıcı motor bozuklukları olanlardan daha verimli ve üretken olmak için klavye kısayollarını kullananlara kadar birçok farklı kullanıcı uygulamalarda gezinmek için klavyeden yararlanır. Uygulamanız için iyi bir klavyeyle gezinme stratejinizin olması herkes için daha iyi bir deneyim oluşturur.
Yüklenebilir hale getirin
Bu codelab'de, beforeinstallprompt etkinliğini kullanarak bir siteyi nasıl yüklenebilir hale getireceğinizi öğrenin.
Kullanılmayan kodu kaldırın
Bu codelab'de kullanılmayan ve gereksiz bağımlılıkları kaldırarak uygulama performansını nasıl iyileştireceğinizi öğrenebilirsiniz.
Performans bütçeleri 101
İyi performans nadiren yan etki olarak görülür. Performans bütçeleri ve bu bütçelerin sizi başarıya giden yolda nasıl hazırlayabileceği hakkında bilgi edinin.
Lighthouse ile arama motoru optimizasyonunu ölçme
Lighthouse SEO denetimi sayfanızı tarar, arama motorları için önemli olan şeyleri test eder ve iyileştirme yapılabilecek alanları görebilmeniz için size bir puan verir. SEO önemlidir çünkü içeriğinizi daha alakalı kullanıcıların görüntülemesini sağlarsınız.
Sanat yönetimi
Bu codelab'de, cihazın ekran boyutuna göre tamamen farklı resimlerin nasıl yükleneceğini öğrenebilirsiniz.
Resimleri doğru boyutlarda sunma
Bu codelab'de ağ performansını artırmak için doğru boyutlarda resimlerin nasıl yayınlanacağını öğrenebilirsiniz.
Kod bölmeyle JavaScript yüklerini azaltın
Bu codelab'de kod bölme yoluyla basit bir uygulamanın performansını nasıl iyileştireceğinizi öğrenin.
Birden çok alan genişliği belirtme
Bu codelab'de, resimleri kullanıcının görüntü alanına göre doğru şekilde boyutlandırmak için boyutlar özelliğini nasıl kullanacağınızı öğrenin.
HTTP Önbelleği ile gereksiz ağ isteklerini önleme
Tarayıcının HTTP Önbelleği, gereksiz ağ isteklerine karşı ilk savunma hattınızdır.
Çalışma kutusu: üst düzey Service Worker araç setiniz
Workbox, Service Worker ve Cache Storage API'lerinin üzerine inşa edilmiş üst düzey bir Service Worker araç setidir. Web uygulamalarına çevrimdışı destek eklemek için üretime hazır bir kitaplık grubu sağlar.
Sayfaların daha hızlı yüklenmesi için animasyonlu GIF'leri videoyla değiştirin
Hiç GIF'in gerçekten bir video olduğunu öğrenmek için Imgur veya Gfycat gibi bir hizmette animasyonlu GIF gördünüz mü? Bunun iyi bir nedeni var. Animasyonlu GIF'ler olağanüstü olabilir. Büyük GIF'leri videolara dönüştürerek kullanıcı bant genişliğinden önemli ölçüde tasarruf edebilirsiniz.
Kullanılmayan kodu kaldırın
Kullanılmayan kodları tespit etmek ve kaldırmak için JavaScript paketinizi analiz edin.
GIF'leri videoyla değiştirin
Bu codelab'de, animasyonlu GIF'leri videoyla değiştirerek performansı nasıl artıracağınızı öğrenin.
Lighthouse ile performans fırsatlarını keşfedin
Lighthouse, bir sayfanın performansını ölçmenize ve iyileştirmenin yollarını bulmanıza yardımcı olan bir araçtır. Lighthouse, sayfanın nasıl performans gösterdiğine dair bir rapor sunar. Raporda, her metrik için bir puan ve fırsatların listesi sunulur. Bu fırsatları uygularsanız sayfanın daha hızlı yüklenmesi gerekir.
Tarayıcı korumalı alanı
Geliştiriciler, kendilerini saldırılara karşı korumak için güvenlik açıklarını azaltmalı ve uygulamaya güvenlik özellikleri eklemelidir. Neyse ki web'de tarayıcı, "korumalı alan" fikri de dahil olmak üzere birçok güvenlik özelliği sağlar.
Komut Satırıyla WebP Görüntüleri Oluşturma
Bu codelab'de, WebP kullanarak optimize edilmiş resimlerin nasıl sunulacağını öğrenin.
Aynı Kaynak Politikası ve Getirme istekleri
Bu codelab'de kaynakları getirirken "aynı kaynak" politikasının nasıl çalıştığını öğrenin.
Yoğunluk açıklayıcıları kullanın
Bu codelab'de resimleri kullanıcının cihazı için doğru piksel yoğunluğunda yüklemek üzere yoğunluk açıklayıcıları ve srcset'i nasıl kullanacağınızı öğrenin.
Güvenlik saldırıları nedir?
Güvenli olmayan bir uygulama, kullanıcıları ve sistemleri çeşitli zararlara maruz bırakabilir. Kötü niyetli bir taraf, zarar vermek üzere güvenlik açıklarını veya eksik güvenlik özelliklerini kendi lehine kullandığında buna saldırı adı verilir. Uygulamanızın güvenliğini sağlarken nelere dikkat etmeniz gerektiğini bilmeniz için bu kılavuzda farklı saldırı türlerine göz atacağız.
Resimleri sıkıştırmak için Imagemin'i kullanma
Sıkıştırılmamış resimler sayfalarınızı gereksiz baytlarla şişirir. Resimleri sıkıştırarak sayfa yüklemeyi iyileştirme fırsatlarını kontrol etmek için Lighthouse'u çalıştırın.
PRPL kalıbıyla anında yüklemeyi uygula
PRPL, web sayfalarının yüklenmesi ve etkileşimli, daha hızlı hale getirilmesi için kullanılan bir kalıbı tanımlayan bir kısaltmadır. Bu kılavuzda, bu tekniklerin her birinin nasıl birlikte kullanılabileceğini ancak yine de performans sonuçları elde etmek için bağımsız olarak kullanılabileceğini öğrenin.
İlk performans bütçeniz
Siteniz için anlamlı olan performans metriklerine ilişkin eşikler tanımlamanızı sağlayacak adım adım açıklamalı bir kılavuzla sitenizin hızlı yüklendiğinden emin olun.
Hizmet çalışanları ve Cache Storage API
Tarayıcının HTTP önbelleği ilk savunma hattınızdır. En güçlü veya esnek yaklaşım olan bu yaklaşım, önbelleğe alınan yanıtların ömrü üzerinde sınırlı denetime sahiptir. Ancak, çok uğraşmadan mantıklı bir önbelleğe alma uygulaması sağlayan birkaç genel kural vardır. Bu nedenle her zaman bu kurallara uymaya çalışmalısınız.