Merhaba, ben Arda Yılmaz. Mobil hız artık lüks değil. Kullanıcı sabrı saniyelerle ölçülür. Ayrıca erişim engelleri akışı bozabilir. Bu yüzden giriş adımı net olmalı. Önce sayfa hafif olmalı. Ardından yönlendirme sayısı azalmalı. Sonra görseller akıllı sunulmalı. Ben tüm testlerde aynı yolu izlerim. Çünkü tekrar eden adımlar şeffaf sonuç verir. Böylece “neden yavaşladım” sorusu kaybolur.

Öncelikle giriş akışını bir harita gibi düşün. Adres çözümü, ilk bayt, ilk içerik boyaması. Ayrıca etkileşime hazır olma anı da önemlidir. Her halkada gecikme olabilir. Ancak her halka optimize edilebilir. AMP ve Lite sayfalar tam burada parlar. Çünkü gereksiz yükü keserler. Ben mobilde tek tık hedefini benimserim. Böylece kullanıcı vakit kaybetmez. Sonuç olarak giriş akışı pürüzsüzleşir.

AMP mi, Lite sayfa mı: Fark ne, seçim nasıl?

AMP, kurallı bir çerçevedir. Ayrıca CDN önbelleği ile hız sağlar. JavaScript diyeti uygular. CSS boyutuna sınır koyar. Görseller için akıllı yükleme sunar. Bu disiplin performansı korur. Ancak bileşen seti sınırlıdır. Yine de içerik sayfaları için harikadır. Ben AMP’yi “hızlı okuma modu” gibi konumlarım. Çünkü amaç hızlı erişimdir. Kullanıcı hızlı karar alır.

Lite sayfa ise esnektir. Kurallar senden gelir. Gereksiz kütüphaneleri çıkarırsın. HTML hafifler, DOM sade kalır. Ayrıca kritik CSS satır içi yüklenir. Render bloklayan dosyalar ertelenir. Görseller WebP’ye çevrilir. Lazy-load devreye girer. Ben Lite sayfayı “özel ayarlı sprint” olarak görürüm. Çünkü alan sensindir. İnce ayar yaparsın. Sonuçta AMP kadar sıkı değil, ama çok hafiftir.

Hızı nasıl ölçerim: Gerçek senaryolar ve anlamlı metrikler

Hız, tek sayıyla ölçülmez. Ben üç metriğe bakarım. Time to First Byte, Largest Contentful Paint ve Interaction to Next Paint. Ayrıca yönlendirme maliyetini not ederim. Çünkü yanlış kural geçişi gecikme doğurur. Testi her zaman aynı cihazla yaparım. Aynı ağ ve aynı saat seçerim. Böylece sonuçlar kıyaslanabilir olur. Aksi hâlde veriler yanıltır.

Bununla birlikte “ilk izlenim” çok etkilidir. Kullanıcı görselin akmasını ister. Bu yüzden kritik içerik önce gelmelidir. AMP bunu doğuştan yapar. Lite sayfada sen yaparsın. Ayrıca bağlantı önceden ısıtılabilir. DNS-Prefetch ve Preconnect burada işe yarar. Ben her akışta bu detayları denerim. Ardından farkı tabloya yazarım. Sonuçlar düzenli olunca karar kolaylaşır.

AMP’nin yapı taşları: Önbellek, bileşen disiplini ve görsel yönetimi

AMP, içerik dağıtımını hızlandırır. Çünkü sayfayı AMP önbelleği sunabilir. Ayrıca doğrulayıcı hataları yakalar. Fazla script yüklenmez. Bu disiplin gecikmeyi baskılar. AMP-Img ve AMP-Video gibi etiketler akıllıdır. Görseller uygun boyutta gelir. Lazy-load doğru çalışır. Ben AMP’de boyutları açık yazarım. Böylece layout kayması yaşanmadan çizim yapılır.

Bununla birlikte AMP her şeye uygun değildir. Ağır etkileşimler kısıtlanır. Ancak mobil giriş yazıları için idealdir. Çünkü kullanıcı hızlıca bilgilendirilir. CTA tuşu tek dokunuş bekler. Ben AMP şablonunu sade tasarlarım. Kontrast yüksek, tıklama alanı geniş olur. Ayrıca sunucu tarafında sıkı önbellek uygularım. Sonuç olarak sayfa ilk andan itibaren akar.

Lite sayfa stratejisi: HTML diyeti, WebP ve kritik CSS

Lite sayfa seni özgür bırakır. Fakat sorumluluk da verir. Önce HTML gövdesini incelt. Ardından gereksiz scriptleri kaldır. Üçüncü taraf çağrılarını minimumda tut. Kritik CSS’yi satır içine taşı. Kalan stili geç yükle. Böylece ilk boyama hızlanır. Ben fontları da akıllı yönetirim. Preload ile ilk seti önden getiririm. Ayrıca sistem fontu seçeneği bırakırım.

Görseller çoğu zaman asıl suçludur. Bu yüzden WebP dönüşümü şarttır. Ben WebP Express ile boyutu düşürürüm. Lazy-load ile görünmeyeni sonra getiririm. Srcset kullanarak çözünürlüğü cihazla eşlerim. Böylece piksel israfı biter. Aynı mantık ikonlarda da geçerlidir. SVG öncelik kazanır. Yine de ayrıntı önemlidir. Görsel kalite eşiği çok düşmemelidir. Aksi hâlde güven duygusu zedelenir.

İlk bayta giden yol: DNS, TLS ve yönlendirme disiplini

Hız, sayfa içinde başlamaz. Hız, ağ katmanında başlar. DNS çözümü yavaşsa her şey yavaşlar. Bu nedenle güvenilir DNS ile çalışırım. Cloud tabanlı ağlar daha kararlı olur. Ardından TLS el sıkışması gelir. Sertifika zinciri temiz olmalıdır. Ben yeniden kullanım için Keep-Alive’ı açık tutarım. Böylece bağlantı tekrar ısınmaz. Gecikme düşer.

Yönlendirmeler de ciddi maliyet üretir. “Eski alan adından yeniye” geçiş doğru kurgulanmalıdır. 301 tek atışta sonuç vermelidir. Zincir uzamamalıdır. Ben düzenli tarama yaparım. Kırık linkleri temizlerim. Gereksiz 302’leri 301’e çeviririm. Ayrıca HSTS ile güveni güçlendiririm. Sonuçta ilk bayta giden yol kısalır. Mobilde hissedilen hız ciddi artar.

Kullanıcı tarafı: Tarayıcı, cihaz, ağ ve pratik ayarlar

Sunucu hızlı olsa da cihaz tıkanabilir. Bu yüzden kullanıcı tarafı eğitimi önemlidir. Ben herkese şu öneriyi veririm. Tarayıcıyı güncel tut. Gereksiz eklentileri kapat. Önbelleği düzenli temizle. Ayrıca veri tasarrufu modunu incele. Mobil ağda bu mod fayda sağlar. Ancak görsel kalitesi düşebilir. Bu dengeyi bilinçli kurmak gerekir.

Ağ kalitesi daima değişir. Wi-Fi kalabalıksa mobil veriye geç. Mobil veri zayıfsa Wi-Fi’ye dön. Ben saha testlerinde bu geçişi denerim. Çünkü birçok sorun ağ kaynaklıdır. Ayrıca tarayıcı izinlerine dikkat et. Gereksiz izinler sayfayı yavaşlatır. Bildirim fırtınası da odağı bozar. Minimal izin, maksimum verim sağlar. Sonuçta giriş akışı sakin ve hızlı kalır.

Saha deneyimlerim: A/B testleri, ölçümler ve net kazançlar

Sahada yüzlerce A/B testi yaptım. AMP ve Lite sürümlerini kıyasladım. Öncelikle giriş sayfalarında AMP öne çıktı. Çünkü ilk çizim çok hızlı oldu. Ancak etkileşimli modüllerde Lite daha esnek kaldı. Ayrıca WebP dönüşümü dramatik fark yarattı. Görsel ağırlığı yarıya indi. Bu sırada kalite korunabildi. Ben LCP değerlerinde belirgin iyileşme gördüm. Kullanıcı beklemedi, okudu.

Öte yandan yönlendirme zincirlerini kısalttım. 3 adım yerine 1 adım kullandım. TTFB değerleri düzenli düştü. TLS’de gereksiz ara sertifikaları temizledim. Bağlantı tekrarında hız arttı. Sonuç olarak mobilde tek tık hedefi gerçeğe yaklaştı. Ayrıca buton yerleşimlerini büyüttüm. Hata dokunuşları azaldı. Destek biletleri azaldı. Veriler net konuştu. Hız, kullanıcıyı korudu.

Sorun giderme için kısa kontrol listem

Önce alan adını doğrula. Eski adres hatalıysa akış bozulur. Ardından yönlendirme zincirini kısalt. Sonra DNS ve TLS’yi kontrol et. Ayrıca kritik CSS’yi satır içine al. Görselleri WebP’ye çevir. Lazy-load’ı aç. Srcset ile çözünürlüğü eşle. Üçüncü taraf çağrılarını azalt. AMP’de doğrulayıcı raporunu izle. Lite sayfada konsolu temiz tut. Ben bu sırayı hiç bozmam. Çünkü her adım etkili olur.

Bununla birlikte cihazı da unutma. Tarayıcı güncel mi, eklentiler açık mı? Ağ tıkalı mı, farklı ağa geçebilir misin? Önbellek şişti mi, temizledin mi? Ben “bir teknik, bir pratik” kuralını uygularım. Bir sunucu adımı, bir kullanıcı adımı. Böylece sorun hızla daralır. Son adımda butonları test ederim. Tıklamalar tek seferde çalışır. Giriş süreci sakin akar.

Sonuç: Hız bir proje, disiplinli bir alışkanlık

Toparlayalım. Mobil hız, tek hamleyle gelmez. Süreç uçtan uca yönetilir. AMP, kurallı hız sağlar. Lite sayfa, esnek hız verir. Görseller WebP ile hafifler. Kritik CSS ilk boyamayı hızlandırır. DNS ve TLS yolu kısalır. Yönlendirme zinciri sadeleşir. Ben hep aynı rutini izlerim. Çünkü disiplin, öngörülebilir sonuç üretir.

Sonuç olarak “hız” bir kültürdür. Her sayfada aynı özeni ister. Ayrıca her güncellemeyi takip etmek gerekir. Yine de ödül büyüktür. Kullanıcı beklemez, karar alır. Giriş akışı tek dokunuşla ilerler. Destek biletleri azalır. Ben bu tabloyu sahada gördüm. Sen de bu adımları izleyebilirsin. Böylece mobil giriş gerçek anlamda hızlanır. Sorunsuz bağlantı bir slogandan fazlası olur.