{"id":6165,"date":"2018-01-25T16:47:18","date_gmt":"2018-01-25T13:47:18","guid":{"rendered":"https:\/\/www.stradiji.com\/?p=6165"},"modified":"2026-03-13T01:42:41","modified_gmt":"2026-03-12T22:42:41","slug":"google-lighthouse-ile-web-sitenizin-performansini-arttirin","status":"publish","type":"post","link":"https:\/\/www.stradiji.com\/tr\/google-lighthouse-ile-web-sitenizin-performansini-arttirin\/","title":{"rendered":"Google Lighthouse ile Web Sitenizin Performans\u0131n\u0131 Art\u0131r\u0131n"},"content":{"rendered":"<p>Her ne kadar sunmaya ba\u015flad\u0131\u011f\u0131 Google Chrome ger\u00e7ek kullan\u0131c\u0131 verileri ile daha ger\u00e7ek\u00e7i analizler yapmaya ba\u015flam\u0131\u015f olsa dahi, Google&#8217;\u0131n mobil \u00f6ncelikli indekslemeye ge\u00e7i\u015f a\u015famas\u0131nda \u00f6zellikle mobil siteler \u00fczerinde yap\u0131lmas\u0131 gereken performans geli\u015ftirmeleri konusunda yetersiz kalmaya ba\u015flam\u0131\u015ft\u0131. \u0130\u015fte tam da bu noktada Google, Google Lighthouse isimli yeni bir performans analiz arac\u0131n\u0131 tan\u0131tt\u0131. Biz de sizler i\u00e7in Google Lighthouse&#8217;u ve bundan sonra s\u0131kl\u0131kla g\u00f6rece\u011finiz \u00f6nemli metrikleri tan\u0131tan kapsaml\u0131 bir inceleme yaz\u0131s\u0131 haz\u0131rlad\u0131k. Gelin hep birlikte arac\u0131 biraz daha yak\u0131ndan tan\u0131yal\u0131m.<\/p>\n<p><!--more--><\/p>\n<h2>Google Lighthouse Nedir?<\/h2>\n<p>Google Lighthouse\u00a0web sayfalar\u0131n\u0131n kalitesini art\u0131rmak i\u00e7in Google taraf\u0131ndan yay\u0131nlanan, hem Chrome Geli\u015ftirici Ara\u00e7lar\u0131 i\u00e7inde hem de Google Chrome eklentisi olarak kullan\u0131labilen a\u00e7\u0131k kaynak kodlu, otomatikle\u015ftirilmi\u015f bir performans analiz arac\u0131d\u0131r.<\/p>\n<p>Detaylara girmeden \u00f6nce bu ara\u00e7 hakk\u0131nda belirtmek istedi\u011fimiz birka\u00e7 konu var:<\/p>\n<ul>\n<li>Google Geli\u015ftirici Ara\u00e7lar\u0131 i\u00e7inde yer alan Lighthouse ile taray\u0131c\u0131 eklentisi olarak kullan\u0131lan Lighthouse aras\u0131nda ufak bir <strong>fark<\/strong> var. Google Chrome eklentisi olarak kullan\u0131labilen Google Lighthouse, analizinin i\u00e7ine &#8220;SEO&#8221; b\u00f6l\u00fcm\u00fcn\u00fc de eklemi\u015f ve analiz etti\u011finiz sayfan\u0131n temel SEO kurallar\u0131na uyup uymad\u0131\u011f\u0131n\u0131 g\u00f6steriyor.<\/li>\n<li>Sahibi olmad\u0131\u011f\u0131n\u0131z farkl\u0131 siteleri, <strong>rakip Web sitelerini<\/strong> test edebilirsiniz.<\/li>\n<li>AdBlock, Ublock gibi reklam engelleyici eklentiler kullan\u0131yorsan\u0131z Google Lighthouse sa\u011fl\u0131kl\u0131 <strong>\u00e7al\u0131\u015fmayabilir<\/strong>.<\/li>\n<li>Google Lighthouse analizleri <strong>sayfa baz\u0131nda<\/strong> yap\u0131lmaktad\u0131r. \u00d6nerimiz ana sayfa haricindeki \u00f6nemli sayfalar\u0131n\u0131z\u0131 da tek tek analiz ederek siteniz hakk\u0131nda genel bir fikre kavu\u015fman\u0131z.<\/li>\n<li>\u015eu an i\u00e7in <strong>\u0130ngilizce<\/strong> olan Lighthouse, yak\u0131nda T\u00fcrk\u00e7e kullan\u0131labilir duruma gelecek. Ay\u0131rca arac\u0131n yard\u0131m d\u00f6k\u00fcmanlar\u0131 da \u015fu an i\u00e7in sadece \u0130ngilizce dilinde yay\u0131nlan\u0131yor: <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Lighthouse<\/a><\/li>\n<li>Chrome Geli\u015ftirici Ara\u00e7lar\u0131nda yap\u0131lan analiz *.json format\u0131nda kaydedilebilmekte. Google Chrome Eklentisi kullan\u0131rsan\u0131z analiz sonu\u00e7lar\u0131n\u0131 <strong>daha fazla formatta kaydetme<\/strong> \u015fans\u0131na sahip olabilirsiniz.<\/li>\n<li>Google Lighthouse, di\u011fer ara\u00e7lara k\u0131yasla <strong>daha fazla avantaja<\/strong> sahiptir;\n<ul>\n<li><strong>Puanlama sistemi<\/strong>:\u00a0PageSpeed \u200b\u200bInsights taraf\u0131ndan verilen puanlar ger\u00e7ek sayfa y\u00fckleme s\u00fcrelerinden ziyade test edilen fakt\u00f6rlere ba\u011fl\u0131d\u0131r.<\/li>\n<li><strong>Kullan\u0131lan \u00f6l\u00e7\u00fcmler<\/strong> : D\u00fc\u015f\u00fck sayfa y\u00fckleme s\u00fcrelerine katk\u0131da bulunan fakt\u00f6rlere odaklanarak; sayfan\u0131n boyutu, sunucuya g\u00f6nderilen istek say\u0131s\u0131, ilk Byte S\u00fcresi, sunucudan al\u0131nan ilk yan\u0131t ile olu\u015fturulan sayfa g\u00f6r\u00fcnt\u00fcs\u00fc ve toplam y\u00fckleme s\u00fcresi gibi \u00e7ok say\u0131da faydal\u0131 performans metri\u011fini dikkate al\u0131r.<\/li>\n<li><strong>G\u00fcncel \u00f6neriler<\/strong>:\u00a0Analiz sonucunda g\u00f6r\u00fcnt\u00fclenen tavsiyeler son geli\u015fmelerle do\u011fru orant\u0131l\u0131d\u0131r.<\/li>\n<\/ul>\n<\/li>\n<li>Analiz listesinde yer alan baz\u0131 \u00f6\u011felerin <strong>manuel kontrol edilmesi<\/strong> gerekebilmektedir.<\/li>\n<\/ul>\n<p>Google Lighthouse&#8217;un nas\u0131l kullan\u0131ld\u0131\u011f\u0131na dair videomuzu izleyin:<br \/>\n<iframe data-src=\"https:\/\/www.youtube.com\/embed\/ezkSZUxz3NI\" width=\"800\" height=\"500\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" src=\"about:blank\" class=\"lazyload\" data-load-mode=\"0\"><\/iframe><\/p>\n<p>Lighthouse&#8217;a eklenti y\u00fcklemeden ula\u015fmak i\u00e7in yapman\u0131z gereken \u015fey \u00e7ok basit. Analiz etmek istedi\u011finiz sayfadayken klavyenizde &#8220;F12&#8221; tu\u015funa basmak, Windows&#8217;ta &#8220;Ctrl + Shift + I&#8221;, Mac&#8217;te &#8220;Command+Option+I&#8221; veya sa\u011f t\u0131klay\u0131p &#8220;\u0130ncele&#8221; (Inspect) se\u00e7mek. Ard\u0131ndan navigasyon bar\u0131nda &#8220;Audits&#8221; se\u00e7ene\u011fini g\u00f6receksiniz.<\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/www.stradiji.com\/wp-content\/uploads\/2018\/01\/google-lighthouse-audits.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-6168 lazyload\" data-src=\"https:\/\/www.stradiji.com\/wp-content\/uploads\/2018\/01\/google-lighthouse-audits.jpg\" alt=\"google-lighthouse-audits\" width=\"800\" height=\"478\" data-srcset=\"https:\/\/stradiji.wpenginepowered.com\/wp-content\/uploads\/2018\/01\/google-lighthouse-audits.jpg 810w, https:\/\/stradiji.wpenginepowered.com\/wp-content\/uploads\/2018\/01\/google-lighthouse-audits-300x179.jpg 300w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/478;\" \/><\/a><\/p>\n<p>&#8220;Perform an audit&#8230;&#8221; t\u0131klad\u0131\u011f\u0131n\u0131zda ise kar\u015f\u0131n\u0131za 4 se\u00e7ene\u011fin \u00e7\u0131kt\u0131\u011f\u0131n\u0131 g\u00f6receksiniz:<\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/www.stradiji.com\/wp-content\/uploads\/2018\/01\/google-lighthouse-run-an-audit.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6169 lazyload\" data-src=\"https:\/\/www.stradiji.com\/wp-content\/uploads\/2018\/01\/google-lighthouse-run-an-audit.jpg\" alt=\"google-lighthouse-run-an-audit\" width=\"600\" height=\"260\" data-srcset=\"https:\/\/stradiji.wpenginepowered.com\/wp-content\/uploads\/2018\/01\/google-lighthouse-run-an-audit.jpg 600w, https:\/\/stradiji.wpenginepowered.com\/wp-content\/uploads\/2018\/01\/google-lighthouse-run-an-audit-300x130.jpg 300w\" data-sizes=\"(max-width: 600px) 100vw, 600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/260;\" \/><\/a>Analizi ba\u015flatt\u0131ktan birka\u00e7 dakika sonra sonu\u00e7lar Chrome Geli\u015ftirici Ara\u00e7lar\u0131 i\u00e7inde g\u00f6r\u00fcnt\u00fclenecek ve sayfan\u0131n ald\u0131\u011f\u0131 puanlar\u0131, uyar\u0131lar\u0131 ve \u00f6nerileri g\u00f6rebileceksiniz.<\/p>\n<p>Baz\u0131 kurumsal firmalarda kullan\u0131lan bilgisayarlardaki taray\u0131c\u0131lara \u015firket politikalar\u0131 sebebiyle eklenti bile y\u00fcklenemedi\u011fi i\u00e7in Chrome Geli\u015ftirici Se\u00e7eneklerini kullanarak da ayn\u0131 analizleri yapabilirsiniz. Ancak Google Chrome Eklentisinin biraz daha kullan\u0131\u015fl\u0131 oldu\u011funu fark edeceksiniz, bu y\u00fczden biz incelememizi Google Chrome Eklentisi \u00fczerinden yapaca\u011f\u0131z.<\/p>\n<p>Lighthouse eklenti olarak y\u00fcklendi\u011finde mavi-k\u0131rm\u0131z\u0131 bir ikonla taray\u0131c\u0131n\u0131n eklenti tepsisinde yer al\u0131yor. Analiz etmek istedi\u011finiz sayfadayken eklentiyi se\u00e7ti\u011finizde kar\u015f\u0131n\u0131za &#8220;options&#8221; ve &#8220;Generate Report&#8221; se\u00e7enekleri \u00e7\u0131kacak. &#8220;Options&#8221; yani Se\u00e7enekler i\u00e7inde 5 se\u00e7enek g\u00f6receksiniz:<\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/www.stradiji.com\/wp-content\/uploads\/2018\/01\/google-lighthouse-add-on-options.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6170 lazyload\" data-src=\"https:\/\/www.stradiji.com\/wp-content\/uploads\/2018\/01\/google-lighthouse-add-on-options.jpg\" alt=\"google-lighthouse-add-on-options\" width=\"500\" height=\"300\" data-srcset=\"https:\/\/stradiji.wpenginepowered.com\/wp-content\/uploads\/2018\/01\/google-lighthouse-add-on-options.jpg 500w, https:\/\/stradiji.wpenginepowered.com\/wp-content\/uploads\/2018\/01\/google-lighthouse-add-on-options-300x180.jpg 300w\" data-sizes=\"(max-width: 500px) 100vw, 500px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 500px; --smush-placeholder-aspect-ratio: 500\/300;\" \/><\/a>S\u0131ras\u0131yla<\/p>\n<ul>\n<li>Performance<\/li>\n<li>Progressive Web App<\/li>\n<li>Accesibility<\/li>\n<li>Best Practices<\/li>\n<li>SEO<\/li>\n<\/ul>\n<p>Bu se\u00e7eneklerden istedi\u011finizi se\u00e7ebilir, istedi\u011finiz kald\u0131rabilirsiniz. Her bir se\u00e7ene\u011fin kendine has analiz detaylar\u0131 oldu\u011funu s\u00f6yleyebiliriz, yaz\u0131m\u0131zda da her detay\u0131 tek tek ele almaya \u00e7al\u0131\u015faca\u011f\u0131z.<\/p>\n<h2>Lighthouse Analiz ve \u00d6l\u00e7\u00fcm Kriterleri<\/h2>\n<p>\u00d6ncelikle belirtmeliyiz ki, Lighthouse&#8217;daki \u00f6l\u00e7\u00fcm kriterlerinin tamam\u0131 SEO ile ilgili de\u011fil, ancak birbiriyle ba\u011flant\u0131l\u0131 farkl\u0131 disiplinlerin ortak noktada bulu\u015fmas\u0131yla a\u00e7\u0131klanabilir. Bu analizin tek bir amac\u0131 var: Web sitesinin her plaformda h\u0131zl\u0131 y\u00fcklenebilmesini ve optimize edilmi\u015f olmas\u0131n\u0131 sa\u011flamak. Yani ara\u00e7 kodlama alan\u0131nda, tasar\u0131mda, eri\u015filebilirlikte, sayfa y\u00fckleme h\u0131z\u0131nda ve SEO performans\u0131nda Web sitesinden tam verim almay\u0131 ama\u00e7layan analizleri i\u00e7eriyor. Yani ister kod yaz\u0131n ister tasar\u0131m yap\u0131n isterseniz de SEO uzman\u0131 olun hi\u00e7 fark etmez, bu arac\u0131 kullanarak bir projeyi daha ileri noktalara g\u00f6t\u00fcrme \u015fans\u0131n\u0131z var.<\/p>\n<ul>\n<li>\n<h3>Performance<\/h3>\n<\/li>\n<\/ul>\n<p>\u0130lk \u00f6l\u00e7\u00fcm kriterimiz performansa dayal\u0131 ve sayfa y\u00fckleme h\u0131z\u0131n\u0131 baz al\u0131yor. Bu \u00f6l\u00e7\u00fcm sunucu konfig\u00fcrasyonu ve kodlama a\u00e7\u0131s\u0131ndan detaylar\u0131 i\u00e7eriyor, e\u011fer bu konularla ilgileniyorsan\u0131z faydal\u0131 olaca\u011f\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcyoruz. Test sonras\u0131nda g\u00f6rece\u011fimiz metriklerde yeni terimlerle kar\u015f\u0131la\u015fabiliriz:<\/p>\n<ul>\n<li><strong>First meaningful paint<\/strong> &#8211; \u0130lk Anlaml\u0131 G\u00f6r\u00fcnt\u00fc: Sayfa y\u00fcklenirken kullan\u0131c\u0131ya g\u00f6r\u00fcn\u00fcr hale gelen renk, \u00e7er\u00e7eve, buton, g\u00f6rsel ve benzeri \u00f6\u011felerin ilk defa y\u00fcklendi\u011fi an\u0131, T\u00fcrk\u00e7e&#8217;ye ilk anlaml\u0131 g\u00f6r\u00fcnt\u00fc olarak \u00e7evirebiliriz. Bu metrik olduk\u00e7a \u00f6nemlidir \u00e7\u00fcnk\u00fc kullan\u0131c\u0131ya sayfan\u0131n y\u00fcklenmeye ba\u015flad\u0131\u011f\u0131 izlenimini verir. Sayfa y\u00fcklenmeye ba\u015flad\u0131\u011f\u0131nda beklenmesi gereken birka\u00e7 saniyelik bo\u015f beyaz ekrandan kurtulmaya ba\u015flayan kullan\u0131c\u0131 b\u00fcy\u00fck oranda sayfay\u0131 terk etmekten vazge\u00e7ece\u011fi i\u00e7in ilk anlaml\u0131 g\u00f6r\u00fcnt\u00fcn\u00fcn en h\u0131zl\u0131 \u015fekilde kullan\u0131c\u0131ya ula\u015ft\u0131r\u0131lmas\u0131 \u00e7ok \u00f6nemlidir.<br \/>\nA\u015fa\u011f\u0131daki videoda First meaningful paint hakk\u0131nda fikir edinebilirsiniz:<div style=\"width: 408px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-6165-1\" width=\"408\" height=\"384\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.stradiji.com\/wp-content\/uploads\/2018\/01\/stradiji-video-yukleme-hizi.mp4?_=1\" \/><a href=\"https:\/\/www.stradiji.com\/wp-content\/uploads\/2018\/01\/stradiji-video-yukleme-hizi.mp4\">https:\/\/www.stradiji.com\/wp-content\/uploads\/2018\/01\/stradiji-video-yukleme-hizi.mp4<\/a><\/video><\/div><\/li>\n<li><strong>First Interactive<\/strong> &#8211; \u0130lk \u0130nteraktif \u00d6\u011feler (beta a\u015famas\u0131nda) : \u0130lk anlaml\u0131 g\u00f6r\u00fcnt\u00fc gibi sayfa i\u00e7indeki kullan\u0131c\u0131 aray\u00fcz\u00fc \u00f6\u011felerinin y\u00fckledi\u011fi and\u0131r. Lighthouse i\u00e7inde bu b\u00f6l\u00fcm \u015fu an test a\u015famas\u0131nda.<\/li>\n<li><strong>Consistently Interactive<\/strong> &#8211; Tamamiyle \u0130nteraktif \u00d6\u011feler (beta a\u015famas\u0131nda) : \u0130nteraktif ve kullan\u0131c\u0131 aray\u00fcz\u00fc \u00f6\u011felerinin tamamiyle y\u00fcklendi\u011fi an\u0131 \u00f6l\u00e7en metrik, \u015fu an test a\u015famas\u0131nda.<\/li>\n<li><strong>Perceptual Speed Index<\/strong> &#8211; Alg\u0131sal H\u0131z Endeksi:\u00a0Bir sayfan\u0131n i\u00e7eri\u011finin ne kadar h\u0131zl\u0131 bir \u015fekilde olu\u015fturuldu\u011funu ve sayfadaki \u00f6\u011felerin (\u00e7er\u00e7eve, buton gibi) dolduruldu\u011funu g\u00f6steren bir sayfa y\u00fck\u00fc performans metri\u011fidir. Lighthouse ile yapt\u0131\u011f\u0131n\u0131z analizin skoru ne kadar d\u00fc\u015f\u00fckse o kadar y\u00fcksek performans g\u00f6sterdi\u011fi anlam\u0131na gelir.<\/li>\n<li><strong>Estimated Input Latency<\/strong> &#8211; Tahmini Giri\u015f Gecikmesi:\u00a0Bu metrik Web sitenizin veya uygulaman\u0131z\u0131n kullan\u0131c\u0131 girdisine ne kadar s\u00fcreyle cevap verece\u011fini yakla\u015f\u0131k olarak mili saniye cinsinden \u00f6l\u00e7mektedir. Gecikme s\u00fcresi 50 mili saniyeden fazlaysa, sayfan\u0131z b\u00fcy\u00fck oranda gecikmeli olarak de\u011ferlendirilecektir.<\/li>\n<li><strong>Slow Time To First Byte<\/strong> &#8211; Yava\u015f \u0130lk Byte S\u00fcresi: \u0130lk byte &#8211; kullan\u0131c\u0131 iste\u011fi kar\u015f\u0131l\u0131\u011f\u0131nda sunucudan g\u00f6nderilen ilk veriye &#8220;ilk byte&#8221; ad\u0131n\u0131 verebiliriz. \u0130lk verinin g\u00f6nderildi\u011fi s\u00fcre sunucunun tepki performans\u0131n\u0131 ve Web sitesinin kodlamadaki optimizasyonunu da \u00f6l\u00e7menizi sa\u011flar. \u0130lk byte ne kadar h\u0131zl\u0131ysa sayfadaki \u00f6\u011felerin tek ba\u015f\u0131na ve bir b\u00fct\u00fcn olarak y\u00fcklenmesi o kadar h\u0131zl\u0131 olur.<\/li>\n<\/ul>\n<p>S\u00f6z konusu metrikler a\u011f\u0131rl\u0131kl\u0131 olarak sunucu ve Web konfig\u00fcrasyonunu baz al\u0131yor olsa da, kodlama taraf\u0131nda da g\u00f6z atabilece\u011finiz olduk\u00e7a faydal\u0131 olabilecek \u00f6l\u00e7\u00fcmlerle kar\u015f\u0131la\u015fman\u0131z da m\u00fcmk\u00fcn. Analiz sonu\u00e7lar\u0131nda kodlama ile ilgili de\u011ferlendirilebilecek bir\u00e7ok \u00f6nemli nokta oldu\u011funu g\u00f6receksiniz. PageSpeed Insights&#8217;ta da kar\u015f\u0131m\u0131za \u00e7\u0131kan &#8220;Olu\u015fturmay\u0131 engelleyen kaynaklar&#8221; (Render-Blocking Resources) metri\u011fi Lighthouse&#8217;ta da kullan\u0131lm\u0131\u015f. HTML, JavaScript ve CSS kod paketlerinde yap\u0131lacak iyile\u015ftirmeler ile bu metrikten y\u00fcksek puan al\u0131nmas\u0131n\u0131 sa\u011flayabilirsiniz.<\/p>\n<ul>\n<li>\n<h3>Progressive Web App (PWA)<\/h3>\n<\/li>\n<\/ul>\n<p>Son zamanlarda kar\u015f\u0131m\u0131za s\u0131kl\u0131kla \u00e7\u0131kan Progressive Web App terimi i\u00e7in hen\u00fcz T\u00fcrk\u00e7e bir isim bulamam\u0131\u015f olsak da,\u00a0Progresif Web Uygulamas\u0131 olarak bahsedebiliriz.\u00a0Progresif Web Uygulamas\u0131 \u00f6zet olarak, \u00f6zel bir kodlama tekni\u011fiyle yaz\u0131lm\u0131\u015f Web sitelerinin bir mobil uygulama gibi kullan\u0131lmas\u0131n\u0131 ve \u00e7evrim d\u0131\u015f\u0131yken de eri\u015fimi m\u00fcmk\u00fcn k\u0131lan yeni bir teknolojidir.<\/p>\n<p>PWA olarak da k\u0131saltabilece\u011fimiz bu teknolojinin kullan\u0131labilmesi i\u00e7in kullan\u0131c\u0131n\u0131n g\u00fcncel bir Chrome taray\u0131c\u0131s\u0131 kullan\u0131yor olmas\u0131 gerekir. Kullan\u0131c\u0131 PWA teknolojisiyle yaz\u0131lm\u0131\u015f bir Web sitesine girdi\u011finde taray\u0131c\u0131 &#8220;Bu uygulamay\u0131 k\u0131sayol olarak ana ekran\u0131n\u0131za eklemek ister misiniz?&#8221; sorusunu sorar ve kullan\u0131c\u0131 kabul etti\u011finde sayfa bir uygulama gibi kullan\u0131c\u0131n\u0131n cihaz\u0131na eklenir. Kullan\u0131c\u0131 istedi\u011fi zaman istedi\u011fi yerde, internete ba\u011fl\u0131 olmasa bile siteyi mobil uygulama kullan\u0131r gibi kullanarak gezinmeye devam edebilir. Detayl\u0131 ve teknik bilgi almak isterseniz\u00a0<a href=\"https:\/\/developers.google.com\/web\/fundamentals\/codelabs\/your-first-pwapp\/\" target=\"_blank\" rel=\"noopener noreferrer\">Your First Progressive Web App<\/a> i\u00e7erik sayfas\u0131n\u0131 ziyaret edebilirsiniz.<\/p>\n<p>G\u00fcn\u00fcm\u00fczde \u00e7ok az Web sitesi PWA teknolojisini kulland\u0131\u011f\u0131 i\u00e7in Lighthouse testlerinde bu b\u00f6l\u00fcm\u00fc incelemek vakit kayb\u0131 gibi g\u00f6r\u00fcnebilir. Ancak PWA i\u00e7in gerekli olan baz\u0131 kriterler PWA haricinde de de\u011ferlendirilmektedir. \u00d6rne\u011fin sitenin <a href=\"https:\/\/www.stradiji.com\/tr\/seo-sozlugu\/https-nedir\/\">HTTPS<\/a> kullan\u0131yor olmas\u0131 PWA i\u00e7in bir gerekliliktir, ancak PWA haricinde de HTTPS kullan\u0131m\u0131n\u0131 \u00f6nermekteyiz, \u00e7\u00fcnk\u00fc\u00a0<a href=\"https:\/\/www.stradiji.com\/http-den-https-ye-gecis-icin-seo-checklist\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google HTTPS\u2019e Ge\u00e7i\u015fi Zorunlu Hale Getiriyor<\/a>.<\/p>\n<p>PWA nas\u0131l \u00e7al\u0131\u015f\u0131yor diye merak ederseniz, ak\u0131ll\u0131 telefonunuzdan &#8220;Firefox Platform Status&#8221; veya &#8220;<a href=\"https:\/\/code.nasa.gov\/\" target=\"_blank\" rel=\"noopener noreferrer\">Nasa Open Source Software<\/a>&#8221; sayfalar\u0131n\u0131 ziyaret edebilirsiniz.<\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/www.stradiji.com\/wp-content\/uploads\/2018\/01\/progressive-web-app-samples.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-6171 lazyload\" data-src=\"https:\/\/www.stradiji.com\/wp-content\/uploads\/2018\/01\/progressive-web-app-samples-1024x564.jpg\" alt=\"progressive-web-app-samples\" width=\"800\" height=\"441\" data-srcset=\"https:\/\/stradiji.wpenginepowered.com\/wp-content\/uploads\/2018\/01\/progressive-web-app-samples-1024x564.jpg 1024w, https:\/\/stradiji.wpenginepowered.com\/wp-content\/uploads\/2018\/01\/progressive-web-app-samples-300x165.jpg 300w, https:\/\/stradiji.wpenginepowered.com\/wp-content\/uploads\/2018\/01\/progressive-web-app-samples.jpg 1080w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/441;\" \/><\/a>Lighthouse e\u011fer PWA kullan\u0131yorsan\u0131z, yapt\u0131\u011f\u0131 analizle ne kadar ba\u015far\u0131l\u0131 oldu\u011funuzu \u00f6l\u00e7\u00fcyor. E\u011fer PWA kullanm\u0131yorsan\u0131z veya bir s\u00fcre daha kullanmay\u0131 d\u00fc\u015f\u00fcnm\u00fcyorsan\u0131z, bu b\u00f6l\u00fcmdeki performans \u00f6l\u00e7\u00fcmlerini g\u00f6z ucuyla incelemeniz yeterli olacakt\u0131r.<\/p>\n<ul>\n<li>\n<h3>Accesibility (Eri\u015filebilirlik)<\/h3>\n<\/li>\n<\/ul>\n<p>\u00d6nemli metriklerden biri olan Eri\u015filebilirlik, Web sitenizin kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan sundu\u011fu performans\u0131 \u00f6l\u00e7meye yarayan elementleri bar\u0131nd\u0131r\u0131yor. Web siteniz testin bu b\u00f6l\u00fcm\u00fcnden d\u00fc\u015f\u00fck puan alm\u0131\u015fsa, i\u00e7erik d\u00fczenlemesi, i\u00e7 linkleme, navigasyon yap\u0131s\u0131, renk ve kontrast, yaz\u0131 tipi ve boyutu gibi \u00f6zellikleri ve &#8220;Eri\u015filebilir Zengin Internet Uygulamalar\u0131&#8221; olarak adland\u0131rabilece\u011fimiz \u00f6\u011feleri g\u00f6zden ge\u00e7irmekte b\u00fcy\u00fck fayda var.<\/p>\n<p>Bu \u00f6\u011felerden birka\u00e7\u0131na h\u0131zl\u0131ca g\u00f6z atmak istersek; sayfada yer alan elementlerin kodlama taraf\u0131nda fark edilebilir bir tan\u0131ma veya isme sahip olmas\u0131, kullan\u0131c\u0131 formlar\u0131n\u0131n ge\u00e7erli etiketlere sahip olmas\u0131, arka plan rengi ve yaz\u0131 tipi renkleri aras\u0131nda yeterli kontrast olmas\u0131, g\u00f6rsellerin alt text sahibi olmas\u0131, butonlar\u0131n anla\u015f\u0131l\u0131r i\u00e7eri\u011fe sahip olmas\u0131, temel meta etiketlerinin sayfa i\u00e7inde kurallara uygun \u015fekilde kullan\u0131lmas\u0131, e\u011fer varsa listelelenen \u00f6\u011felerin do\u011fru kodlamayla kullan\u0131lm\u0131\u015f olmas\u0131, dil se\u00e7eneklerini belirtmek i\u00e7in do\u011fru [lang] etiketinin kullan\u0131lm\u0131\u015f olmas\u0131 ve \u00f6zellikle mobil cihazlar i\u00e7in yeniden boyutland\u0131rma se\u00e7eneklerinin do\u011fru entegre edilmi\u015f olmas\u0131 olarak s\u0131ralayabiliriz.<\/p>\n<p>Ayr\u0131ca Lighthouse&#8217;ta analiz edilemeyen baz\u0131 metrikler de var, bunlar\u0131n manuel kontrol edilmesi sa\u011fl\u0131kl\u0131 olacakt\u0131r. Testi \u00e7al\u0131\u015ft\u0131rd\u0131ktan sonra &#8220;manuel olarak kontrol etmek i\u00e7in ek \u00f6\u011feler&#8221; ba\u015fl\u0131\u011f\u0131 alt\u0131nda bu unsular\u0131 bulabilirsiniz.<\/p>\n<ul>\n<li>\n<h3>Best Practices (En \u0130yi Uygulamalar)<\/h3>\n<\/li>\n<\/ul>\n<p>Tamamen kodlamaya dayal\u0131 \u00f6\u011felerle donat\u0131lm\u0131\u015f olan bu b\u00f6l\u00fcmde, Web siteniz mobil cihazlarda ve ayr\u0131ca bir uygulama olarak (PWA) kullan\u0131l\u0131yorsa ne gibi d\u00fczenlemeler yap\u0131lmas\u0131 gerekti\u011fini g\u00f6rmeniz m\u00fcmk\u00fcn. PWA kullan\u0131lmad\u0131\u011f\u0131 zamanlarda dikkat edilmesi gereken \u00f6nemli noktalar \u015funlar:<\/p>\n<ul>\n<li>Yeni sekmede a\u00e7\u0131lmas\u0131 istenen pencerelerin &#8220;noopener&#8221; komutuyla a\u00e7\u0131lmas\u0131, performans ve g\u00fcvenlik art\u0131s\u0131 sa\u011flar.<\/li>\n<li>\u00dc\u00e7\u00fcnc\u00fc parti uygulamalar\u0131n g\u00fcvenlik d\u00fczeyleri periyodik olarak kontrol edilmelidir. \u00d6rnek vermek gerekirse Jquery kitapl\u0131klar\u0131n\u0131n baz\u0131lar\u0131 g\u00fcvenlik problemleri ortaya \u00e7\u0131karabilir. \u0130ncelemek isterseniz\u00a0<a href=\"https:\/\/snyk.io\/vuln\/npm:jquery?lh@1.10.2\" target=\"_blank\" rel=\"noopener noreferrer\">jquery vulnerabilities<\/a> sayfas\u0131na bakabilirsiniz.<\/li>\n<li>Uygulama PWA olarak ayarland\u0131\u011f\u0131nda, uygulaman\u0131n k\u0131sa isminin ana ekrana s\u0131\u011faca\u011f\u0131 \u015fekilde belirlenmesi faydal\u0131d\u0131r. \u0130sim en fazla 12 karakterde olabilir.<\/li>\n<li>G\u00f6rsellerin uygun en \/ boy oran\u0131nda g\u00f6r\u00fcnt\u00fclendi\u011finden emin olunmas\u0131.<\/li>\n<li>Https kullan\u0131l\u0131yor olmas\u0131<\/li>\n<li>Kodlama kayna\u011f\u0131nda Html 2 \u00f6\u011feleri bar\u0131nd\u0131r\u0131yor olmas\u0131<\/li>\n<\/ul>\n<p>Yukar\u0131da listeledi\u011fimiz \u00f6\u011feler, \u00f6nemli metriklerden baz\u0131lar\u0131yd\u0131. Di\u011fer metrikleri yapt\u0131\u011f\u0131n\u0131z test sonu\u00e7lar\u0131nda bulabilir ve inceleyebilirsiniz. Sunucu ve kodlama taraf\u0131nda dikkat edilmesi ve teknik bilgiye sahip olunmas\u0131 gereken detaylara yer vermedik.<\/p>\n<ul>\n<li>\n<h3>SEO<\/h3>\n<\/li>\n<\/ul>\n<p>Son maddemiz Lighthouse&#8217;ta SEO elementlerinin \u00f6l\u00e7\u00fclmesiyle kar\u015f\u0131m\u0131za \u00e7\u0131k\u0131yor. \u00c7o\u011fu Web sitesinin y\u00fcksek puan alabilece\u011fi bu \u00f6l\u00e7\u00fcm k\u0131sm\u0131nda hi\u00e7 duymad\u0131\u011f\u0131n\u0131z bir metrik yer alm\u0131yor. Genel olarak bildi\u011fimiz ve kabul etti\u011fimiz temel SEO \u00f6\u011felerinin \u00f6l\u00e7\u00fcld\u00fc\u011f\u00fc SEO k\u0131sm\u0131nda, en s\u0131k kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z hata mobil cihazlardaki yaz\u0131 boyutunun gere\u011finden k\u00fc\u00e7\u00fck olmas\u0131yd\u0131. \u00d6rne\u011fin kendi Web sitemizde yapt\u0131\u011f\u0131m\u0131z testte yaz\u0131 tipi boyutlar\u0131 \u00e7o\u011funlukla 10-14 pixel aras\u0131ndayd\u0131. Google yaz\u0131 tipi boyutunun en az 16 pixel olmas\u0131n\u0131 \u00f6neriyor, aksi taktirde \u00e7o\u011fu kullan\u0131c\u0131n\u0131n zoom yaparak yaz\u0131y\u0131 b\u00fcy\u00fctmek zorunda kalabilece\u011fini belirtiyor.<\/p>\n<p>Bu y\u00fczden ilk olarak mobil cihazlar i\u00e7in yaz\u0131 tipi boyutunu minimum 16 pixel olacak \u015fekilde ayarlaman\u0131z\u0131 \u00f6neririz. Lighthouse analizinin SEO b\u00f6l\u00fcm\u00fcnde yer alan di\u011fer metrikler \u015f\u00f6yle:<\/p>\n<ul>\n<li>Sitenin &#8220;Viewport &#8221; meta etiketine sahip olmas\u0131 ve yeniden boyutland\u0131rmaya izin verecek \u015fekilde yap\u0131land\u0131r\u0131lm\u0131\u015f olmas\u0131<\/li>\n<li>Sayfan\u0131n ge\u00e7erli bir &lt;meta title&gt; etiketine sahip olmas\u0131<\/li>\n<li>Sayfan\u0131n ge\u00e7erli bir &lt;meta description&gt; etiketine sahip olmas\u0131<\/li>\n<li>Sayfan\u0131n ba\u015far\u0131l\u0131 bir Http durum kodu bildirmesi, ba\u015far\u0131yla a\u00e7\u0131lan sayfalar Http durum kodu olarak 200 -&gt; Ok d\u00f6nd\u00fcr\u00fcrler.<\/li>\n<li>Sayfa i\u00e7indeki t\u00fcm linklerin ge\u00e7erli ve g\u00f6r\u00fcn\u00fcr bir ba\u011flant\u0131 metnine (anchor text) sahip olmas\u0131<\/li>\n<li>Sayfan\u0131n robots.txt ve &lt;meta robots&gt; etiketi taraf\u0131ndan bloke edilmemi\u015f olmas\u0131, indekslemeye uygun durumda olmas\u0131<\/li>\n<li>Sayfan\u0131n ge\u00e7erli bir &lt;hreflang&gt; etiketine sahip olmas\u0131<\/li>\n<li>Sayfan\u0131n ge\u00e7erli bir &lt;canonical&gt; etiketine sahip olmas\u0131<\/li>\n<li>\u00d6zellikle mobil cihazlar i\u00e7in \u00f6nemli bir nokta: \u00c7o\u011fu mobil cihaz eklenti (plugin) desteklemeyebilir. Sayfa i\u00e7erisinde mobil cihazlar taraf\u0131ndan desteklenmeyen bir plugin kullan\u0131l\u0131yorsa, fonksiyon bozukluklar\u0131 ya\u015fanabilir ve kullan\u0131c\u0131 deneyimi olumsuz etkilenebilir. Sayfan\u0131zda kulland\u0131\u011f\u0131n\u0131z plugin&#8217;lerin mobil uyumlu oldu\u011funu kontrol etmenizi, e\u011fer plugin mobil uyumlu de\u011filse mobil kullan\u0131c\u0131lara g\u00f6stermemenizi tavsiye ederiz.<\/li>\n<li>Ek olarak manuel kontrol edebilece\u011finiz iki ek \u00f6\u011fe:\n<ul>\n<li>Mobil uyumluluk: <a href=\"https:\/\/search.google.com\/test\/mobile-friendly\" target=\"_blank\" rel=\"noopener noreferrer\">Mobil uyumluluk test arac\u0131n\u0131<\/a> kullanarak sayfan\u0131z\u0131n mobil uyumluluk durumunu \u00f6\u011frenebilirsiniz.<\/li>\n<li>Yap\u0131land\u0131r\u0131lm\u0131\u015f veri: <a href=\"https:\/\/search.google.com\/structured-data\/testing-tool\/\" target=\"_blank\" rel=\"noopener noreferrer\">Yap\u0131land\u0131r\u0131lm\u0131\u015f veri test arac\u0131n\u0131<\/a> kullanarak sayfan\u0131zdaki yap\u0131land\u0131r\u0131lm\u0131\u015f veride bir hata olup olmad\u0131\u011f\u0131n\u0131 \u00f6\u011frenebilirsiniz.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Ve analiz tamamland\u0131\u011f\u0131nda e\u011fer analizi dosya olarak kaydetmek isterseniz, sayfan\u0131n en \u00fcst sa\u011f taraf\u0131ndaki payla\u015f\u0131m butonunu kullanabilirsiniz. &#8220;Print Expanded&#8221; se\u00e7tikten sonra dosyay\u0131 yazd\u0131rmay\u0131p, PDF olarak da kaydedebiliyorsunuz.<\/p>\n<h2><a ref=\"magnificPopup\" href=\"https:\/\/www.stradiji.com\/wp-content\/uploads\/2018\/01\/lighthouse-analysis-reports.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-6173 lazyload\" data-src=\"https:\/\/www.stradiji.com\/wp-content\/uploads\/2018\/01\/lighthouse-analysis-reports-1024x427.jpg\" alt=\"lighthouse-analysis-reports\" width=\"800\" height=\"333\" data-srcset=\"https:\/\/stradiji.wpenginepowered.com\/wp-content\/uploads\/2018\/01\/lighthouse-analysis-reports-1024x427.jpg 1024w, https:\/\/stradiji.wpenginepowered.com\/wp-content\/uploads\/2018\/01\/lighthouse-analysis-reports-300x125.jpg 300w, https:\/\/stradiji.wpenginepowered.com\/wp-content\/uploads\/2018\/01\/lighthouse-analysis-reports.jpg 1109w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/333;\" \/><\/a>Google Lighthouse Analiz S\u00fcrecini Kolayla\u015ft\u0131rmak i\u00e7in Yeni Arac\u0131m\u0131z Olabilir Mi?<\/h2>\n<p>Bize g\u00f6re Google Lighthouse \u00f6zellikle sayfa y\u00fckleme h\u0131z\u0131, kodlama performans\u0131, eri\u015filebilirlik, Progresif Web Uygulamas\u0131 optimizasyonu ve temel SEO uyumlulu\u011fu konusunda kullanabilece\u011finiz yeni bir ara\u00e7 olmaya aday. Google&#8217;\u0131n t\u00fcm analiz ara\u00e7lar\u0131n\u0131 yenileme s\u00fcrecine ba\u015flad\u0131\u011f\u0131 tarihlerde \u00f6nce geli\u015ftirici se\u00e7enekleri i\u00e7inde test arac\u0131 olarak kullan\u0131ma s\u00fcrd\u00fc\u011f\u00fc Lighthouse son \u015feklini alarak kullan\u0131ma a\u00e7\u0131ld\u0131. Bundan sonra \u00e7o\u011fu \u00f6zelli\u011fin Lighthouse i\u00e7ine de eklenerek i\u015fimizi daha da kolayla\u015ft\u0131raca\u011f\u0131n\u0131 d\u00fc\u015f\u00fcnebiliriz. Tabi ilk \u00f6nceli\u011fimiz arac\u0131n tamamen T\u00fcrk\u00e7e kullan\u0131labilir olmas\u0131 ve T\u00fcrk\u00e7e bir kullan\u0131m k\u0131lavuzuna kavu\u015fmas\u0131.<\/p>\n<p>Yaz\u0131m\u0131zda arac\u0131n sundu\u011fu t\u00fcm \u00f6zelliklerden bahsedemedi\u011fimizin fark\u0131nday\u0131z, baz\u0131 analizler uzmanl\u0131k d\u00fczeyinde teknik bilgi gerektirdi\u011fi i\u00e7in yanl\u0131\u015f bir y\u00f6nlendirme yapmak yerine hi\u00e7 bahsetmemeyi se\u00e7tik. \u00d6zellikle yaz\u0131l\u0131mla ilgiliyseniz, kendi \u00e7aban\u0131zla \u00e7\u00f6zebilece\u011finiz bir\u00e7ok \u00f6nemli detay oldu\u011funu d\u00fc\u015f\u00fcn\u00fcyoruz. Google Lighthouse&#8217;u eklenti olarak da taray\u0131c\u0131n\u0131za ekleyip istedi\u011finiz Web sitesini test etmenizi \u015fiddetle tavsiye ederiz.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google taraf\u0131ndan geli\u015ftirilen PageSpeed \u200b\u200bInsights (PSI), bir web sitesinin performans\u0131n\u0131 \u00f6l\u00e7mek ve iyile\u015ftirmek i\u00e7in \u015fimdiye kadar kulland\u0131\u011f\u0131m\u0131z demirba\u015f ara\u00e7lardan birisiydi.<\/p>\n","protected":false},"author":3,"featured_media":6174,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[389,1015,1016,1017,939,1018,588,157,1019,1020,1021],"class_list":["post-6165","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arama-motoru-optimizasyonu","tag-adblock","tag-chrome-add-on","tag-first-byte","tag-first-meaningful-paint","tag-google-chrome","tag-google-lighthouse","tag-https","tag-mobil-uyumluluk","tag-page-speed","tag-progressive-web-app","tag-pwa"],"_links":{"self":[{"href":"https:\/\/www.stradiji.com\/tr\/wp-json\/wp\/v2\/posts\/6165","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=6165"}],"version-history":[{"count":0,"href":"https:\/\/www.stradiji.com\/tr\/wp-json\/wp\/v2\/posts\/6165\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.stradiji.com\/tr\/wp-json\/wp\/v2\/media\/6174"}],"wp:attachment":[{"href":"https:\/\/www.stradiji.com\/tr\/wp-json\/wp\/v2\/media?parent=6165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stradiji.com\/tr\/wp-json\/wp\/v2\/categories?post=6165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stradiji.com\/tr\/wp-json\/wp\/v2\/tags?post=6165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}