Mobil Sayfa Hızı Optimizasyonu: Pratik Uygulamalar

Mobil sayfa hızını iyileştirmenin en sağlam yolu, üç Core Web Vitals metriğine odaklanmaktır: LCP (yükleme), INP (yanıt verme) ve CLS (görsel kararlılık). Google'a göre iyi değerler LCP için 2,5 saniyenin altı, INP için 200 milisaniyenin altı ve CLS için 0,1'in altıdır. Ölçümü mutlaka mobilde, gerçek kullanıcı saha verisiyle birlikte yapmalısın.

Ziyaretçilerinin büyük bölümü siteni telefondan açıyor. Masaüstünde sorunsuz görünen bir sayfa, daha zayıf işlemci ve dalgalı mobil bağlantı altında bambaşka davranabilir. Bu yüzden mobil hız, masaüstü hızının küçük bir alt başlığı değil; ayrı ölçülmesi ve ayrı optimize edilmesi gereken bir konudur. Aşağıda mobile özgü darboğazları ve bunları çözmenin pratik yollarını sırayla ele alıyoruz.

Mobilde hız neden kritik

Hız, hem kullanıcı deneyimini hem de aramadaki görünürlüğü doğrudan etkiler. Google Search Central'a göre Core Web Vitals metrikleri, çekirdek sıralama sistemlerinin ödüllendirdiği sinyallerle uyumludur ve bu metrikler sayfanın gerçek dünya deneyimini ölçer (Google Search Central). Yani hız tek başına sihirli bir sıralama anahtarı değildir, ama zayıf bir deneyim seni geride bırakır.

Mobil tarafta işin zorluğu donanımdan gelir. Telefonların işlemcisi masaüstüne göre daha kısıtlıdır, bağlantı kalitesi değişkendir ve ekran küçük olduğu için düzen kaymaları çok daha rahatsız edicidir. Aynı kod, aynı görsel, mobilde genellikle daha yavaş açılır ve daha geç tepki verir. Bu nedenle optimizasyona her zaman mobil senaryoyu merkeze alarak başlamak gerekir.

Bir de algı boyutu var. Mobil kullanıcı genellikle hareket halindedir, dikkati bölünmüştür ve sayfa hemen açılmazsa beklemeye çok daha az tahammül gösterir. Sayfa yavaş açıldığında veya dokunduğu butona geç tepki geldiğinde, ziyaretçi çoğu zaman sebebini düşünmeden geri tuşuna basar. Bu yüzden mobil hızı yalnızca teknik bir metrik olarak değil, doğrudan dönüşüm ve kalıcılık meselesi olarak görmek gerekir. İyi bir mobil deneyim, kullanıcının siteyle ilk birkaç saniyede kurduğu güveni de belirler.

Üç metriği tanımak

Core Web Vitals üç ölçütten oluşur. LCP (Largest Contentful Paint), görünür alandaki en büyük görsel, metin veya video bloğunun ekrana çizilme süresini ölçer; web.dev'e göre iyi LCP eşiği 2,5 saniye veya altıdır (web.dev LCP). INP (Interaction to Next Paint), sayfanın etkileşimlere ne kadar hızlı yanıt verdiğini gösterir ve 200 milisaniye veya altı iyi kabul edilir; INP, yalnızca ilk etkileşimi ölçen eski FID metriğinin yerine geçen halef metriktir ve sayfadaki tüm tıklama, dokunma ve klavye etkileşimlerini değerlendirir (web.dev INP). CLS (Cumulative Layout Shift) ise beklenmedik düzen kaymalarını ölçer; iyi skor 0,1 veya altıdır (web.dev CLS).

Mobil saha verisi

Hız ölçümünde en sık yapılan hata, tek bir test sonucuna bakıp karar vermektir. Aslında iki ayrı veri türü vardır ve ikisi de gereklidir. Saha (field) verisi, sayfanı gerçekten ziyaret eden kullanıcıların deneyiminden gelir. Lab verisi ise kontrollü bir ortamda, simüle edilmiş koşullarla üretilir.

Boosmart'ın PageSpeed Insights rehberine göre saha verisi, gerçek kullanıcıların son 28 günlük Chrome (CrUX) verisinden gelir; lab verisi ise yavaş ağ ve eski cihaz simülasyonuyla kontrollü biçimde ölçülür ve bu iki veri PageSpeed Insights içinde ayrı sekmelerde izlenir (Boosmart). Pratikte şu anlama gelir: lab skorun yüksek olabilir ama gerçek kullanıcıların mobil deneyimi yine de zayıf çıkabilir. Karar verirken saha verisini önceliklendir, lab verisini ise sorunun nereden kaynaklandığını anlamak için kullan.

75. yüzdelik dilim mantığı

web.dev'e göre LCP gibi metrikler, mobil ve masaüstü genelinde sayfa yüklemelerinin 75. yüzdelik diliminde değerlendirilir (web.dev LCP). Bu, kullanıcıların yaklaşık dörtte üçünün senin belirlediğin eşiğin altında bir deneyim yaşaması gerektiği anlamına gelir. Ortalama değil, kötü uçtaki kullanıcıların deneyimi belirleyicidir. Mobil kullanıcılar çoğunlukla bu kötü uçta yoğunlaştığı için, mobil saha verisini ayrı okumak şarttır. Masaüstü ortalaması iyi görünürken mobil yüzdelik dilimin sınıfta kalması çok yaygın bir tablodur.

Görsel ve font yükleme

Mobilde LCP'yi en çok bozan unsur genellikle büyük hero görselidir ve düzen kaymalarının (CLS) başında boyutsuz görseller ile geç yüklenen fontlar gelir. Bu yüzden görsel ve font yönetimi, mobil hızda en yüksek getirili çalışma alanıdır.

Magmaroot'un rehberine göre pratik LCP iyileştirmeleri arasında hero görselini WebP veya AVIF formatına çevirmek, görsele fetchpriority="high" eklemek, kritik CSS'i satır içine almak (critical CSS inline), fontu preload ile önceden yüklemek ve sunucu yanıtını CDN/cache ile 200 milisaniyenin altına çekmek yer alır (Magmaroot). Mobilde bunlara responsive görsel mantığını eklemelisin: srcset ve sizes ile küçük ekrana küçük dosya servis et, böylece telefon gereksiz büyük bir görseli indirip işlemekle uğraşmasın.

Görselin neden bu kadar belirleyici olduğunu anlamak için LCP'nin ne ölçtüğünü hatırlamak yeterli. web.dev'e göre LCP, görüntü alanındaki en büyük görsel, metin veya video bloğunun render süresidir (web.dev LCP). Mobilde ekranın büyük kısmını çoğu zaman tek bir hero görseli kaplar ve bu görsel doğrudan LCP elemanı olur. Dolayısıyla o tek görseli hafifletmek, doğru boyutta servis etmek ve öncelikli yüklemek, çoğu sitede mobil LCP'yi tek başına eşik altına çekebilir. Ekranın hemen görünmeyen alt kısmındaki görselleri ise tembel yükleme (lazy loading) ile ertelemek, ilk yükte indirilen veriyi azaltır.

Düzen kaymasını önlemek

Metatitle'ın Core Web Vitals rehberine göre CLS'i önlemek için tüm görsellere width ve height değerleri vermek veya CSS aspect-ratio kullanmak, reklam ve widget alanlarını önceden rezerve etmek gerekir (Metatitle). Fontlar tarafında ise font-display: swap kullanmak, yazı tipi yüklenene kadar metnin görünür kalmasını sağlar. web.dev'e göre fallback fonttan farklı yüklenen yazı tipleri düzen kaymasının başlıca nedenlerinden biridir, bu yüzden font davranışını kontrol altına almak hem CLS'i hem de algılanan hızı iyileştirir (web.dev CLS).

Görsel formatı: hero ve içerik görsellerini WebP/AVIF olarak servis et.
Boyut sabitleme: her görsele width/height ya da aspect-ratio ver.
Font kontrolü: kritik fontu preload et, font-display: swap kullan.

Etkileşim gecikmesi

INP, mobilde en zor geçilen metriktir ve nedeni doğrudan donanımla ilgilidir. Kullanıcı bir butona dokunduğunda tarayıcının yanıt verebilmesi için ana iş parçacığının boşta olması gerekir. Mobil işlemci zaten kısıtlıyken ağır JavaScript ana iş parçacığını bloke ederse, dokunma ile ekranın güncellenmesi arasındaki gecikme uzar. web.dev'e göre INP tek bir etkileşimi değil, sayfadaki tüm etkileşimleri değerlendirdiği için bu gecikmeleri saklamak da zorlaşır (web.dev INP).

En sık suçlu, üçüncü taraf scriptlerdir: analitik, sohbet widget'ları, reklam ağları ve sosyal medya gömülü içerikleri. Bunlar mobilde orantısız bir yük bindirir. Metatitle'a göre INP için JavaScript'i ertelemek ve üçüncü taraf scriptleri lazy-load etmek (geç yüklemek) önerilir (Metatitle). Uzun JavaScript görevlerini daha küçük parçalara bölmek, gerçekten gerekmeyen scriptleri kaldırmak ve etkileşimle ilgisi olmayan kodu sayfanın yükü hafifledikten sonra çalıştırmak, mobil INP'yi belirgin biçimde rahatlatır.

Pratik bir yaklaşım, her üçüncü taraf entegrasyonunu "gerçekten gerekli mi" sorusuyla gözden geçirmektir. Kullanılmayan bir analitik aracı, eski bir kampanya pikseli ya da nadiren açılan bir sohbet penceresi, mobil cihazda her ziyaretçi için bedel ödetir. Gerekli olanları ise kullanıcı sayfayla etkileşime geçtiği anda yüklemek, ilk açılışta ana iş parçacığını boş bırakır. Böylece kullanıcı ilk dokunuşunu yaptığında tarayıcı meşgul olmaz ve yanıt anında gelir. Mobilde küçük görünen bu düzenlemeler, kısıtlı işlemci nedeniyle masaüstüne göre çok daha büyük fark yaratır.

FID değil INP

Burada güncel bir ayrım önemli. Birçok Türkçe kaynak hâlâ eski FID (First Input Delay) metriğini anlatıyor. Oysa INP, FID'nin halefi olarak resmi Core Web Vitals metriği konumundadır ve FID'den farklı olarak yalnızca ilk etkileşimi değil tüm etkileşimleri ölçer (web.dev INP). Eğer bir rehber sana hâlâ yalnızca FID'yi gösteriyorsa, o içerik güncel değildir. Optimizasyon kararlarını INP üzerinden vermelisin.

Mobil test akışı

Ölçüm yapmadan iyileştirme yapmak, körlemesine ilerlemektir. Aşağıdaki akış, mobil hızı doğru okumanı sağlar ve hem saha hem lab verisini birlikte değerlendirir.

PageSpeed Insights mobil sekmesi: Sayfa URL'ini test et ve önce saha verisine bak. Boosmart'a göre PageSpeed Insights saha ve lab verisini ayrı gösterir, bu yüzden mobil ve masaüstü sonuçlarını da ayrı izle (Boosmart).
Search Console Core Web Vitals raporu: Sitendeki sayfaları toplu olarak mobil ve masaüstü için ayrı gruplar halinde gösterir. Hangi sayfa gruplarının zayıf olduğunu buradan bulursun.
Lighthouse: Lab ortamında sorunun kaynağını teşhis etmek için kullan. Lab skoru sana hangi görselin LCP olduğunu, hangi scriptin ana iş parçacığını bloke ettiğini söyler.

Bu üçlüyü birlikte oku. Saha verisi gerçek sorunu, lab verisi ise sorunun nedenini gösterir. İkisini karıştırma; saha verisi kötü ama lab skoru iyiyse, muhtemelen gerçek kullanıcıların ağ ve cihaz koşulları senin test ortamından farklıdır.

Wix ve Ikas gibi platformlarda durum

Hazır platformlar hız konusunda hem kolaylık hem kısıt sunar. Wix, Ikas gibi sistemlerde altyapının tamamına müdahale edemezsin; tema kodu, script yükleme sırası ve bazı kaynak optimizasyonları platformun kontrolündedir. Yine de elinde belirgin kaldıraçlar kalır: yüklediğin görselleri doğru formatta ve doğru boyutta hazırlamak, gereksiz uygulama ve üçüncü taraf entegrasyonlarını azaltmak, ağır gömülü içerikleri sadeleştirmek mobil hıza doğrudan yarar. Platform sınırları nedeniyle her teknik (örneğin tam kritik CSS kontrolü) mümkün olmayabilir, bu yüzden kontrol edebildiğin alanlara odaklanmak en verimli yaklaşımdır.

Burada asıl mesele süreklilik. Mobil hız tek seferlik bir iş değildir; her yeni görsel, her yeni script ve her tema güncellemesi metrikleri değiştirebilir. Bu yüzden mobil Core Web Vitals değerlerini düzenli izlemek ve bir gerileme olduğunda erken yakalamak gerekir.

VixSEO, Wix, Ikas ve özel kurulu siteler için mobil hız metriklerini tek panelden takip etmeni kolaylaştırmayı amaçlar. Sitenin mobil Core Web Vitals durumunu görmek ve nereye öncelik vereceğini netleştirmek istersen araçlarımıza ya da hizmetlerimize göz atabilirsin.