3 günlük online topluluk etkinliğimizde duyurulan önemli haberlerin ve güncellemelerin özeti ve yaklaşan bölgesel etkinliklerle ilgili bir hatırlatma.
Üç gün sürecek web.dev LIVE etkinliğimizi kısa süre önce tamamladık. Bu etkinlikte, web topluluğundan bir grup web geliştirme süreci hakkında konuşmak için online ortamda bir araya geldi. Her güne farklı bir bölge saat diliminde başladık. Google çalışanları, web'in kararlı, güçlü ve erişilebilir kalmasını sağlamak için geliştiricilere araçlar ve rehberlik konusunda yardımcı olmak adına bir dizi güncelleme, haber ve ipucu paylaştı.
Canlı yayının bir kısmını kaçırdıysanız tüm oturumlar kaydedilir ve YouTube'da izlenebilir. Ayrıca, dünyanın dört bir yanında Google Geliştirici Grupları tarafından düzenlenen bölgesel etkinlikler da gerçekleştireceğiz. Bu etkinliklerde web.dev LIVE'da ele aldığımız konularla ilgili ayrıntılı oturumlar yapacağız.
Üç gün boyunca paylaşılan bazı haberleri ve güncellemeleri inceleyelim.
Web Verileri
Chrome ekibi, geliştiricilerin web'de mükemmel kullanıcı deneyimleri sunmasına yardımcı olmak için birleştirilmiş rehberlik, metrikler ve araçlar sağlamak üzere Web Verileri girişimini duyurdu. Google Arama ekibi ayrıca, sayfa deneyimini sıralama ölçütü olarak değerlendireceğini ve temel olarak Önemli Web Verileri metriklerini dahil edeceğini kısa süre önce duyurdu.
2020 Core Web Vitals'ın üç ayağı, aşağıdaki metriklerle yakalanan sayfa içeriğinin yüklenmesi, etkileşimi ve görsel kararlılığıdır:
- Largest Contentful Paint, algılanan yükleme hızını ölçer ve sayfa yükleme zaman çizelgesinde, ana içeriğin yüklenme ihtimali olan noktayı işaretler.
- İlk Giriş Gecikmesi, yanıt verme hızını ölçer ve kullanıcıların bir sayfayla ilk kez etkileşimde bulunmaya çalışırken hissettikleri deneyimi ölçer.
- Cumulative Layout Shift, görsel kararlılığı ölçer ve sayfa içeriğinin beklenmedik şekilde hareket etme miktarını ölçer.
web.dev LIVE'da Core Web Vitals için optimizasyon yapma ve sitenizin hayati değerlerini keşfetmek için Chrome Geliştirici Araçları'nı kullanma ile ilgili en iyi uygulamaları paylaştık. Ayrıca, 1. gün planında web.dev/live adresinde bulabileceğiniz performansla ilgili diğer birçok konuşmayı da paylaştık.
tooling.report
Web kadar geniş bir platform için geliştirme yapmak zor olabilir. Geliştirici ve ürün yaşam döngünüzü yönetmede önemli bir rol üstlenen derleme araçları genellikle web geliştirme projenizin merkezinde yer alır.
Hepimiz kontrolsüz bir şekilde yapılandırma dosyaları oluşturulduğunu hepimiz gördük. Bu yüzden web geliştiricilerinin ve araç yazarlarının web'in karmaşıklığını ele almasına yardımcı olmak için tooling.report aracını geliştirdik. Bir sonraki projeniz için doğru derleme aracını seçmenize, bir araçtan diğerine taşımaya değip değmeyeceğine karar vermenize veya araç yapılandırmanıza ve kod tabanınıza en iyi uygulamaları nasıl dahil edeceğinizi bulmanıza yardımcı olan bir web sitesidir.
Web geliştirme en iyi uygulamalarını izlemenize olanak tanıyan derleme araçlarını belirlemek için bir dizi test tasarladık. Araçları doğru kullandığımızdan ve adil şekilde temsil ettiğimizden emin olmak için yapı aracı yazarlarıyla birlikte çalıştık.
tooling.report'un ilk sürümü, şu anda en popüler derleme araçları olan webpack v4, Rollup v2, Parcel v2 ve Browserify with Gulp'ı kapsamaktadır. tooling.report'u, topluluğun yardımıyla daha fazla derleme aracı ve ek testler ekleme esnekliğiyle oluşturduk.
Test edilmesi gereken bir en iyi uygulamayı gözden kaçırdıysak lütfen bir GitHub sorununda önerin. Bir test yazmak veya ilk sette yer almadığımız yeni bir araç eklemek için hazırsanız katkıda bulunabilirsiniz!
Bu sırada, tooling.report'a nasıl yaklaştığımız hakkında daha fazla bilgi edinebilir ve web.dev LIVE'daki oturumumuzu izleyebilirsiniz.
Web'de gizlilik ve güvenlik
Chrome, kullanıcıların gizliliğine saygı gösteren ve web'in herkes için çalışır durumda kalmasını sağlayan temel kullanım alanlarını koruyan açık bir web'e inanır.
2019'da Chrome, çerezleri varsayılan olarak birinci taraf bağlamlarla kısıtlamak ve üçüncü taraf bağlamlarında çerezlerin açıkça bu şekilde işaretlenmesini zorunlu kılmak için çerez standardında bir güncelleme önerdi. Özellikle bu, Siteler Arası İstek Sahtekarlığı saldırılarına karşı bir savunma hattı sağlar. Teklif şu anda Chrome, Firefox, Edge ve diğer tarayıcılar tarafından benimsenmektedir.
Maalesef COVID-19 nedeniyle Chrome bu değişiklikleri geçici olarak geri çekmeye karar verdi. Ne yazık ki insanların en savunmasız olduğu krizlerde bu tür saldırıların da arttığını görüyoruz. Bu nedenle, Chrome 84'ün Kararlı sürümüyle (2020 Temmuz ayının ortası) yapılan değişiklikler, 80 ve üzeri tüm Chrome sürümlerinde tekrar kullanıma sunulmaya başlanacak. Daha fazla bilgi edinmek için SameSite çerezler rehberine ve web.dev CANLI oturumuna göz atın.
Ayrıca Chrome, Özel Korumalı Alan banner'ının altında kullanıcıların web platformunu kullanarak geçimlerini kazanmalarına olanak tanıyan ancak bunu kullanıcı gizliliğine daha saygılı bir şekilde yapmalarını sağlayan kullanım alanlarını desteklemeyi amaçlayan bir dizi standart öneri sunuyor. Chrome, bu teklifler hakkında aktif olarak geri bildirim almakta ve hem teklifleri hem de diğer taraflarca gönderilenleri tartışmak için W3C'nin açık forumlarına katılmaktadır. Açık web için güvenlik ve gizlilik oturumunda bu girişim hakkında daha fazla bilgi edinebilirsiniz.
Son olarak, kullanıcı güvenliğini inceleyen Spectre, tek bir tarayıcı işleminde çalışan kötü amaçlı kodun, farklı bir kaynaktan olsa bile bu işlemle ilişkili tüm verileri okuyabileceği anlamına gelen bir güvenlik açığıydı. Bunun için yapılabilecek tarayıcı çözümlerinden biri, siteyi izole etmek, yani her siteyi ayrı bir işleme koymaktır. Daha fazla bilgi edinmek için yeni Çapraz Kaynak Açıcı ve Yerleştirme Politikaları (COOP ve COEP) ile ilgili web.dev CANLI oturumunu izleyin.
Güçlü özelliklere sahip bir web oluşturma
Chrome, farklı cihazlardaki kullanıcılara en kapsamlı erişimi sağlayan en yüksek kaliteli web uygulamalarını özgürce oluşturabilmenizi istiyor. PWA'ların yüklenebilirlik ve güvenilirliğini özellikler projesi (Project Fugu) ile birleştiren Chrome, harika deneyimler oluşturup sunmanıza yardımcı olmak amacıyla, platforma özel uygulamalar ile web arasındaki boşluğu kapatmak için üç şeye odaklanıyor.
Öncelikle, Chrome ekipleri web geliştiricilerine ve kullanıcılara yükleme deneyimi üzerinde daha fazla kontrol, çok amaçlı adres çubuğuna yükleme tanıtımı ekleme ve daha fazla özellik sunmak için yoğun bir şekilde çalışıyor. Web çok yaygın olsa da bazı işletmeler için uygulamalarının mağazada bulunması yine de önemli. Chrome bu konuda yardımcı olmak için PWA'nızı Play Store'a taşımayı çok kolaylaştıran bir kitaplık ve CLI olan Bubblewrap'u kullanıma sundu. Öyle ki, PWABuilder.com artık arka planda Balon Baloncuk kullanıyor. Sadece birkaç tıklamayla bir APK oluşturabilir ve ölçütleri karşıladığınız sürece PWA'nızı Play Store'a yükleyebilirsiniz.
İkinci olarak Chrome, işletim sistemiyle daha sıkı entegrasyon sağlar. Örneğin, Web Paylaşımı API'si ile sistem düzeyinde paylaşım hizmetini çağırarak fotoğraf, şarkı veya herhangi bir şey paylaşabilir ya da farklı bir yüklü uygulamadan paylaşıldığında içerik alabilir. Kullanıcıları güncel tutabilir veya uygulama rozetleri ile yeni etkinlikleri küçük bir şekilde bilgilendirebilirsiniz. Ayrıca, kullanıcıların Chrome 84'e (Temmuz 2020 ortası) inecek olan Uygulama Kısayolları'nı kullanarak hızlı bir şekilde işlem başlatmaları da artık daha kolay.
Son olarak Chrome, kullanıcının yerel dosya sistemindeki dosyaları okuyan ve bu dosyalara yazan düzenleyiciler gibi daha önce mümkün olmayan yeni senaryolara olanak tanıyan veya kullanıcıların bunları tasarımlarında kullanabilmeleri için yerel olarak yüklenen yazı tiplerinin listesini alabilecekleri yeni özellikler üzerinde çalışmaktadır.
web.dev LIVE sırasında platforma özgü uygulamalarla aynı yeteneklerle aynı deneyimi sunmanızı sağlayabilecek birçok başka özellik ve özellikten bahsettik. Tüm oturumları web.dev/live adresinde 2. Gün programında görün.
Chrome Geliştirici Araçları ve Lighthouse 6.0'daki yenilikler
Chrome Geliştirici Araçları: Yeni Sorunlar sekmesi, renk eksikliği emülatörü ve Web Verileri desteği
Chrome Geliştirici Araçları'nın en güçlü özelliklerinden biri, bir web sayfasındaki sorunları tespit edip geliştiricinin dikkatine sunabilmesidir. Bu, gizliliğe öncelik veren web kavramının bir sonraki aşamasına geçerken oldukça önemlidir. Chrome Geliştirici Araçları, Console'daki bildirim yorgunluğunu ve karmaşıklığını azaltmak için Sorunlar sekmesini kullanıma sundu. Bu sekmede, başlangıçta üç tür kritik soruna odaklanılır: çerez sorunları, karma içerik ve COEP sorunları. Başlamak için Sorunlar sekmesiyle sorunları bulma ve düzeltme hakkındaki web.dev CANLI oturumunu izleyin.
Ayrıca Önemli Web Verileri, web geliştiricilerin izleyeceği ve ölçebileceği en kritik metrik gruplarından biri haline gelirken, DevTools geliştiricilerin bu eşiklere kıyasla performanslarını kolayca takip edebilmelerini sağlamak istiyor. Bu üç metrik artık Chrome Geliştirici Araçları Performans panelinde bulunuyor.
Son olarak, erişilebilirliğe odaklanan geliştirici sayısının artmasıyla birlikte DevTools, geliştiricilerin bulanık görüş ve diğer görme bozuklukları türlerini emüle etmelerine olanak tanıyan bir renk körlüğü emülatörü de kullanıma sundu. DevTools'daki yenilikler oturumunda bu ve diğer birçok özellik hakkında daha fazla bilgi edinebilirsiniz.
Lighthouse 6.0: Yeni metrikler, Core Web Vitals laboratuvar ölçümleri, güncellenmiş Performans puanı ve yeni denetimler
Lighthouse, geliştiricilerin sitelerinin performansını iyileştirmesine yardımcı olan açık kaynak otomatik bir araçtır. Lighthouse ekibi, son sürümünde kullanıcı deneyiminizin kalitesi ile kritik boyutlar arasındaki dengeyi sağlayan metriklere dayalı analizler sağlamaya odaklandı.
Lighthouse, tutarlılığı sağlamak amacıyla Önemli Web Verileri için destek ekledi: LCP, TBT (Lighthouse bir laboratuvar aracı olduğundan ve FID yalnızca alanda ölçülebildiğinden FID'nin proxy'si) ve CLS. Lighthouse ayrıca üç eski metriği de kaldırdı: İlk Anlamlı Boyama, İlk CPU Boşta ve Maksimum Potansiyel İGG. Bu kaldırma işlemlerinin nedeni, metrik değişkenliği ve Lighthouse'un ölçmeye çalıştığı kullanıcı deneyimi kısmını daha iyi yansıtan yeni metrikler ve yeni metriklerdir. Ayrıca Lighthouse, kullanıcı geri bildirimlerine göre her bir metriğin genel Performans puanını ne kadar etkilediğini gösteren bazı düzenlemeler de yaptı.
Lighthouse, sürüm 5 ve 6 puanları arasında karşılaştırma sağlayarak performans puanınızı keşfetmenize yardımcı olmak için bir puanlama hesaplayıcısı da ekledi. Lighthouse 6.0 ile bir denetim gerçekleştirdiğinizde rapor, sonuçlarınızın doldurulmuş olduğu hesap makinesine bir bağlantıyla birlikte gelir.
Son olarak, Lighthouse, JavaScript analizi ve erişilebilirliğe odaklanarak bir dizi yeni denetim ekledi.
Hız araçlarındaki yenilikler oturumunu izleyerek daha fazla bilgi edinin.
Daha fazla bilgi
Web platformunun fırsatlarını ve zorluklarını görüşmek üzere bize katılan herkese teşekkür ederiz.
Bu gönderide, etkinliğin öne çıkan anlarından bazılarını özetledik ama çok daha fazlası vardı. Daha fazla içeriğin doğrudan gelen kutunuza gönderilmesi için tüm oturumlara göz atmayı ve web.dev bültenine abone olmayı unutmayın. Ayrıca, kendi saat diliminizde düzenlenecek olan bir topluluk etkinliğini görmek için web.dev/live adresindeki Regional events (Bölgesel etkinlikler) bölümünü ziyaret edin.