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.