Mobil Uyumlu Sitenizi Hızlandırma Yöntemleri

Sitenizi mobil uyumlu hale getirirken, aynı zamanda hızlı yüklenmesini ve iyi bir mobil kullanıcı deneyimi sunmasını sağlamak için dikkat etmeniz gereken pek çok detay var.

21 Nisan 2015 tarihinde devreye giren mobil uyumluluk güncellemesi esnasında meydana gelen kargaşa ve heyecan, bu süreçte hızlıca denenen yöntemler, sitenizin yükleme hızı performansının düşmesine sebep olmuş olabilir. Unutmamak gerekir ki, mobil uyumluluğun yanı sıra, site yükleme hızı da en az onun kadar önemli bir Google sıralama kriteri. 2010 yılında Google Resmi blogunda yapılan duyuruda Masaüstü siteler için devreye giren bu kriter, 2013 yılında Mobil siteler için de geçerli hale geldi.

Yazımızda, sitenizi mobil uyumlu hale getirirken hızdan ödün vermenizi engelleyecek bazı pratik yöntemlerden bahsedeceğiz. Ayrıca, Google’ın bizzat hazırladığı Mobil Dostu Web Siteleri rehberine göz atmanızı da şiddetle tavsiye ederiz.

Mobil Sitenizin Hızını Ölçmek:

Öncelikli işiniz mobil sitenizin hızını ölçmek ve eksiklerini tespit etmek olsun. En basit yöntemlerden biri, Google Chrome ile kullanabileceğiniz Geliştirici Araçları.

Geliştirici araçları, Google Chrome tarayıcısıyla beraber gelen ücretsiz bir araçtır. Klavyenizde “F12” tuşuna ya da “CTRL Shift I” tuşlarına bastığınızda açılan geliştirici araçları paneli, yerleşik bir mobil emülatörü içermektedir.

Geliştirici araçlarını açtığınızda, sol alt köşede küçük bir akıllı telefon simgesi göreceksiniz:

Bu butona tıkladığınızda, aşağıdaki gibi bir listeye ulaşacaksınız:

Sitenizdeyken bu listede seçtiğiniz cihazın görünümü aktif olacak ve siteniz cihaz tarayıcısında nasıl görünüyorsa, ekranınızda da aynı şekilde görünecek. Bu araç, görünüm hakkında size güzel fikirler verebilir.

HTTP Archive’in yayınladığı istatistiğe göre, görsellerin site içeriğinin %60’ını kapladığı görülmekte. Siz de geliştirici araçlarıyla incelediğinizde yaklaşık bir sonuç elde edebilirsiniz. Yüksek boyutlu ve yoğun kullanılmış görseller, çok hızlı olmayan mobil bağlantılar için en başta gelen sorun olarak karşımıza çıkmakta. Sitenizde çok sayıda görsel kullanmak durumundaysanız, görsellerinizi sıkıştırmalı ve boyutlarını düşürmelisiniz. Zoompf Web Performans Blogunda yayınlanan teknikleri uygulayarak, görsellerinizin boyutlarını düşürmeniz mümkün olabilir.

Bir diğer konu ise, görsellerin boyutunu düşürürken yaşanacak olan kalite kaybının önüne geçmektir. 1600 pixellik görselinizin kalitesiz görünmesini istemiyor olabilirsiniz. Ya da bu görsel masaüstü bilgisayarlarda kullanılan büyük ekranlarda çok güzel görünüyordur,  ancak mobilde o kadar güzel görünmeyeceğini düşünüyorsunuzdur. Açıkçası, site hızını görsel kalitesine tercih etmeniz, sitenizin trafiğini olumlu etkileyecektir.

Peki bu konudaki çözüm nedir? Mobil kullanıcılar için daha küçük ve optimize edilmiş görselleri kullanmak. Bu konuda dikkatli olmanızı öneririz çünkü bu konuda doğru ve yanlış yollar var.

Öncelikle, sitenizin “esnek” (responsive) olduğunu tarayıcıya belirtmek için “viewport” meta etiketini kullandığınızdan emin olun. Bu etiket, mobil tarayıcının sitenizi otomatik olarak masaüstü ekranı boyutuna ölçeklemesini önler. Viewport meta etiketi için Google’ın yayınladığı rehbere göz atabiliriniz.

Test etmek isterseniz, geliştirici araçları içerisinde sitenizin kodlarına göz atarken, “head” etiketi içerisine aşağıdaki kodu eklemeyi deneyin:

Yanlış Yol

Esnek tasarım, yüksek düzeyde CSS medya sorgusu kullanarak site görünümünü şekillendirir. Farklı çözünürlüklere sahip cihazlara en iyi görünümü vermek için bu kullanım sağlıklıdır. Ancak aşağıdaki gibi bir yol izleyerek görünümü şekillendirmeye ve imajları yeniden boyutlandırmaya çalışmak, yanlış olacaktır:

<!– DON’T DO THIS –>

Bu kod dizisi, farklı büyüklükteki görsellerin kendi çözünürlükleri baz alınarak boyutlandırılmasına sebep olur. Yani bir görsel büyük olduğunda ekranın tamamını kaplarken, orta boy bir görsel ekranın sadece yarısını kaplayacak, küçük olanlar da küçücük bir alanda, neredeyse görülemez düzeyde kalacaktır. Aynı zamanda bu kod, imajların hem masaüstü hem de mobil versiyonlarını getirerek iki defa yüklenmesine sebep olacaktır.

Bir dosyanın iki versiyonunun birden indirilmesine sebep olan bu kod, gereksiz yere veri transferine yaratacak, bant genişliğini kısıtlayacak ve gösterilmeyen bir dosyanın boş yere indirilmesine sebep olacaktır.

Doğru Yol:

Bunun yerine, DIV içerisinde Background-style görseli kullanmayı deneyebilirsiniz:

<!– DO THIS –>

Böylece görselin sadece mobil versiyonu indirilecektir. Tabi bu kodu kullanabilmek için, CSS içerisinde ayarlama yapmanız da gerekmektedir.

Derinlemesine inceleyin: JQuery

JQuery? O da ne ola ki?

JQuery, JavaScript yazmanızı sağlayan arayüzdür. JQuery, kullanışlı arayüzlerden biridir ve hatta JavaScript yazmayı eğlenceli hale getirmektedir. W3C standartlarına uygun olan JQuery, hafif ve kullanışlı arayüzüyle geliştiricilerin tercihi olmaya devam etmektedir.

JQuery küçük boyutlarda kodlar yazmanızı sağlasa bile, sahip olduğu kütüphane ve mobil tarayıcıların içerdiği WebKit’lerle birlikte boyutu 30 KB civarında olmakta. Bunun yerine, JQuery ile uyumlu olan ve daha kompakt yapıdaki ZeptoJS arayüzünü kullanabilirsiniz. ZeptoJS sadece 5 KB yer kaplamakta. Eğer aradaki farkı umursuyorsanız, ZeptoJS javascript için bir alternatif olabilir.