PageSpeed Insights (Google sayfa hızı içgörüleri) tavsiyeleri, internet performans optimizasyonunun acı-tatlı yönüdür.
Bunlar internet sitenizin performansını artırmaya yardım edecek, gerçekten de muhteşem önerilerdir.
Ancak, bir PageSpeed (sayfa hızı) raporu, şu gibi sorularla karışıklığa yol açabilecek ve sizi ne yapacağını bilemez bir halde hissettirecek birtakım tavsiyeler içerebilir:
- PageSpeed tavsiyeleri ne anlama gelmektedir?
- PageSpeed uyarılarını nasıl düzeltebilirim?
WordPress sitenizin performansını test ettikten sonra, iki ana kategoriye ayrılan, bir dizi tavsiye ve uyarının dahil olduğu PageSpeed Insights raporu elde edeceksiniz:
- Fırsatlar
- Teşhisler
Fırsatlar bölümü, sayfa yükleme süresini geliştirebilecek performans ölçütlerine odaklanır.
Teşhisler bölümü, tam tersine, daha çok analiz edilen sayfanın içine internet geliştirme için uygulanması gereken en iyi uygulamalara odaklanır.
Bu temel kılavuzda, en yaygın PageSpeed Insights tavsiyeleri boyunca size eşlik edeceğiz: Onları size yalın bir Türkçe ile mümkün olduğunca az teknik terimle açıklayacağız ve nasıl düzelteceğimizi göreceğiz, tabii ki bütün önerilerimiz arasında TurboPak hizmetimiz var.
Özünde çok teknik bir konu ve teknik terimler olmadan açıklanması imkânsız, çözümlerin neredeyse tamamı iyi / çok iyi seviyede web geliştirici bilgisi / deneyimi gerektirmektedir.
Google PageSpeed Insights aracının, En Büyük Zengin İçerikli Boyama (LCP – Largest Contentful Paint), Kümülatif Düzen Kayması (CLS – Cumulative Layout Shift) ve İlk Giriş Gecikmesi (FID – First Input Delay) gibi ölçütleri geliştirme konusundaki tavsiyeleri ele aldığı aklınızda bulunsun.
Hadi başlayalım!
İçindekiler
- PageSpeed Insights Tavsiyeleri: Fırsatlar
- PageSpeed Insights Tavsiyeleri: Teşhisler
- Özet
PageSpeed Insights, Fırsatlar bölümü ile sayfanızın daha hızlı yüklenmesine yardım edebilecek performans ölçütleri üzerine tavsiye vermek ister.
Eğer Google’ın Page Speed (Sayfa Hızı) testinde %100 puan istiyorsanız, bu tavsiyelere dikkatinizi vermeniz gerekiyor.
Her tavsiyeye, önerilen düzeltmeleri uygulayarak kazanabileceğiniz muhtemel zaman tasarrufu eşlik eder.
Fırsatlar bölümünün örneğini yukarıda görüyorsunuz: Kullanılmayan CSS’leri (Basamaklı Stil Şablonlar) kaldırmak, bu sayfanın 0.45 saniye yükleme süresi kazanmasını sağlayabilir.
Bu bölümde en yaygın PageSpeed Insights tavsiyelerini ve bunlara nasıl yaklaşacağımızı görelim.
- Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın
- Kullanılmayan CSS’leri Kaldırın
- Sunucu Yanıt Süresini Düşürün
- CSS (Basamaklı Stil Şablonlar) ve JavaScript’i Küçültün
- Çoklu Sayfa Yönlendirmeleri
- Metin Sıkıştırmayı Etkinleştirin
- Gerekli Kaynaklara Ön Bağlantı Kurun
- Anahtar İsteklere Önyükleme Yapın
- Ekran Dışı Görselleri Erteleyin
- Görselleri Uygun Şekilde Boyutlandırın
- Görselleri Etkin Bir Şekilde Kodlayın ve Optimize Edin
- Görselleri Yeni Nesil Formatta Sunun
Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın
Google bu öneriyle internet sayfanızın ekranın en üst görünür kısmındaki içeriği yüklemesine müdahale edecek kritik CSS/JB’yi satır içi teslim etmenizi ve JavaScript ile CSS dosyalarını ertelemenizi ister.
Ekranın en üst görünür kısmındaki içerik, kullanıcılarınızın sayfayı açar açmaz kaydırma yapmadan önce gördükleri içeriktir.
Oluşturmayı engelleyen kaynakları (Render-Blocking resources) ortadan kaldırmanız istendiğinde (komut dizisi (script) veya stil şablonu (stylesheet) olsun), PageSpeed’in ne demek istediğini anlamak için, oluşturmayı engelleyen kaynakların ne olduğunu anlamak zorundayız.
Tarayıcı bir internet sayfasını görüntülemeden önce, HTML’ini oluşturmak zorundadır. Bu süreçte, tarayıcı her ne zaman bir komut dizisi veya stil şablonuna (stylesheet) başvuran bir unsurla karşılaşırsa; durmak, dosyayı talep etmek, sunucudan indirmesini beklemek ve sonunda HTML’i öğelerine ayırmaya devam etmeden önce yürütmek zorundadır.
Çoğu WordPress teması ve eklentisi sadece tek bir tane değil, çoklu CSS ve/veya JavaScript dosyası yüklerken, bu işlem sayfanın ilk oluşturulma zamanını epey önemli bir ölçüde geciktirebilir.
Bazı CSS ve JavaScript kaynakları, sayfada herhangi bir şey görüntülenmeden önce indirilmek ve işlenmek zorundayken (bunlara kritik kaynaklar denmektedir), diğer bazıları herhangi bir sorun ya da kullanıcı deneyimi kaybı olmaksızın ikinci kez ertelenebilir ve yüklenebilir.
Kritik olmayan kaynakların yüklemesini ertelemek ve tarayıcı sayfayı oluşturduktan sonra yüklemesini sağlamak, yükleme süresinden birkaç (mili)saniye tasarruf etmek için iyi bir uygulamadır.
Peki, oluşturmayı engelleyen JavaScript/CSS yüklemesi nasıl ertelenir?
Bu, kodunuzu kazmayı ve düzenlemeyi içerdiğinden, bu ince ayara manuel bir yaklaşım biraz zorlu olabilir. Eğer programlı olarak ilerlemeyi tercih ediyorsanız, işte size oluşturmayı engelleyen JavaScript nasıl kaldırılır ve oluşturmayı engelleyen CSS’i ortadan kaldırma konusunda örnek.
En kolay çözüm, size sunduğumuz TurboPak gibi bir eklenti kullanmaktır!
Eklentimiz PageSpeed Insights tavsiyelerini düzeltmeye yardımcı olacak seçenekler içermektedir, bunlardan bazı örnekler şunlardır:
- CSS teslimini optimize edin
- JavaScript’i ertelenmiş olarak yükleyin
Bazen, tüm oluşturmayı engelleyen CSS ve JavaScript’i tamamen ortadan kaldırmanın çok zor olabildiğini (eğer imkânsız değilse) fark etmeye değer. Bu sonuca erişme olasılığı yüksek derecede kullandığınız tema ve eklentilerin WordPress sitenizde nasıl kodlandığına bağlı olacaktır.
Eğer internet sitenizi en başından kendiniz kodlamadıysanız ve bunun yerine diğer geliştiricilerin yazdığı bir tema ve eklentilere güveniyorsanız, bunların üzerinde %100 kontrole sahip olamayacağınızı öylece kabul etmek zorundasınız.
Bazen bu süreç bozulmuş bir sayfaya sebep olabileceğinden (ki bu Google PageSpeed Insight tarafından verilen “kırmızı puan”dan daha kötüdür), tüm CSS ve JavaScript oluşturmayı engelleyen kaynakları erteleyememek normaldir.
Kullanılmayan CSS’leri Kaldırın
Kullanılmayan kuralları stil sayfalarınızdan (stylesheets) kaldırmak, sitenizin gereksiz yükünü azaltacaktır.
Buna kullanılmayan CSS diyoruz.
Örneğin, sayfa yüklendikten sonra ihtiyacınız olabilecek stil sayfalarını (stylesheets) bir düşünün, başka bir deyişle, sadece belirli bir tuşa tıkladıktan sonra beliren kalıcı pencerenin CSS’i.
Kullanılmayan CSS’in başka bir tipik durumu, sizin önceden-oluşturulmuş WordPress teması ve eklentiler kullanıyor oluşunuzdur: bunlar tipik olarak her sayfa için gerekenden fazla kod içeriyordur, çünkü tema / eklenti yayınlayıcısı kullanıcının sitelerini nasıl oluşturacağını tahmin edemez.
Peki, kullanılmayan CSS nasıl kaldırılır?
Bu görevi hassasiyetle otomatikleştirmek çok zordur, hatta kullanılmayan CSS’i elle kaldırmak daha da zordur.
Chris Coyer, CSS Tricks’in yazarı, bunun tüm sebeplerini açıklıyor.
En kolay yolu TurboPak hizmetimizi kullanmanızdır.
Sunucu Yanıt Süresini (TTFB) Azaltın
Eğer sunucunuz kullanıcıların isteklerine yavaş bir şekilde yanıt veriyorsa, sitenizin genel kullanıcı deneyimi etkilenecektir.
Daha önce WordPress sayfa hızını optimize etme hakkındaki kılavuzumuzda belirttiğimiz gibi, hızlı bir sunucu internet sitesi performansının temel bir unsurudur.
Google PageSpeed sizden sunucu yanıt süresini azaltmanızı istediğinde, esasında İlk Bayt Süresi (Time to First Byte) olarak bilinen gösterge işaret edilmektedir.
Sitemizde yayınladığımız yazılarımızda bu konuya zaten değindik.
CSS ve JavaScript’i Küçültün
Bu iki tavsiye, en popüler kod optimizasyon tekniklerinden biri ile ilgilidir: küçültme (minification)
Küçültme (minification); HTML sayfalarını, CSS ve JavaScripts komut dizisini (insanlar için tabii ki) daha az okunabilir ama daha hızlı yüklenebilir yapan bir tekniktir!
Bu yöntem, geliştiricilerin internet sayfaları ve komut dizisi dosyalarına (script files) eklemeye meyilli oldukları tüm gereksiz karakterleri, biçimlendirmeleri (markups), boşlukları ve yorumları kaldırır.
Geliştiriciler aslında geliştirme süreçlerinde sayfaları ve komut dizilerini daha iyi okunabilir yapmak için yorumlara, biçimlendirmelere ve boşluklara ihtiyaç duyarlar.
Ancak başyapıtları bittiğinde ve internet sitesi çevrimiçi olduğunda, tüm bu ilave unsurlar gereksiz hale gelmektedir: ağ trafiğini artırırlar ve ağ isteklerinin bant genişliğini yüklerler.
O sırada küçültme (minification) kullanışlı olmaktadır: kodu daha yalın yapar, böylece son kullanıcı kodu daha hızlı alacak ve genel yükleme süresi gelişecektir.
Peki, CSS ve JavaScript dosyalarını nasıl küçültebilirsiniz?
CSS ve JavaScript’lerinizi küçültmek için iki yol mevcut:
- Manuel bir şekilde (el ile)
- Otomatik olarak, bir eklenti ile
Dosyalarınızı manuel bir şekilde nasıl küçültebileceğinizi öğrenmek için sitemizde yazılarımızı okuyabilirsiniz.
Küçültmeyi otomatik bir şekilde halletmek ve manuel ince ayarları unutmak için, bir WordPress eklentisi kullanabilirsiniz.
Piyasada birçok etkili küçültme eklentisi mevcut, ama öte yandan, TurboPak sizin için mükemmel çözüm olabilir!
Eklentimiz hem CSS hem de JavaScript küçültmesine ek olarak, CSS ve JavaScript birleştirmesini de içerir:
- CSS Dosyalarını Küçültün ve Birleştirin
- JavaScript Dosyalarını Küçültün ve Birleştirin
Oluşturmayı engelleyen kaynakları ortadan kaldırma konusundaki not için önceden de bahsedildiği gibi, küçültme ve birleştirme bazen sayfanızın düzenini bozabilen gelişmiş özelliklerdir.
Bu her zaman, kullandığınız temanın ve diğer eklentilerin koduna bağlıdır: bazı JavaScript veya CSS dosyaları, küçültme ile uyumsuz olabilir, bu yüzden bu tekniği uyguladığınızda gözlerinizi daima açık tutmalısınız.
Küçültme/birleştirme ile ilgili potansiyel sorunları nasıl düzelteceğinizi anlamak için diğer yazılarımızı da kontrol edin.
Çoklu Sayfa Yönlendirmeleri
301 yönlendirmeleri, tarayıcınıza bir HTTP isteğinin farklı bir kaynak konumundan geldiğini bildirmek ve 404 hatalarından kaçınmak için gerçekten de çok önemlidir, ancak yönlendirmeler biriktirildiğinde, sayfanızı yavaşlatmaya meyillidirler.
PageSpeed Insights, bir sayfa ikiden fazla yönlendirme içerirse bu yönlendirmeleri bir problem olarak değerlendirir.
İdeal çözüm, tabii ki, kaynakları tekrar yönlendirmek için özgün bağlantıları güncellemektir.
Metin Sıkıştırmayı Etkinleştirin
PageSpeed Insights bu tavsiye ile sizden GZIP sıkıştırmasını etkinleştirmenizi istiyor.
Google’ın açıkladığı gibi:
Metin sıkıştırma, metin içeriğini barındıran ağ yanıtlarının bayt boyutunu küçültür. İndirilmiş daha az bayt, daha hızlı sayfa yükleme hızı anlamına gelir.
GZIP sıkıştırması, WordPress sitenizi hızlandırmak için çok popüler ve etkili bir yöntemdir, çünkü sayfanızın toplam boyutunu azaltır ve ilk boyamaya kadar geçen süreyi (TFP – time to first paint) geliştirir.
GZIP sıkıştırmayı WordPress sitenize uygulamak konusunda bilmeniz gerekenler yazılarımızda vardır.
Gerekli Kaynaklara Ön Bağlantı
Bu PageSpeed uyarısı, internet sitenizde her üçüncü taraf içeriği olduğunda (örneğin, Google’dan yüklenen yazı tipleri veya YouTube’tan bir video) belirir ve onların uyan DNS çözünürlüklerini önceden getirmezsiniz.
DNS Önceden Getirme (DNS Prefetching) Nedir?
Ön yükleme (preload), önceden getirme (prefetch) ve ön bağlantı (preconnect) arasındaki farklar hakkındaki kısa temel bilgi:
Önceden getirme ile eğer kullanıcı beklediğiniz harekette bulunursa, gelecek bir gezinti veya etkileşimin parçası olarak, tarayıcınıza kullanıcının daha sonra gereksinim duyabileceğini düşündüğünüz kaynakları getirmesini söyleyebilirsiniz. Bu kaynaklar, güncel sayfa yüklemeyi tamamlar ve müsait bant genişliği olursa, daha sonra tarayıcınızdaki en düşük öncelikte getirilecektir.
Özellikle, kullanıcılar tarama yaparken, DNS önceden getirme ile tarayıcınıza sayfanızda DNS aramalarını yürütmesini söyleyebilirsiniz: dış kaynaklar istendiğinde, gecikmeyi azaltacak olan DNS çözünürlüğü zaten işlenmiş olacak.
DNS isteklerini önceden getirme yükleme sürenize destek verebilir.
Anahtar İsteklere Önyükleme Yapın
Bu uyarı Kritik Oluşturma Yolu (Critical Rendering Path) optimizasyon stratejisini ifade etmektedir. Kritik Oluşturma Yolu (CRP) bazı kaynakları diğerlerinden önce ön planda tutmakta ve yükleme sırasına karar vermede kullanışlıdır.
Bu şekilde tarayıcı sayfayı daha hızlı yükleyebilir.
Bu PageSpeed Insights tavsiyesini düzeltmek için, HTML’inizdeki önyükleme bağlantılarını bildirmelisiniz, böylece tarayıcı kritik kaynakları mümkün olduğunca kısa bir sürede indirmesi gerektiğini bilir.
Ekran Dışı Görselleri Erteleyin
Ekran dışı görseller, kullanıcı bir sayfayı açtığında hemen görünmeyenlerdir. Ekranın görünmeyen kısmındaki görseller olarak da adlandırılırlar.
Kullanıcılar, bir sayfa yüklendiğinde onları göremediğinden, yükleme sürecinin bir parçası olarak indirmenin bir anlamı yoktur.
Bu tavsiye ile PageSpeed sizden ekran dışı görsellerin yüklemesini sonraki bir aşamaya ertelemenizi istiyor, yani kullanıcı sayfayı kaydırdığında ve ekranın görünmeyen kısmındaki içeriği istediğinde görülmesini istiyor.
Ekran dışı görselleri ertelemek için, onlara tembel yükleme yapabilirsiniz.
LazyLoad (Tembel Yükleme), görsel yüklemesini ertelemenizi sağlar.
Resim dosyalarınıza manuel bir şekilde tembel yükleme yapabilir) veya bunun yerine bir eklenti kullanabilirsiniz.
Eğer bu ikinci seçeneği tercih ediyorsanız, TurboPak en iyi seçeneklerinizdendir.
İkisinden birini seçtiğinizde, PageSpeed Insights tatmin olacaktır ve böylece ertelenmemiş ekran dışı görseller hakkındaki uyarıları düzeltmelidir.
Görselleri Uygun Şekilde Boyutlandırın
Görsel/Görüntü optimizasyonu sanatında ustalaşmak, kolaylıkla öğrenebileceğiniz bir şeydir.
Bu size sayfa hızında büyük bir gelişme kazandırır ve Google PageSpeed (Sayfa Hızı) sizi bunun için ödüllendireceğini kesinlikle fark edecektir!
Görsellerinizi uygun bir şekilde boyutlandırmak ve optimize etmek için, yazılarımızda kapsamlı bir şekilde tanımladığımız görselleriniz nasıl sıkıştırılır ve dosya boyutları nasıl azaltılır üzerine birkaç adımı izlemelisiniz.
Görselleri Etkin Bir Şekilde Kodlayın ve Optimize Edin
Görüntü kodlama, görselleri daha etkili ve sıkıştırılmış bir formatta saklama işlemidir.
Görselleri optimize etmek, resimlerinizin daha hızlı yüklenmesini sağlamak için gerekli olan önlemler kümesidir, örneğin:
- Doğru görsel formatını seçin
- Dosya boyutlarını düşürün
- Dikkatlice sıkıştırın
Eşsiz ve etkili bir araç ile görsel optimizasyon stratejinizi halletmek için bir eklenti (TurboPak veya başka biri) kullanabilirsiniz.
Dosyalarınız üzerinde çalışmanızda ve görsellerle ilgili PageSpeed uyarılarının büyük çoğunluğunu düzeltmenizde yardımcı olacaktır.
Görselleri Yeni Nesil Formatta Sunun
Bu tavsiye ile PageSpeed sizden JPEG 2000, JPEG XR ve WebP gibi daha modern görsel formatları/görüntü biçimleri kullanmanızı istiyor.
Bu görsel formatlar, kalite ve sıkıştırma özelliği açısından “daha eski” kardeşleri olan JPEG ve PNG görsellerinden üstündür:
Daha hızlı yükleyebilir ve daha az mobil veri tüketirler.
Bizim sunduğumuz TurboPak’ın içinde olan görüntü optimizasyon işlevimiz, görselleri WebP formatına çevirebilir, bu yüzden bundan faydalanmakta tereddüt etmeyin!
Gördüğünüz gibi, birkaç tıklama ile TurboPak en önemli PageSpeed Insights Fırsatlarını ele almanın en kolay yoludur.
Hadi sonraki bölüme geçelim!
PageSpeed Insights Tavsiyeleri: Teşhisler
Teşhisler bölümüne dahil edilen tüm tavsiyeler performansa ve geliştirmeye yardım edebilecek en iyi uygulamalara odaklıdır.
Bu bölümde en yaygın PageSpeed Insights tavsiyelerinin hangileri olduğunu ve bunları düzeltmek için neler yapabileceğinizi görelim.
- İnternet Yazı Tipi Yüklemesinde Metnin Görünür Kaldığından Emin Olun
- Ana İş Parçacığı Çalışmasını En Aza İndirin ve JS Yürütme Süresini Azaltın
- Statik Varlıkları Verimli Bir Önbellek Politikasıyla Sunun
- Çok Büyük Ağ Yüklerinden Kaçının
- Aşırı Büyük Bir DOM Boyutundan Kaçının
- Kritik İsteklerin Derinliğini En Aza İndirin
İnternet Yazı Tipi Yüklemesi (Webfont Load) Sırasında Metnin Görünür Kaldığından Emin Olun
Bu PageSpeed uyarısı, çoğu kez sayfaları çok yavaşlatacak büyük dosyalar olan internet yazı tiplerinin (web fonts) yüklemesiyle ilgilidir.
Bazı tarayıcılar, yazı tiplerinin yüklenmesini beklerken, sayfadaki metni gizler, ki bu “görünmez metnin flaşı” olarak bilinen bir etki oluşturur.
Ancak bu çözüm kullanıcı deneyimini kolaylaştırmaz: bu durumda ideal çözüm kullanıcıların sistemin yazı tipini kullanarak metni hemen görmelerine müsaade etmektir.
Bu sözüm ona “stilsiz metnin flaşı” etkisini üretecektir: ancak sistem yazı tipini varsayılan değer kabul etmek, tarayıcının sisteminde zaten bulunan bir yazı tipini kullanacağından, tarayıcının yükleme süresinden önemli derecede tasarruf etmesini sağlayacaktır.
Sizin başlangıçta seçtiğiniz internet yazı tipi tamamen indirildikten sonra kullanıcıya görünür olacaktır:
Eğer siz “stilsiz metnin flaşı çözümü”nü tercih ederseniz, kimse sayfadaki görünmeyen metne gözünü dikip beklemek zorunda kalmayacaktır.
Google Yazı Tipleri desteği olan bir eklenti ile bu sorunu aşabilirsiniz.
Ana İş Parçacığı Çalışmasını En Aza İndirin ve JavaScript Yürütüm Süresini Azaltın
Bu tavsiyeler, JavaScript komut dizisi kullanımı ve sayfanızın yükleme performansı üzerine etkisi ile ilgilidir.
JavaScript’in internet siteniz için yüksek bir bedeli vardır: indirildikten sonra tarayıcı tarafından “okunmalı” ve “anlaşılmalı” (çözümlenmiş ve derlenmiş) ve sonra tarayıcı içinde uygulanmalıdır.
Sayfanızda bulunan daha fazla JavaScript, tarayıcınızın bunu çözümleme, derleme ve uygulaması için daha fazla zamana ihtiyacının olmasıdır.
“Ana iş parçacığı çalışmasını en aza indirin” konusundaki nota göre, PageSpeed’in tanımlaması şudur:
JavaScript’i çözümleme, derleme ve uygulamaya harcanan zamanı azaltmayı bir düşünün.
Daha küçük JavaScript yükleri teslimi için bunun yardımı olduğunu keşfedebilirsiniz.
JavaScript yürütüm süresini azaltmak ve ana iş parçacığı çalışmasını en aza indirmek için, kullanılmayan JavaScript’leri kaldırmalısınız.
Sayfanızdan istenmeyen JavaScript’leri kaldırmanıza yardımcı olabilecek, şu gibi belirli eklentileri kullanabilirsiniz:
- Plugin Organizer
- Asset CleanUp
- Gonzales plugin
Bunları dikkatli bir şekilde kullanın ve kullanmadan önce geliştiricilerine ve/veya dokümantasyonlarına başvurun.
Tabii ki sizin için en hızlı ve en etkin yol TurboPak hizmetimizi kullanmanızdır.
Statik Varlıkları Verimli Bir Önbellek Politikasıyla Sunun
Önbellek politikası (cache policy) sayfalarınızın önbelleğe alındığından ve hızlıca yüklendiğinden emin olmak için uygulanacak adımlar kümesidir.
Yükleme süresi ve önbelleğe alma (caching) konusundaki yazılarımızda zaten gördüğümüz üzere, ne zaman mümkünse denetlemeniz ve sitenize uygulamanız gereken mevcut birçok önbelleğe alma katmanı vardır: sayfa önbelleğe alma (page caching), sunucu tarafında önbelleğe alma (server-side caching), nesne önbelleğe alma (object caching) ve tarayıcı önbelleğe alma (browser caching).
Google PageSpeed statik varlıkları verimli bir önbellek politikasıyla sunmanızı istiyorsa, bu tarayıcı önbelleğe almayı (browser caching) işaret etmektedir.
Eğer TurboPak hizmetimizi kullanıyorsanız, bunun hakkında endişelenmenize gerek yok.
Çok Büyük Ağ Yüklerinden Kaçının
Burada PageSpeed sizden ağ isteklerinin sayısını azaltmanızı istiyor.
Ağ istekleri sayfa yükleme hızında büyük bir etkiye sahiptir ama ayrıca kullanıcı deneyimi, hemen çıkma oranı ve SEO’yu da etkilemektedir.
Aşırı Büyük Bir DOM Boyutundan Kaçının
DOM unsurları bir sayfadaki tüm etiketlerdir (DIV, HTML, BODY ve benzeri gibi).
Google’ın İnternet Geliştiriciler Kılavuzuna göre, optimal bir DOM ağacı şu özellikleri içermektedir:
- Toplamda 1500 düğümden az düğüm vardır.
- En fazla 32 düğüm derinliğine sahiptir.
- 60 alt düğümden daha fazlasına sahip bir üst düğüm yoktur.
Genel konuşmak gerekirse, aşırı büyük bir DOM boyutunu azaltmak için kullandığınız temaları ve eklentileri gözden geçirmelisiniz: bunu doğrudan sitenizin tasarımını ele alarak veya geliştiricilerden yardım isteyerek yapabilirsiniz.
Kritik İsteklerin Derinliğini En Aza İndirin
Bu not, bir sayfada yüksek bir öncelikle yüklenen kaynakların listesi olan Kritik İstekler Zincirlerine işaret etmektedir.
Bu “geçmek” veya “kalmak” anlamına gelen bir denetleme değildir, ancak eğer bunu ele alırsanız, sitenizin sayfa yükleme performansını geliştirebileceksiniz.
PageSpeed Insights “sayfa yükünü geliştirmek için zincirlerin uzunluğunu azaltarak, kaynakların indirme boyutunu küçülterek veya gereksiz kaynakların indirilmesini erteleyerek” bu denetimle başa çıkmayı öneriyor.
TurboPak ile, oluşturmayı engelleyen CSS/JavaScript’i kaldırarak Kritik İstek Derinliğini En Aza İndirme faktörünü geliştirebilirsiniz; bu da yukarıda zaten sunduğumuz seçenekleri etkinleştirmek anlamına gelmektedir:
- CSS teslimini optimize edin
- Ertelenmiş JavaScript’i yükleyin
- JavaScript dosyalarını birleştirin
Özet
Bu yazıda Teşhisler ve Fırsatlar bölümleri altında dosyalanmış PageSpeed Insights tavsiyelerini nasıl yorumlayacağınızı ve ele alacağınızı öğrendiniz.
Uyarılarını yorumlamayı öğrenerek, internet sitenizin sağlığını denetleyebilecek ve PageSpeed puanınız ile Temel Web Hayati Verilerini nasıl geliştireceğinizi anlayabileceksiniz.
Temel Web Yaşamsal Verileri (core web vitals – CWV) hakkında sitemizdeki yazılarımız, LCP, FID ve CLS’in nasıl optimize edileceğini öğrenmenin en kolay ve en hızlı yoludur. Zamandan tasarruf edin ve performans görevlerinize nasıl öncelik vereceğinizi keşfedin.
Kendi zamanınızdan tasarruf edin ve TurboPak’ın işi sizin yerinize yapmasına izin verin.
TurboPak, internet performansı en iyi uygulamalarını otomatik olarak ve 7 gün 24 saat uygulayacaktır.
Herhangi bir ayara dokunmanıza bile gerek yok. Hızda ve PageSpeed puanınızda hemen ani bir gelişme göreceksiniz – hiçbir teknik bilgi gerekmez, söz veriyoruz!
Siz de fikrinizi belirtin