Performans, kullanıcı deneyiminin önemli bir parçasıdır. Sayfaların ne kadar hızlı yüklendiği ve kullanıcı girişlerine ne kadar hızlı yanıt verdiği, kullanıcıların sitenizi nasıl algıladığı üzerinde önemli bir etkiye sahip olabilir. Ayrıca, kullanıcıların web sitenizde kalıp kalmayacağına karar vermede belirleyici rol oynayabilir. Bu sayfada, web sitenizi hızlı hale getirmenize ve hızlı kalmasına yardımcı olacak çeşitli web performansı konularında zengin bir bilgi kaynağı bulabilirsiniz.
Performans konusunda yeni misiniz? Başlamanıza yardımcı olacak kapsamlı bir kurs hazırladık.
Üç Core Web Vitals metriği, bunların işleyiş şekli ve iyi kullanıcı deneyimleri için neden önemli oldukları hakkında bilgi edinin.
Core Web Vitals metrikleri hakkında bilgi edindikten sonra bu kılavuzlar, metrikleri en iyi şekilde nasıl optimize edeceğinizi anlamanıza yardımcı olabilir.
Metrikleri daha ayrıntılı şekilde inceleyen bir kılavuz koleksiyonuyla Core Web Vitals hakkında daha fazla bilgi edinin.
Performansı iyileştirmeye yönelik yeni özellikleri keşfedin. Bu özellikler artık Temel olarak kullanıma sunulmuştur.
Şirketlerin Core Web Vitals metriklerini nasıl iyileştirdiğini ve bunun sonucunda nasıl işletme metriklerinde artış elde ettiğini öğrenin.
Web sitenizdeki performans sorunlarında hata ayıklamak için Chrome Geliştirici Araçları'nı nasıl kullanabileceğinizi öğrenin.
DERS

Web performansı karmaşık ve çok yönlü bir konudur ancak öğrenmesi imkansız değildir. Performans konusunda yeniyseniz, kursumuz size performans temelli bilgi vererek temel işe başlamanıza yardımcı olur ve daha ileri düzey konularda ilerlemenizi sağlar. Kursu tamamladıktan sonra öğrendiklerinizi hemen uygulayabilirsiniz.

Core Web Vitals metrikleri, kullanıcı deneyimine odaklanan üç metriktir. Algılanan yükleme süresi, görsel kararlılık ve kullanıcı girişine yanıt verme dahil olmak üzere sayfaların performansını ve kullanılabilirliğini ölçerler. Core Web Vitals'ı yeni kullanmaya başladıysanız bu kılavuzlar, bu metriklerin işleyiş şekli hakkında bilgi edinmenize ve bunları nasıl optimize edeceğiniz konusunda bir başlangıç noktası oluşturmanıza yardımcı olur.

LCP, en büyük içerik parçasının bir sayfada görünmesi için geçen süreyi ölçen bir metriktir. LCP'si düşük olan sayfalar, kullanıcılara sayfanızın hızlı yüklendiğini gösterir.
CLS, düzende beklenmedik değişiklikler olup olmadığını gözlemleyerek düzen kararlılığını ölçen bir metriktir. Düşük CLS'ye sahip sayfalar, kullanıcılara sayfanın düzeninin sabit olduğunu ve sayfayla etkileşim kurmaya çalışırken beklenmedik bir şekilde değişmeyeceğini gösterir.
INP, bir sayfanın kullanıcı girişine ne kadar duyarlı olduğunu ölçen bir metriktir. INP değeri düşük olan sayfalar, kullanıcılara bir sayfanın kendileriyle etkileşime geçtiğinde hızlı yanıt verdiğini göstererek web sitenizin daha güvenilir ve keyifli bir kullanım deneyimi yaşamasını sağlar.
Core Web Vitals metriklerinin her biri, kullanıcı deneyimini iyileştirmek için optimize edilebilir. Bu kılavuzların her biri, web sitenizin performansını ve güvenilirliğini artırmak için kanıtlanmış teknikleri nasıl uygulayabileceğinizi ayrıntılı bir şekilde açıklar. Böylece kullanıcıların daha fazla etkileşimde kalması ve siteyi terk etme olasılıklarının azalması sağlanır.
Kullanıcılarınızın sayfanızdaki en önemli içeriği mümkün olduğunca hızlı bir şekilde görebilmesi için LCP'yi kullanıcılarınız için nasıl optimize edeceğinizi öğrenin.
Web sitenizin kararlı ve daha kullanılabilir kalması için kullanıcılarınıza CLS'yi nasıl optimize edeceğinizi öğrenin.
Web sitenizin etkileşimlere hızlı yanıt vermesini beklemeleri için kullanıcılarınız için INP'yi nasıl optimize edeceğinizi öğrenin.
Üç Core Web Vitals metriği ve bunların nasıl optimize edileceğiyle ilgili bilgilerle başlamak iyi bir fikirdir ancak bu metrikler hakkında daha fazla bilgi edinmenizi öneririz. Bu içerik koleksiyonu, bunların nasıl ölçüleceğini ve hata ayıklandığının yanı sıra çerez bildirimleri, bantlar ve diğer yaygın kullanıcı arayüzü sorunları ile ilgili ek en iyi uygulamaları anlamanıza yardımcı olur.
Performansı artırmak yalnızca kullanıcı deneyimini iyileştirmekle kalmaz, aynı zamanda işletmenizin büyümesine de yardımcı olma potansiyeline sahiptir. Bu şirketlerin Core Web Vitals'larını nasıl iyileştirdiğini ve işletme metriklerinde nasıl artış elde ettiğini öğrenin.
Disney+ Hotstar'ın, INP'yi% 61 oranında azaltarak oturma odası cihazlarında haftalık kart görüntüleme sayısını nasıl %100 artırdığını öğrenin.
PubTech'in Kullanıcı Rızası Yönetim Platformu'nun, müşterilerinin web sitelerindeki INP'yi %64'e kadar azaltırken reklam görüntülenebilirliğini de %1,5'e kadar nasıl artırdığını öğrenin
Taboola'nın yayıncı iş ortağı web sitelerinde INP'yi% 36'ya varan oranda artırmak için Long Animation Frames API (LoAF)'yi nasıl kullandığını öğrenin.

Referans, web platformu özelliklerinin tüm büyük tarayıcı motorlarında güvenli bir şekilde kullanılabileceğini web geliştiricilerine bildirir. Artık Temel olarak sunulan, web performansıyla ilgili bazı özellikleri aşağıda bulabilirsiniz.

content-visibility CSS mülkü, Eylül 2024'te "Referans Yeni kullanılabilir" olarak değiştirildi.
AVIF resim biçimi, Ocak 2024'te kullanıma sunulan yeni temel biçim oldu.
Modül ön yükleme özelliği, Eylül 2023'te kullanıma sunulan yeni Temel düzey olarak değiştirildi.
Server-Timing HTTP yanıt üst bilgisi, Mart 2023'te kullanıma sunulan yeni Temel düzey oldu.

Chrome Geliştirici Araçları, web uygulamalarınızın performansını anlamanıza ve iyileştirmenize yardımcı olacak araçlar da dahil olmak üzere, geliştiricilerin web uygulamalarında hata ayıklama yapmasına olanak tanıyan bir araç paketidir.

Geliştirici Araçları'ndaki Ağ paneli, bir sayfanın yüklediği tüm kaynakları ve bunların yüklenmesinin ne kadar sürdüğünü gösterir. Kaynak yüklemeyle ilgili performans sorunlarını belirlemek için bu paneli nasıl kullanacağınızı öğrenin.
DevTools'daki Performans paneli, ana iş parçacığındaki etkinlik, ağ etkinliği ve performans sorunlarını tespit edip düzeltmenize yardımcı olabilecek ek araçlar da dahil olmak üzere, kayıt oturumu sırasında bir sayfanın performansıyla ilgili inanılmaz derecede ayrıntılı bilgiler gösterir.
Bellek paneli, bir sayfanın JavaScript'i tarafından ne kadar bellek kullanıldığını gösterir. Bu panelin nasıl kullanılacağını öğrenerek bir sayfanın JavaScript'inin neden olduğu bellekle ilgili sorunları keşfedebilir ve düzeltebilirsiniz.