{"id":33299,"date":"2022-04-29T13:51:45","date_gmt":"2022-04-29T10:51:45","guid":{"rendered":"https:\/\/www.natro.com\/blog\/?p=33299"},"modified":"2022-04-29T13:53:28","modified_gmt":"2022-04-29T10:53:28","slug":"speed-index-si-nedir-nasil-iyilestirilir","status":"publish","type":"post","link":"https:\/\/www.natro.com\/blog\/speed-index-si-nedir-nasil-iyilestirilir\/","title":{"rendered":"Speed Index (SI) Nedir? Nas\u0131l \u0130yile\u015ftirilir?"},"content":{"rendered":"\n

Kullan\u0131c\u0131 beklentileri her ge\u00e7en g\u00fcn de\u011fi\u015fiyor. Zamana kar\u015f\u0131 bir yar\u0131\u015f i\u00e7inde i\u015fler y\u00fcr\u00fct\u00fcl\u00fcrken insanlar her \u015feyden en y\u00fcksek verimi almak istiyor. Web sayfalar\u0131n\u0131n t\u00fcm \u00f6\u011felerinin m\u00fcmk\u00fcn olan en k\u0131sa s\u00fcrede y\u00fcklenmesi de bu beklentilerden bir tanesidir. Web sayfas\u0131n\u0131n g\u00f6rsel i\u00e7eri\u011finin y\u00fcklenmesi yava\u015fsa kullan\u0131c\u0131lar hayal k\u0131r\u0131kl\u0131\u011f\u0131na u\u011fruyor. Bu hayal k\u0131r\u0131kl\u0131\u011f\u0131 beraberinde olumsuz sonu\u00e7lar getiriyor. \u0130\u015flerinizin k\u00f6t\u00fc y\u00f6nde etkilenmemesi, web sayfan\u0131z\u0131 ziyaret eden kullan\u0131c\u0131lar\u0131 hayal k\u0131r\u0131kl\u0131\u011f\u0131na u\u011fratmamak ve kaybetmemek i\u00e7in sayfan\u0131z\u0131n h\u0131z\u0131 y\u00fcklendi\u011finden emin olmal\u0131s\u0131n\u0131z.<\/p>\n\n\n\n

Speed Index Nedir?<\/strong><\/span><\/h2>\n\n\n\n

Speed Index ya da H\u0131z \u0130ndeksi, bir web sayfas\u0131n\u0131n \u00f6\u011felerinin ne kadar h\u0131zl\u0131 g\u00f6r\u00fcn\u00fcr hale geldi\u011fini g\u00f6steren \u201cweb sayfas\u0131 y\u00fckleme performans\u0131\u201d metri\u011fidir. Speed Index (SI) yaln\u0131zca ekran\u0131n g\u00f6r\u00fcnen k\u0131sm\u0131nda \u00f6l\u00e7\u00fcl\u00fcr. Web sayfas\u0131 i\u00e7eriklerinin g\u00f6rsel ilerleme h\u0131z\u0131 ve g\u00f6rsel eksiksizlik h\u0131z\u0131 Speed Index puan\u0131n\u0131 etkiler.<\/p>\n\n\n\n

\u0130yile\u015ftirilmi\u015f bir Speed Index puan\u0131, bir web sitesinin kullan\u0131c\u0131yla g\u00f6rsel olarak daha h\u0131zl\u0131 ileti\u015fim kurdu\u011fu ve kullan\u0131c\u0131ya ziyaretin amac\u0131na ula\u015fmak i\u00e7in daha h\u0131zl\u0131 bir f\u0131rsat sundu\u011fu anlam\u0131na gelir. Speed Index, web sayfas\u0131 y\u00fckleme performans\u0131 \u00f6l\u00e7\u00fcs\u00fc de\u011fildir. Ancak Speed Index, bir web sayfas\u0131n\u0131n kullan\u0131c\u0131 i\u00e7in ne kadar verimli y\u00fcklendi\u011fini g\u00f6steren \u00f6nemli g\u00f6stergelerden bir tanesidir. Bu nedenle Search Intent ile Speed Index aras\u0131nda \u00f6nemli bir ba\u011flant\u0131 vard\u0131r. Bir kullan\u0131c\u0131n\u0131n arama amac\u0131 h\u0131zl\u0131 bir i\u015flem gerektiriyorsa Speed Index\u2019in \u00f6nemi hem UX hem de SEO i\u00e7in daha da artacakt\u0131r.\u00a0<\/p>\n\n\n\n

Site h\u0131z\u0131 art\u0131rma y\u00f6ntemleri nelerdir, web sitenin h\u0131z\u0131 nas\u0131l iyile\u015ftirilir \u00f6\u011frenmek i\u00e7in buradaki<\/a> blog yaz\u0131m\u0131z\u0131 inceleyebilirsiniz.<\/p><\/blockquote>\n\n\n\n

Speed Index, g\u00f6r\u00fcnen i\u00e7eri\u011fin h\u0131zl\u0131 y\u00fcklenip y\u00fcklenmedi\u011fini size bildirir. Speed Index puan\u0131 ne kadar d\u00fc\u015f\u00fckse, kullan\u0131c\u0131 deneyimi o kadar iyidir. Speed Index puan\u0131 ne kadar y\u00fcksekse, kullan\u0131c\u0131 deneyimi bir o kadar k\u00f6t\u00fcd\u00fcr. Speed Index puan\u0131, sayfan\u0131z\u0131 optimize etmeniz gerekip gerekmedi\u011fini de size g\u00f6sterir. \u0130yi bir puan elde etmeniz i\u00e7in bakman\u0131z gereken iki kritik nokta vard\u0131r; bunlar i\u00e7erik verimlili\u011fini optimize etmek ve kritik olu\u015fturma yolunu optimize etmektir.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Web uygulamalar\u0131 i\u015flevsellik, kapsam ve kullan\u0131labilirlik a\u00e7\u0131s\u0131ndan b\u00fcy\u00fcmeye devam eder. Y\u00fczlerce kaynak bu uygulamalar\u0131 olu\u015fturur ve her kayna\u011f\u0131n al\u0131nmas\u0131 sayfa y\u00fckleme s\u00fcresine eklenir. Performans\u0131 korumak, yaln\u0131zca sayfay\u0131 olu\u015fturan kaynaklar ve i\u00e7erik optimize edildi\u011finde m\u00fcmk\u00fcnd\u00fcr. Speed Index, g\u00f6r\u00fcn\u00fcr i\u00e7eri\u011fin performans\u0131n\u0131n izlenmesinde kritik bir rol oynar.<\/p>\n\n\n\n

Speed Index Nas\u0131l \u00d6l\u00e7\u00fcl\u00fcr?<\/strong><\/h2>\n\n\n\n

Speed Index, bir sayfan\u0131n i\u00e7eri\u011finin ne kadar h\u0131zl\u0131 g\u00f6r\u00fcn\u00fcr oldu\u011funu \u00f6l\u00e7menizi sa\u011flar. Ancak bunun ne anlama geldi\u011fini ve skora hangi fakt\u00f6rlerin katk\u0131da bulundu\u011fu anlamak biraz zor olabilir. Speed Index, puan\u0131 hesaplamak i\u00e7in film \u015feritlerini kullan\u0131r, her kare ekran\u0131n \u00fcst k\u0131sm\u0131ndaki g\u00f6rsel b\u00fct\u00fcnl\u00fck i\u00e7in puanlan\u0131r. Her \u00e7er\u00e7eve i\u00e7in puan \u015fu form\u00fcl kullan\u0131larak hesaplan\u0131r:<\/p>\n\n\n\n

aral\u0131k s\u00fcresi*(1 \u2013 g\u00f6rsel tamamlama %\/100)<\/p>\n\n\n\n

\u0130\u015flem her kare i\u00e7in tekrarlan\u0131r ve t\u00fcm puanlar\u0131n toplam\u0131 size o sayfan\u0131n Speed Index\u2019ini verir.\u00a0<\/p>\n\n\n\n

Speed Index \u00f6l\u00e7\u00fcl\u00fcrken bir web sayfas\u0131n\u0131n ekran\u0131n\u0131n g\u00f6r\u00fcnen k\u0131sm\u0131ndaki i\u00e7erik, sayfa y\u00fckleme s\u0131ras\u0131nda her 1 saniyede 10 kez kareler halinde kaydedilir. Sayfa y\u00fcklenirken al\u0131nan her kay\u0131t aras\u0131ndaki farka yani \u00e7er\u00e7eveler aras\u0131ndaki farka alg\u0131da i\u00e7eri\u011fin y\u00fcklenme h\u0131z\u0131 noktas\u0131nda bak\u0131l\u0131r. \u201cTam\u201d oran\u0131, sayfa y\u00fcklenirken kaydedilen her kare ile web sayfas\u0131 y\u00fcklendikten sonra \u00e7ekilen son kare aras\u0131ndaki fark\u0131n kar\u015f\u0131la\u015ft\u0131r\u0131lmas\u0131yla y\u00fczde olarak hesaplan\u0131r. Farkl\u0131 kareler i\u00e7in tam oran\u0131 da Speed Index puan\u0131n\u0131n bir g\u00f6stergesidir.\u00a0<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Speed Index puan\u0131n\u0131 \u00f6l\u00e7erken g\u00f6rsel taml\u0131k y\u00fckleme s\u00fcresi boyunca bir \u00e7izgi grafi\u011finde g\u00f6sterilir. G\u00f6rsel taml\u0131k y\u00fczdesi, web sayfas\u0131 y\u00fckleme s\u0131ras\u0131nda her an i\u00e7in kaydedilen kareler aras\u0131ndaki farklara bak\u0131larak i\u015flenir ve grafi\u011fe yerle\u015ftirilir. G\u00f6rsel tamamlanma oran\u0131 Y ekseninde, y\u00fckleme s\u00fcresi X ekseninde yer al\u0131r. Bu noktada iki ayr\u0131 web sitesi kar\u015f\u0131la\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda g\u00f6rsel b\u00fct\u00fcnl\u00fck h\u0131z\u0131 bulunur ve g\u00f6rsel b\u00fct\u00fcnl\u00fck h\u0131z\u0131 Speed Index\u2019idir.\u00a0<\/p>\n\n\n\n

Performans a\u00e7\u0131s\u0131ndan bak\u0131ld\u0131\u011f\u0131nda, puan ne kadar d\u00fc\u015f\u00fckse o kadar iyidir. Speed Index\u2019i i\u00e7in tan\u0131mlanm\u0131\u015f bir k\u0131yaslama yoktur ancak <1000 puan iyi bir puan olarak kabul edilir. Ekran\u0131n \u00fcst k\u0131sm\u0131ndaki i\u00e7erik daha h\u0131zl\u0131 g\u00f6r\u00fcnt\u00fcleniyorsa kullan\u0131c\u0131 deneyimi daha iyidir.<\/p>\n\n\n\n

Speed Index Nas\u0131l \u0130yile\u015ftirilir?<\/strong><\/h2>\n\n\n\n

Speed Index\u2019i iyile\u015ftirmenin birka\u00e7 yolu vard\u0131r. Kaynak y\u00fckleme s\u0131ras\u0131 optimizasyonu ve kaynak s\u0131k\u0131\u015ft\u0131rma bunlardan baz\u0131lar\u0131d\u0131r. Speed Index puan\u0131n\u0131 iyile\u015ftirmek i\u00e7in uygulanabilecek baz\u0131 y\u00f6ntemler:<\/p>\n\n\n\n

  • Lazyload ile ekran d\u0131\u015f\u0131 g\u00f6r\u00fcnt\u00fcler y\u00fckleme.<\/li>
  • G\u00f6r\u00fcnt\u00fcler i\u00e7in yer tutucular ekleme.<\/li>
  • Yeni nesil g\u00f6rsel uzant\u0131lar\u0131 kullanma.<\/li>
  • \u00d6l\u00fc ve kullan\u0131lmayan kodlar\u0131 temizleme.<\/li>
  • Web sayfas\u0131 i\u00e7in gerekli di\u011fer kaynaklarla birlikte CSS ve Javascript\u2019i s\u0131k\u0131\u015ft\u0131rmak.<\/li>
  • CSS ve Javascript dosyalar\u0131n\u0131 birle\u015ftirerek istek say\u0131s\u0131n\u0131 azaltmak.<\/li>
  • Web sayfas\u0131 kaynaklar\u0131 i\u00e7in bir \u00f6nbellek hiyerar\u015fisi ve stratejisi olu\u015fturma.<\/li>
  • G\u00f6r\u00fcnt\u00fc dosyalar\u0131n\u0131 kullan\u0131c\u0131 tercihlerine g\u00f6re kay\u0131ps\u0131z veya kay\u0131pl\u0131 olarak optimize etmek.<\/li>
  • Erteleme ile \u00fc\u00e7\u00fcnc\u00fc taraf izleme kaynaklar\u0131n\u0131n indirilmesini erteleme.<\/li>
  • Yaz\u0131 tipi dosyalar\u0131n\u0131 s\u0131k\u0131\u015ft\u0131rma, birle\u015ftirme ve optimize etme.<\/li>
  • CSS ve JS dosyalar\u0131n\u0131 yeniden d\u00fczenleme.<\/li>
  • Daha h\u0131zl\u0131 teslimat ve yan\u0131t s\u00fcreleri i\u00e7in sunucu ko\u015fullar\u0131n\u0131n iyile\u015ftirilmesi.<\/li>
  • Web sayfas\u0131 kaynaklar\u0131n\u0131n daha h\u0131zl\u0131 iletilmesi i\u00e7in CDN kullan\u0131m\u0131.<\/li>
  • DOMContentLoaded olay\u0131n\u0131n daha h\u0131zl\u0131 ger\u00e7ekle\u015febilmesi i\u00e7in HTML yap\u0131s\u0131n\u0131n DOM boyutunu azaltma.<\/li>
  • Web sayfas\u0131n\u0131n anahtar isteklerini \u00f6nceden y\u00fckleme.<\/li>
  • Katlama b\u00f6l\u00fcm\u00fcn\u00fcn \u00fcst\u00fcn\u00fc yapmak i\u00e7in Shadow DOM kullanmak ana \u00f6nceliktir.<\/li>
  • Daha yumu\u015fak sayfa ge\u00e7i\u015fleri i\u00e7in Sanal DOM kullanma.<\/li>
  • Sunucu taraf\u0131nda s\u0131k\u0131\u015ft\u0131rma altyap\u0131s\u0131 olarak Brotli, Gzip ve Deflate kullanma.<\/li>
  • Web sayfalar\u0131 i\u00e7in \u00f6n i\u015flemeyi kullanma.<\/li>
  • Web sayfalar\u0131 i\u00e7in sunucu taraf\u0131 olu\u015fturmay\u0131 kullanma.<\/li>
  • Ekran d\u0131\u015f\u0131 web sayfas\u0131 \u00f6\u011fesinin olu\u015fturulmas\u0131n\u0131 geciktirmek i\u00e7in \u201ccontent-visibility:auto\u201d CSS\u2019yi kullanma.<\/li><\/ul>\n\n\n\n

    Speed Index\u2019i Art\u0131rmak i\u00e7in Web Sayfalar\u0131ndan Kullan\u0131lmayan Kodlar\u0131 Temizleme<\/strong><\/h3>\n\n\n\n

    Kullan\u0131lmayan kodlar bir web sayfas\u0131n\u0131n boyutunu art\u0131r\u0131r. Kullan\u0131lmayan kodlar, t\u00fcm h\u0131z \u00f6l\u00e7\u00fcmlerine zarar veren performansla ilgili \u00f6\u011feleri y\u00fckleyen nadir web sayfalar\u0131ndan biridir. Kullan\u0131lmayan kod sat\u0131rlar\u0131, First Paint\u2019ten Onload Event\u2019e kadar t\u00fcm h\u0131z \u00f6l\u00e7\u00fcmlerini ve web sayfas\u0131 etkinli\u011fini olumsuz etkiler. Bu nedenle, iyi bir Speed Index puan\u0131 ile h\u0131zl\u0131 bir g\u00f6rsel tamamlama olu\u015fturmak i\u00e7in bir web sayfas\u0131n\u0131 kullan\u0131lmayan kodlardan ar\u0131nd\u0131rmak \u00f6nemlidir.\u00a0<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Speed Index\u2019i \u0130yile\u015ftirmek i\u00e7in Javascript ve CSS Dosyalar\u0131n\u0131 S\u0131k\u0131\u015ft\u0131rma ve K\u00fc\u00e7\u00fcltme\u00a0<\/strong><\/h3>\n\n\n\n

    S\u0131k\u0131\u015ft\u0131rma ve k\u00fc\u00e7\u00fcltme HTML, CSS ve JS dosyalar\u0131n\u0131n boyutunu k\u00fc\u00e7\u00fcltmek i\u00e7in uygulan\u0131r. Bir web belgesinin HTML, CSS ve JS dosyalar\u0131 \u00e7e\u015fitli bo\u015fluklar, yorumlar ve gereksiz uzun kod bloklar\u0131 i\u00e7erebilir. T\u00fcm bu kod bloklar\u0131n\u0131 temizleyerek, s\u0131k\u0131\u015ft\u0131rarak ve k\u00fc\u00e7\u00fclterek bir web sayfas\u0131 ve kaynaklar\u0131 y\u00fczde 30\u2019dan fazla k\u00fc\u00e7\u00fclt\u00fclebilir. S\u0131k\u0131\u015ft\u0131rma ve k\u00fc\u00e7\u00fcltme HTML, CSS ve JS dosyalar\u0131n\u0131n boyutunun Speed Index puan\u0131 \u00fczerindeki olumsuz etkisini azaltacak uygulamalardan biridir.\u00a0<\/p>\n\n\n\n

    Speed Index, SEO ve UX i\u00e7in Neden \u00d6nemlidir?<\/strong><\/h3>\n\n\n\n

    Speed Index, bir web sayfas\u0131n\u0131 yaln\u0131zca i\u015flemek yerine bir web sayfas\u0131n\u0131n y\u00fcklenmesine kullan\u0131c\u0131n\u0131n g\u00f6z\u00fcnden bakmakla ilgilidir. Kullan\u0131c\u0131 merkezli sayfa h\u0131z\u0131 veya web sayfas\u0131 y\u00fckleme performans\u0131 metrikleri, kullan\u0131c\u0131n\u0131n web sayfas\u0131 y\u00fckleme deneyimini do\u011frudan anlamak i\u00e7in kullan\u0131lan metriklerdir. SEO ve kullan\u0131c\u0131 deneyimi birbiri ile do\u011frudan ili\u015fkili kavramlard\u0131r. K\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimi sunan bir web sayfas\u0131, arama amac\u0131yla e\u015fle\u015fmedi\u011fi i\u00e7in arama motoru taraf\u0131ndan g\u00f6r\u00fcld\u00fc\u011f\u00fcnde s\u0131ralamada d\u00fc\u015fer. Bu nedenle iyi bir Speed Index puan\u0131, kullan\u0131c\u0131 ile g\u00f6rsel olarak daha iyi ve daha h\u0131zl\u0131 ileti\u015fimin oldu\u011funu g\u00f6sterir. Daha iyi bir arama motoru optimizasyonu performans\u0131 i\u00e7in daha iyi bir kullan\u0131c\u0131 deneyimi gereklidir.\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"Kullan\u0131c\u0131 beklentileri her ge\u00e7en g\u00fcn de\u011fi\u015fiyor. Zamana kar\u015f\u0131 bir yar\u0131\u015f i\u00e7inde i\u015fler y\u00fcr\u00fct\u00fcl\u00fcrken insanlar her \u015feyden en y\u00fcksek…\n","protected":false},"author":7,"featured_media":26348,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[],"class_list":{"0":"post-33299","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-sunucu"},"_links":{"self":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts\/33299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/comments?post=33299"}],"version-history":[{"count":2,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts\/33299\/revisions"}],"predecessor-version":[{"id":33307,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts\/33299\/revisions\/33307"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/media\/26348"}],"wp:attachment":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/media?parent=33299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/categories?post=33299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/tags?post=33299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}