{"id":3202,"date":"2015-04-30T17:10:14","date_gmt":"2015-04-30T14:10:14","guid":{"rendered":"https:\/\/www.stradiji.com\/?p=3202"},"modified":"2026-09-27T13:56:41","modified_gmt":"2026-09-27T10:56:41","slug":"mobil-uyumlu-sitenizi-hizlandirma-yontemleri-1","status":"publish","type":"post","link":"https:\/\/www.stradiji.com\/tr\/mobil-uyumlu-sitenizi-hizlandirma-yontemleri-1\/","title":{"rendered":"Mobil Uyumlu Sitenizi H\u0131zland\u0131rma Y\u00f6ntemleri – 1"},"content":{"rendered":"

\"mobil<\/a><\/p>\n

21 Nisan 2015 tarihinde devreye giren mobil uyumluluk g\u00fcncellemesi esnas\u0131nda meydana gelen karga\u015fa ve heyecan, bu s\u00fcre\u00e7te h\u0131zl\u0131ca denenen y\u00f6ntemler, sitenizin y\u00fckleme h\u0131z\u0131 performans\u0131n\u0131n d\u00fc\u015fmesine sebep olmu\u015f olabilir. Unutmamak gerekir ki, mobil uyumlulu\u011fun yan\u0131 s\u0131ra, site y\u00fckleme h\u0131z\u0131 da en az onun kadar \u00f6nemli bir Google s\u0131ralama kriteri. 2010 y\u0131l\u0131nda Google Resmi blogunda yap\u0131lan duyuruda Masa\u00fcst\u00fc siteler<\/a> i\u00e7in devreye giren bu kriter, 2013 y\u0131l\u0131nda Mobil siteler <\/a>i\u00e7in de ge\u00e7erli hale geldi.<\/p>\n

Yaz\u0131m\u0131zda, sitenizi mobil uyumlu hale getirirken h\u0131zdan \u00f6d\u00fcn vermenizi engelleyecek baz\u0131 pratik y\u00f6ntemlerden bahsedece\u011fiz. Ayr\u0131ca, Google’\u0131n bizzat haz\u0131rlad\u0131\u011f\u0131 Mobil Dostu Web Siteleri<\/a> rehberine g\u00f6z atman\u0131z\u0131 da \u015fiddetle tavsiye ederiz.<\/p>\n

Mobil Sitenizin H\u0131z\u0131n\u0131 \u00d6l\u00e7mek:<\/h2>\n

\"mobil<\/a><\/p>\n

\u00d6ncelikli i\u015finiz mobil sitenizin h\u0131z\u0131n\u0131 \u00f6l\u00e7mek ve eksiklerini tespit etmek olsun. En basit y\u00f6ntemlerden biri, Google Chrome ile kullanabilece\u011finiz Geli\u015ftirici Ara\u00e7lar\u0131.<\/a><\/p>\n

Geli\u015ftirici ara\u00e7lar\u0131, Google Chrome taray\u0131c\u0131s\u0131yla beraber gelen \u00fccretsiz bir ara\u00e7t\u0131r. Klavyenizde “F12” tu\u015funa ya da “CTRL Shift I” tu\u015flar\u0131na bast\u0131\u011f\u0131n\u0131zda a\u00e7\u0131lan geli\u015ftirici ara\u00e7lar\u0131 paneli, yerle\u015fik bir mobil em\u00fclat\u00f6r\u00fc i\u00e7ermektedir.<\/p>\n

Geli\u015ftirici ara\u00e7lar\u0131n\u0131 a\u00e7t\u0131\u011f\u0131n\u0131zda, sol alt k\u00f6\u015fede k\u00fc\u00e7\u00fck bir ak\u0131ll\u0131 telefon simgesi g\u00f6receksiniz:<\/p>\n

\"geli\u015ftirici<\/a><\/p>\n

 <\/p>\n

Bu butona t\u0131klad\u0131\u011f\u0131n\u0131zda, a\u015fa\u011f\u0131daki gibi bir listeye ula\u015facaks\u0131n\u0131z:<\/p>\n

\"mobil<\/a><\/p>\n

Sitenizdeyken bu listede se\u00e7ti\u011finiz cihaz\u0131n g\u00f6r\u00fcn\u00fcm\u00fc aktif olacak ve siteniz cihaz taray\u0131c\u0131s\u0131nda nas\u0131l g\u00f6r\u00fcn\u00fcyorsa, ekran\u0131n\u0131zda da ayn\u0131 \u015fekilde g\u00f6r\u00fcnecek. Bu ara\u00e7, g\u00f6r\u00fcn\u00fcm hakk\u0131nda size g\u00fczel fikirler verebilir.<\/p>\n

HTTP Archive’in yay\u0131nlad\u0131\u011f\u0131 istatisti\u011fe<\/a> g\u00f6re, g\u00f6rsellerin site i\u00e7eri\u011finin %60’\u0131n\u0131 kaplad\u0131\u011f\u0131 g\u00f6r\u00fclmekte. Siz de geli\u015ftirici ara\u00e7lar\u0131yla inceledi\u011finizde yakla\u015f\u0131k bir sonu\u00e7 elde edebilirsiniz. Y\u00fcksek boyutlu ve yo\u011fun kullan\u0131lm\u0131\u015f g\u00f6rseller, \u00e7ok h\u0131zl\u0131 olmayan mobil ba\u011flant\u0131lar i\u00e7in en ba\u015fta gelen sorun olarak kar\u015f\u0131m\u0131za \u00e7\u0131kmakta. Sitenizde \u00e7ok say\u0131da g\u00f6rsel kullanmak durumundaysan\u0131z, g\u00f6rsellerinizi s\u0131k\u0131\u015ft\u0131rmal\u0131 ve boyutlar\u0131n\u0131 d\u00fc\u015f\u00fcrmelisiniz. Zoompf\u00a0Web Performans Blogunda yay\u0131nlanan teknikleri uygulayarak, g\u00f6rsellerinizin boyutlar\u0131n\u0131 d\u00fc\u015f\u00fcrmeniz m\u00fcmk\u00fcn olabilir.<\/p>\n

Bir di\u011fer konu ise, g\u00f6rsellerin boyutunu d\u00fc\u015f\u00fcr\u00fcrken ya\u015fanacak olan kalite kayb\u0131n\u0131n \u00f6n\u00fcne ge\u00e7mektir. 1600 pixellik g\u00f6rselinizin kalitesiz g\u00f6r\u00fcnmesini istemiyor olabilirsiniz. Ya da bu g\u00f6rsel masa\u00fcst\u00fc bilgisayarlarda kullan\u0131lan b\u00fcy\u00fck ekranlarda \u00e7ok g\u00fczel g\u00f6r\u00fcn\u00fcyordur, \u00a0ancak mobilde o kadar g\u00fczel g\u00f6r\u00fcnmeyece\u011fini d\u00fc\u015f\u00fcn\u00fcyorsunuzdur. A\u00e7\u0131k\u00e7as\u0131, site h\u0131z\u0131n\u0131 g\u00f6rsel kalitesine tercih etmeniz, sitenizin trafi\u011fini olumlu etkileyecektir.<\/p>\n

Peki bu konudaki \u00e7\u00f6z\u00fcm nedir? Mobil kullan\u0131c\u0131lar i\u00e7in daha k\u00fc\u00e7\u00fck ve optimize edilmi\u015f g\u00f6rselleri kullanmak. Bu konuda dikkatli olman\u0131z\u0131 \u00f6neririz \u00e7\u00fcnk\u00fc bu konuda do\u011fru ve yanl\u0131\u015f yollar var.<\/p>\n

\u00d6ncelikle, sitenizin “esnek” (responsive) oldu\u011funu taray\u0131c\u0131ya belirtmek i\u00e7in “viewport” meta etiketini kulland\u0131\u011f\u0131n\u0131zdan emin olun. Bu etiket, mobil taray\u0131c\u0131n\u0131n sitenizi otomatik olarak masa\u00fcst\u00fc ekran\u0131 boyutuna \u00f6l\u00e7eklemesini \u00f6nler. Viewport meta etiketi i\u00e7in Google’\u0131n yay\u0131nlad\u0131\u011f\u0131 rehbere<\/a> g\u00f6z atabiliriniz.<\/p>\n

Test etmek isterseniz, geli\u015ftirici ara\u00e7lar\u0131 i\u00e7erisinde sitenizin kodlar\u0131na g\u00f6z atarken, “head” etiketi i\u00e7erisine a\u015fa\u011f\u0131daki kodu eklemeyi deneyin:<\/p>\n

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ \/><\/em><\/p>\n

Yanl\u0131\u015f Yol<\/h2>\n

Esnek tasar\u0131m, y\u00fcksek d\u00fczeyde CSS medya sorgusu kullanarak site g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u015fekillendirir. Farkl\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklere sahip cihazlara en iyi g\u00f6r\u00fcn\u00fcm\u00fc vermek i\u00e7in bu kullan\u0131m sa\u011fl\u0131kl\u0131d\u0131r. Ancak a\u015fa\u011f\u0131daki gibi bir yol izleyerek g\u00f6r\u00fcn\u00fcm\u00fc \u015fekillendirmeye ve imajlar\u0131 yeniden boyutland\u0131rmaya \u00e7al\u0131\u015fmak, yanl\u0131\u015f olacakt\u0131r:<\/p>\n

<!– DON’T DO THIS –><\/em>
\n<style> <\/em>
\n @media (min-width:376px) {<\/em>
\n .mobile_image {<\/em>
\n display: none;<\/em>
\n }<\/em>
\n .desktop_image {<\/em>
\n display: inline;<\/em>
\n }<\/em>
\n }<\/em>
\n @media (max-width:375px) {<\/em>
\n .mobile_image {<\/em>
\n display: inline;<\/em>
\n }<\/em>
\n .desktop_image {<\/em>
\n display: none;<\/em>
\n }<\/em>
\n }<\/em>
\n<\/style> <\/em>
\n<img src=”mobile.png” class=”mobile_image” \/><\/em>
\n<img src=”desktop.png” class=”desktop_image” \/><\/em><\/p>\n

Bu kod dizisi, farkl\u0131 b\u00fcy\u00fckl\u00fckteki g\u00f6rsellerin kendi \u00e7\u00f6z\u00fcn\u00fcrl\u00fckleri baz al\u0131narak boyutland\u0131r\u0131lmas\u0131na sebep olur. Yani bir g\u00f6rsel b\u00fcy\u00fck oldu\u011funda ekran\u0131n tamam\u0131n\u0131 kaplarken, orta boy bir g\u00f6rsel ekran\u0131n sadece yar\u0131s\u0131n\u0131 kaplayacak, k\u00fc\u00e7\u00fck olanlar da k\u00fc\u00e7\u00fcc\u00fck bir alanda, neredeyse g\u00f6r\u00fclemez d\u00fczeyde kalacakt\u0131r.\u00a0Ayn\u0131 zamanda bu kod, imajlar\u0131n hem masa\u00fcst\u00fc hem de mobil versiyonlar\u0131n\u0131 getirerek iki defa y\u00fcklenmesine sebep olacakt\u0131r.<\/p>\n

Bir dosyan\u0131n iki versiyonunun birden indirilmesine sebep olan bu kod, gereksiz yere veri transferine yaratacak,\u00a0bant geni\u015fli\u011fini k\u0131s\u0131tlayacak ve g\u00f6sterilmeyen bir dosyan\u0131n bo\u015f yere indirilmesine sebep olacakt\u0131r.<\/p>\n

Do\u011fru Yol:<\/h2>\n

Bunun yerine, DIV i\u00e7erisinde\u00a0Background-style g\u00f6rseli kullanmay\u0131 deneyebilirsiniz:<\/p>\n

<!– DO THIS –><\/em>
\n<style><\/em>
\n @media (min-width:376px) {<\/em>
\n .myimage {<\/em>
\n background-image: url(“desktop.png”);<\/em>
\n width: 700px;<\/em>
\n height: 550px;<\/em>
\n }<\/em>
\n }<\/em>
\n @media (max-width:375px) {<\/em>
\n .myimage {<\/em>
\n background-image: url(“mobile.png”);<\/em>
\n width: 350px;<\/em>
\n height: 130px;<\/em>
\n }<\/em>
\n }<\/em>
\n<\/style><\/em>
\n<div class=”myimage”><\/div><\/em><\/p>\n

B\u00f6ylece g\u00f6rselin sadece mobil versiyonu indirilecektir. Tabi bu kodu kullanabilmek i\u00e7in, CSS i\u00e7erisinde ayarlama yapman\u0131z da gerekmektedir.<\/p>\n

Derinlemesine inceleyin: JQuery<\/h2>\n

JQuery? O da ne ola ki?<\/p>\n

JQuery, JavaScript yazman\u0131z\u0131 sa\u011flayan aray\u00fczd\u00fcr. JQuery, kullan\u0131\u015fl\u0131 aray\u00fczlerden biridir\u00a0ve\u00a0hatta JavaScript yazmay\u0131 e\u011flenceli hale getirmektedir. W3C standartlar\u0131na uygun olan JQuery, hafif ve kullan\u0131\u015fl\u0131 aray\u00fcz\u00fcyle geli\u015ftiricilerin tercihi olmaya devam etmektedir.<\/p>\n

JQuery k\u00fc\u00e7\u00fck boyutlarda kodlar yazman\u0131z\u0131 sa\u011flasa bile, sahip oldu\u011fu k\u00fct\u00fcphane ve mobil taray\u0131c\u0131lar\u0131n i\u00e7erdi\u011fi WebKit’lerle birlikte boyutu 30 KB civar\u0131nda olmakta. Bunun yerine, JQuery ile uyumlu olan ve daha kompakt yap\u0131daki ZeptoJS<\/a> aray\u00fcz\u00fcn\u00fc kullanabilirsiniz. ZeptoJS sadece 5 KB yer kaplamakta. E\u011fer aradaki fark\u0131 umursuyorsan\u0131z, ZeptoJS javascript i\u00e7in bir alternatif olabilir.<\/p>\n

(Devam Edecek…)<\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Sitenizi mobil uyumlu hale getirirken, ayn\u0131 zamanda h\u0131zl\u0131 y\u00fcklenmesini ve iyi bir mobil kullan\u0131c\u0131 deneyimi sunmas\u0131n\u0131 sa\u011flamak i\u00e7in dikkat etmeniz gereken pek \u00e7ok detay var. A\u015fa\u011f\u0131daki yaz\u0131y\u0131 okumadan \u00f6nce Mobil SEO Rehberimize ve Mobil Uyumluluk Hakk\u0131nda S\u0131k\u00e7a Sorulan Sorulara g\u00f6z atman\u0131z\u0131 tavsiye ederiz.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,95,96],"tags":[202,203],"class_list":["post-3202","post","type-post","status-publish","format-standard","hentry","category-arama-motoru-optimizasyonu","category-mobil-seo","category-mobil-uyumluluk","tag-gelistirici-araclari","tag-mobil-dostu-web-siteleri"],"_links":{"self":[{"href":"https:\/\/www.stradiji.com\/tr\/wp-json\/wp\/v2\/posts\/3202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.stradiji.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.stradiji.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.stradiji.com\/tr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stradiji.com\/tr\/wp-json\/wp\/v2\/comments?post=3202"}],"version-history":[{"count":1,"href":"https:\/\/www.stradiji.com\/tr\/wp-json\/wp\/v2\/posts\/3202\/revisions"}],"predecessor-version":[{"id":16291,"href":"https:\/\/www.stradiji.com\/tr\/wp-json\/wp\/v2\/posts\/3202\/revisions\/16291"}],"wp:attachment":[{"href":"https:\/\/www.stradiji.com\/tr\/wp-json\/wp\/v2\/media?parent=3202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stradiji.com\/tr\/wp-json\/wp\/v2\/categories?post=3202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stradiji.com\/tr\/wp-json\/wp\/v2\/tags?post=3202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}