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.
Web topluluğunun bir kısmının web geliştirmenin durumunu konuşmak için online olarak bir araya geldiği üç günlük web.dev LIVE etkinliğimizi yeni tamamladık. Her güne farklı bir bölgesel saat diliminde başladık ve Google çalışanları, geliştiricilere web'i istikrarlı, güçlü ve erişilebilir tutacak araçlar ve rehberlik konusunda yardımcı olmak amacıyla 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, Google Geliştirici Grupları tarafından düzenlenen ve web.dev LIVE'da ele aldığımız konularla ilgili ayrıntılı oturumların yer alacağı bölgesel etkinlikler de dünyanın dört bir yanında gerçekleştirilecek.
Üç gün boyunca paylaşılan haber ve güncellemelerden bazılarına göz atalım.
Web Verileri
Chrome ekibi, geliştiricilerin web'de mükemmel kullanıcı deneyimleri sunmalarına yardımcı olmak için birleştirilmiş kılavuz, metrik ve araçlar sağlayan Web Vitals girişimini duyurdu. Google Arama Ekibi de yakın zamanda yaptığı bir duyuruda, sayfa deneyimini bir sıralama ölçütü olarak değerlendireceğini ve Core Web Vitals metriklerini bu ölçütün temeli olarak kullanacağını açıkladı.
2020 Core Web Vitals'ın üç temel bileşeni; sayfa içeriğinin yüklenmesi, etkileşimliliği ve görsel kararlılığıdır. Bunlar aşağıdaki metriklerle ölçülür:
- Largest Contentful Paint, algılanan yükleme hızını ölçer ve sayfanın ana içeriğinin yüklendiği olası noktayı sayfa yükleme zaman çizelgesinde işaretler.
- İlk Giriş Gecikmesi, yanıt verme süresini ölçer ve kullanıcıların bir sayfayla ilk kez etkileşime girmeye çalışırken yaşadıkları deneyimi ölçer.
- Cumulative Layout Shift, görsel kararlılığı ölçer ve sayfa içeriğinin beklenmedik hareket miktarını belirler.
web.dev LIVE'da, Core Web Vitals için optimizasyon ve sitenizin önemli değerlerini keşfetmek için Chrome Geliştirici Araçları'nı kullanma ile ilgili en iyi uygulamaları paylaştık. Ayrıca, web.dev/live adresindeki 1. gün programında 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. Derleme araçları genellikle web geliştirme projenizin merkezinde yer alır ve web geliştiricisi ve ürün yaşam döngünüzü yönetmede önemli bir rol oynar.
Hepimiz hantal derleme yapılandırma dosyaları görmüşüzdür. Bu nedenle, web geliştiricilerinin ve araç yazarlarının web'in karmaşıklığını aşmasına yardımcı olmak için tooling.report'u oluşturduk. Bu web sitesi, bir sonraki projeniz için doğru derleme aracını seçmenize, bir araçtan diğerine geçiş yapmanın faydalı olup olmayacağına karar vermenize veya en iyi uygulamaları araç yapılandırmanıza ve kod tabanınıza nasıl dahil edeceğinizi öğrenmenize yardımcı olur.
Web geliştirme alanındaki en iyi uygulamaları takip etmenize olanak tanıyan derleme araçlarını belirlemek için bir dizi test tasarladık. Araçlarını doğru şekilde kullandığımızdan ve adil bir şekilde temsil ettiğimizden emin olmak için derleme 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 Gulp ile Browserify'ı kapsar. tooling.report'u, topluluğun yardımıyla daha fazla derleme aracı ve ek test ekleme esnekliği sunacak şekilde geliştirdik.
Test edilmesi gereken bir en iyi uygulama eksikse lütfen GitHub'da bir sorun olarak önerin. Test yazmak veya ilk grupta yer vermediğimiz yeni bir araç eklemek isterseniz katkıda bulunabilirsiniz.
Bu arada, tooling.report'u oluşturma yaklaşımı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ı duyan ve web'in herkes için çalışmasını sağlayan temel kullanım alanlarını koruyan açık bir web'e inanır.
Chrome, 2019'da çerezleri varsayılan olarak birinci taraf bağlamlarıyla kısıtlamak ve üçüncü taraf bağlamları için çerezlerin açıkça bu şekilde işaretlenmesini zorunlu kılmak amacıyla çerez standardında bir güncelleme önerdi. Bu, özellikle siteler arası istek sahteciliği saldırılarına karşı bir savunma hattı sağlar. Teklif şu anda Chrome, Firefox, Edge ve diğer tarayıcılar tarafından benimseniyor.
Chrome, COVID-19 nedeniyle bu değişiklikleri geçici olarak geri almaya karar verdi. Maalesef insanların en savunmasız olduğu kriz dönemlerinde bu tür saldırıların arttığını görüyoruz. Bu nedenle, Chrome 84 Kararlı sürümüyle (Temmuz 2020 ortası) birlikte değişiklikler 80 ve sonraki tüm Chrome sürümlerinde tekrar kullanıma sunulmaya başlayacak. Daha fazla bilgi edinmek için SameSite çerezleri kılavuzuna ve web.dev LIVE oturumuna göz atın.
Ayrıca Chrome, Özel Korumalı Alan kapsamında, kullanıcıların web platformunu kullanarak geçimlerini sağlamalarına olanak tanıyan kullanım alanlarını desteklemeyi amaçlayan ancak bunu kullanıcı gizliliğine daha fazla saygı gösterecek şekilde yapan bir dizi standart teklifi sunuyor. Chrome, bu tekliflerle ilgili aktif olarak geri bildirim topluyor ve hem bu teklifleri hem de diğer taraflarca gönderilen teklifleri tartışmak için W3C'nin açık forumlarına katılıyor. Bu girişim hakkında daha fazla bilgi edinmek için Açık web için güvenlik ve gizlilik oturumuna katılın.
Son olarak kullanıcı güvenliği açısından Spectre, 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ı. Bu sorunu azaltmak için tarayıcıda kullanılan yöntemlerden biri site izolasyonudur. Yani her site ayrı bir işleme yerleştirilir. Daha fazla bilgi edinmek için yeni Çapraz Kaynak Açıcı ve Yerleştirici Politikaları (COOP ve COEP) ile ilgili web.dev LIVE oturumunu izleyin.
Güçlü özelliklere sahip bir web oluşturma
Chrome, cihazlar genelinde en fazla kullanıcıya ulaşmanızı sağlayacak en yüksek kaliteli web uygulamalarını özgürce oluşturmanızı ister. Chrome, PWA'ların yüklenebilirliğini ve güvenilirliğini yetenekler projesi (Project Fugu) ile birleştirerek platforma özel uygulamalar ile web arasındaki boşluğu kapatmak için üç noktaya odaklanır. Böylece, mükemmel deneyimler oluşturup sunmanıza yardımcı olur.
İlk olarak, Chrome ekipleri web geliştiricilerine ve kullanıcılara yükleme deneyimi üzerinde daha fazla kontrol sağlamak, çok amaçlı adres çubuğuna yükleme tanıtımı eklemek ve daha fazlası için yoğun bir şekilde çalışıyor. Web'in her yerde bulunmasına rağmen, bazı işletmeler için uygulamalarının mağazada olması hâlâ önemlidir. Chrome, bu konuda yardımcı olmak için PWA'nızı Play Store'a eklemeyi kolaylaştıran bir kitaplık ve CLI olan Bubblewrap'i kullanıma sundu. Hatta PWABuilder.com artık arka planda Bubblewrap kullanıyor. Ölçütleri karşıladığınız sürece yalnızca birkaç fare tıklamasıyla APK oluşturabilir ve PWA'nızı Google Play Store'a yükleyebilirsiniz.
İkinci olarak Chrome, işletim sistemiyle daha sıkı bir entegrasyon sağlar. Örneğin, Web Share API ile sistem düzeyinde paylaşım hizmetini çağırarak fotoğraf, şarkı veya başka bir öğe paylaşabilir ya da farklı bir yüklü uygulamadan paylaşılan içerikleri alabilirsiniz. Uygulama rozetleri ile kullanıcıları güncel tutabilir veya yeni etkinlikleri onlara fark ettirmeden bildirebilirsiniz. Ayrıca, kullanıcıların Chrome 84'te (Temmuz 2020 ortası) kullanıma sunulacak Uygulama Kısayolları'nı kullanarak hızlı bir şekilde işlem başlatması artık daha kolay.
Son olarak Chrome, daha önce mümkün olmayan yeni senaryolara olanak tanıyan yeni özellikler üzerinde çalışıyor. Örneğin, kullanıcının yerel dosya sistemindeki dosyaları okuyup yazan veya yerel olarak yüklenen yazı tiplerinin listesini alan düzenleyiciler sayesinde kullanıcılar bunları tasarımlarında kullanabilir.
web.dev LIVE sırasında, platforma özel uygulamalarla aynı özelliklere sahip, aynı türde deneyim sunmanızı sağlayabilecek diğer birçok özellik ve özellikten bahsettik. Tüm oturumları web.dev/live adresindeki 2. gün programında görebilirsiniz.
Chrome Geliştirici Araçları ve Lighthouse 6.0'daki yenilikler
Chrome Geliştirici Araçları: Yeni Sorunlar sekmesi, renk eksiklikleri emülatörü ve Web Verileri desteği
Chrome Geliştirici Araçları'nın en güçlü özelliklerinden biri, web sayfasındaki sorunları tespit edip geliştiricinin dikkatine sunabilmesidir. Bu durum, gizlilik öncelikli web'in bir sonraki aşamasına geçerken daha da önem kazanıyor. Chrome Geliştirici Araçları, bildirim yorgunluğunu ve Konsol'daki karmaşayı azaltmak için başlangıçta üç tür kritik soruna odaklanan Sorunlar sekmesini kullanıma sundu: çerez sorunları, karma içerik ve COEP sorunları. Başlamak için Sorunlar sekmesiyle sorunları bulma ve düzeltme hakkındaki web.dev LIVE oturumunu izleyin.
Ayrıca Core Web Vitals, web geliştiricilerin izlemesi ve ölçmesi gereken en kritik metrik gruplarından biri haline geldiğinden Geliştirici Araçları, geliştiricilerin bu eşiklere göre performanslarını kolayca izleyebilmesini sağlamak istiyor. Bu üç metrik artık Chrome Geliştirici Araçları Performans panelinde yer alıyor.
Son olarak, erişilebilirliğe odaklanan geliştiricilerin sayısının artmasıyla birlikte Geliştirici Araçları'na, geliştiricilerin bulanık görme ve diğer görme bozukluklarını taklit etmesine olanak tanıyan bir renk görme bozuklukları emülatörü de eklendi. Bu ve diğer birçok özellik hakkında daha fazla bilgiyi Geliştirici Araçları'ndaki yenilikler oturumunda bulabilirsiniz.
Lighthouse 6.0: Yeni metrikler, Core Web Vitals laboratuvar ölçümleri, güncellenmiş performans puanı ve yeni denetimler
Lighthouse, geliştiricilerin sitelerinin performansını artırmasına yardımcı olan açık kaynaklı, otomatik bir araçtır. Lighthouse ekibi, en yeni sürümde kullanıcı deneyiminizin kalitesiyle ilgili kritik boyutlar açısından dengeli bir görünüm sunan metriklere dayalı analizler sağlamaya odaklandı.
Lighthouse, tutarlılığı sağlamak için Core Web Vitals'a destek ekledi: LCP, TBT (Lighthouse bir laboratuvar aracı olduğundan ve FID yalnızca sahada ölçülebildiğinden FID için bir proxy) ve CLS. Lighthouse ayrıca üç eski metriği de kaldırdı: İlk Anlamlı Boyama, İlk CPU Boşta Kalma Süresi ve Maksimum Potansiyel FID. Bu kaldırma işlemleri, metrik değişkenliği ve Lighthouse'un ölçmeye çalıştığı kullanıcı deneyimi bölümünü daha iyi yansıtan yeni metrikler gibi hususlardan kaynaklanmaktadır. Ayrıca Lighthouse, kullanıcı geri bildirimlerine göre her bir metriğin genel performans puanına ne kadar etki ettiğine dair bazı düzenlemeler de yaptı.
Lighthouse, 5. ve 6. sürüm puanları arasında bir karşılaştırma sunarak performans puanınızı keşfetmenize yardımcı olacak bir puanlama hesaplayıcı da ekledi. Lighthouse 6.0 ile denetim çalıştırdığınızda rapor, sonuçlarınızın doldurulduğu hesaplayıcıya yönlendiren bir bağlantı içerir.
Son olarak Lighthouse, JavaScript analizi ve erişilebilirliğe odaklanan bir dizi yeni denetim ekledi.
Hız araçlarındaki yenilikler oturumunu izleyerek daha fazla bilgi edinebilirsiniz.
Daha fazla bilgi
Web platformunun fırsatlarını ve zorluklarını tartışmak için bize katılan topluluktaki herkese teşekkür ederiz.
Bu yayında etkinliğin öne çıkan bazı noktalarını özetledik ancak çok daha fazlası vardı. Tüm oturumları inceleyin ve daha fazla içeriğin doğrudan gelen kutunuza gönderilmesini istiyorsanız web.dev bültenine abone olun. Ayrıca web.dev/live adresindeki Bölgesel Etkinlikler bölümünü ziyaret ederek saat diliminizde gerçekleşecek bir topluluk etkinliği bulabilirsiniz.