VOFUSWEB

Sayfa Hızı SEO & Google Sıralamasını Nasıl Etkiler | 2020 Sayfa Hız Kılavuzu

Hız bir web sitesi için çok önemlidir. Google'ın bunu gerçek bir sıralama faktörü haline getirmiş olması çok önemlidir. Zaman içinde Google, geliştiriciler ve web yöneticileri için bir dizi araç sağlayarak web sitelerinin yükleme hızını artırmak için harekete geçti. Bu araçlardan biri Google Deniz Feneri'dir. Ama nasıl Google bu PageSpeed Insights Aracı aslında çalışır? Ve, daha da önemlisi, sayfa hızı SEO etkiler mi? Bilmeniz gereken her şeyi bu makalede bulabilirsiniz.

Sayfa Hızı SEO & Google Sıralamasını Nasıl Etkiler | 2020 Sayfa Hız Kılavuzu

Hız bir web sitesi için çok önemlidir. Google'ın bunu gerçek bir sıralama faktörü haline getirmiş olması çok önemlidir. Zaman içinde Google, geliştiriciler ve web yöneticileri için bir dizi araç sağlayarak web sitelerinin yükleme hızını artırmak için harekete geçti. Bu araçlardan biri Google Deniz Feneri'dir. Ama nasıl Google bu PageSpeed Insights Aracı aslında çalışır? Ve, daha da önemlisi, sayfa hızı SEO etkiler mi? Bilmeniz gereken her şeyi bu makalede bulabilirsiniz.

how_page_speed_affects_google_ranking

 

PageSpeed Insights Aracı geçmişte çok iyi olmak için kullanmadı. Oradaki bilgilerin çoğu başka bir yerde nispeten kolay bulunabilir ve oldukça hız kendisi göstermedi. Ancak, Google son zamanlarda aracı güncelledi ve çok daha iyi. Ne yazık ki, bunu anlamak da çok daha zor.

 

Ancak, bu araç PageSpeed Insightsaracılığıyla SEOs arasında popüler hale gelmiştir , hangi, aslında, Deniz Feneri tarafından desteklenmektedir, ama bir web sayfasında, format takip etmek kolay bilgi sağlar.

 

  1. Google PageSpeed Insights nedir?
    1. Mobil vs Masaüstü
    2. Sayfa hızı gerçekte nedir?
  2. PageSpeed Insights SEO etkiler mi? 100/100 Puan Gerekli midir?
  3. PageSpeed Öngörüölçümleri
    1. Saha & Laboratuvar Verileri (Performans Ölçümleri)
    2. Fırsatlar & Teşhis
  4. PageSpeed Insights Puanı Nasıl Hesaplanır?
  5. PageSpeed Insights Puanını Artırmada Önemli Noktalar
    1. Sunucu yanıt süresi
    2. Görüntü sıkıştırma
    3. HTML & CSS Yapısı
    4. Minification & Script Sıkıştırma
    5. Önbellek İlkesi
    6. Hafif Tema & Eklentiler
  6. PageSpeed Insights Puanı Toplu Kontrol Nasıl
  7. Site Hızını Ölçme ve İyileştirme Için Diğer Araçlar
    1. Pingdom
    2. GT-Metrix
    3. mod_pagespeed
    4. Google AMP (Hızlandırılmış Mobil Sayfalar)

 

Google PageSpeed Insights nedir?

 

PageSpeed Insights, Google tarafından sağlanan ve sitelerdeki web performansı sorunlarını belirlemek için kullanılan çevrimiçi bir araçtır. Çoğunlukla teknik SEO sorunlarıile ilgili olmasına rağmen, araçlar da bir Kullanıcı Deneyimi ve bakış erişilebilirlik açısından site analiz.

 

PageSpeedInsights'a https://developers.google.com/speed/pagespeed/insights/'ı ziyaret ederek erişebilirsiniz.

 

PageSpeed Insights Home

 

URL'yi oraya girebilirsiniz ve birkaç saniye sonra araç, web sitenizin performansıyla ilgili bazı sonuçları içeren bir sayfa döndürecektir. En üstte, birden fazla faktörün ortalaması olan genel bir skor olacaktır. Aşağıda hızınızı gerçekte neyin etkilediği hakkında ayrıntılı bilgiler göreceksiniz.

 

Ancak, Google tarafından sağlanan tek PageSpeed aracı değildir. Ayrıca mod_pagespeed, bu hız sorunlarını çözmek için kullanılan bir sunucu modülü ve tam teşekküllü Deniz Feneri (her şeye güç veren site analiz aracı), Chrome'un kendisinde mevcuttur. Ayrıca, Google'ın PageSpeed Insights ile ilgili Chrome Uzantıları bir dizi vardır.

 

Biz bu makale boyunca hepsi hakkında kısaca tartışacağız, ama bir web sitesi kontrol ederken en SEOs kullanmak en kullanışlı araç gibi görünüyor olarak PageSpeed Insights esas olarak odaklanacaktır.

 

Mobil vs Masaüstü

 

Bunu test etmek için bir sayfa eklediğinizde, Google iki puan verecektir: biri mobil sürüm için, diğeri masaüstü sürümü için.

 

Başlangıçta, PageSpeed Aracı masaüstü sürümü için sadece bir puan verdi. Ama son zamanlarda, mobil kullanım daha popüler hale gelmiştir. 2018 itibariyle, arama motoru kullanıcılarının %50'den fazlası mobil cihazlarda arama yapar. Google mobil ilk dizine geçtikçe, mobil sürümleri önce hız için test etmeleri de anlamlıydı.

 

PageSpeed Mobile vs Desktop

 

Ancak, duyarlı bir tasarımınız varsa, bu sürümlerin çoğunlukla aynı olduğunu düşünebilirsiniz.

 

Eğer öyleyse, neden farklı puanları var?

 

Mobil cihazlar: PageSpeed Insights aracını kullandığınızda, alacağınız ilk sonuç mobil hızdır. Bu web sitenizin bir mobil bağlantı üzerinde test edilmiş olduğu anlamına gelir, muhtemelen bir 4G bağlantısı ile, en azından ABD etrafında en yaygın hız gibi görünüyor.

 

Mobile Network Coverage

https://www.uscellular.com/coverage-map/voice-and-data-maps.html

 

Ancak, dünya çapında birçok mobil kullanıcılar hala sadece 3G sinyal almak ve unutmayın, onlar daha yavaş bir bağlantı hızı olmasına rağmen, hala web sitesi gerçekten hızlı yüklemek için bekliyoruz.

 

Ve işte sorun. Her zaman sitenizle ilgili değil, daha çok bağlantının hızıyla ilgilidir. Siteniz, gerçekte bağlantı hızı yavaş olduğunda yavaş gibi görünebilir.

 

Masaüstü: Masaüstünde, bağlantı hızı daha yüksek olduğundan puan daha yüksektir. Işık ve fiber optik le ilgili olan şey bu. Eğer İngiltere'de yaşayan sürece, tabii ki, ve hala bardak ve dize internet var.

 

Yani web sitesi aynı testten geçiyor, ama çoğunlukla farklı olan bağlantı hızı.

 

Bu nedenle mobil cihazlar genellikle daha yavaş bağlantılara sahip olduğundan, mobil cihazlar önce gelir. 5G ile her şey değişebilir, ancak o zamana kadar mobil cihazlar için site hızınızı artırmaya odaklandığınızdan emin olun.

 

Page Speed tam olarak nedir?

 

Tamam, bu yüzden aracın ne yaptığını biliyoruz: sitenizin ne kadar hızlı olduğunu düşünüyor dayalı bir puan verir. Ama tam olarak sayfa hızı nedir?

Sayfa Hızı, tek bir sayfanın web sitenizde yüklediği hızdır. Farklı sayfalar, görüntü ve komut dosyaları gibi etkenler nedeniyle farklı hızlara sahip olabilir.

 

Ama hız göreceli. Web sitesinin performansı, sunucunun performansı, üzerinde olduğunuz belirli web sayfası, bağlantı türü, kullanıcının internet servis sağlayıcısı, internet paketi, cihazın işlem gücü, Tarayıcı, kullanıcının o noktada ne yaptığı, kaç uygulamanın çalıştığı gibi birçok faktöre bağlıdır.

 

Ancak, sadece web sitemiz ve sunucumuz olan çalışabileceklerimizle çalışabiliriz. Geri sini kontrol edemeyiz.

 

Sadece şeyler düz almak için, sayfa hızı pagespeed Insights sunar gibi bir puan değildir. Bu bir web sayfasının yükleme süresi ve saniye cinsinden ölçülür. Önemli olan da bu.

 

Bu yüzden Google PageSpeed Insights geçmişte çok iyi değildi. Web sitenizin gerçekte ne kadar hızlı yüklendiğini hakkında bilgi vermedi. Sadece sayı.

 

İşte bu yüzden bu yeni versiyon çok iyi. Aynı zamanda eski sürümünden iyi şeyler tutarken gerçek yükleme hızı hakkında bilmeniz gereken her şeyi söyler.

 

Yükleme süresinde farklı noktalar da vardır. Örneğin, başlangıçta kullanılması gerekmedığından, bazı komut dosyalarını sonuna doğru çalıştırmak isteyebilirsiniz.

 

Yüklemeyi bitirmek için çok zaman alabilir, böylece toplam yükleme süresi daha yüksek olabilir. Ama site o zamana kadar kullanılabilir ise, böyle büyük bir sorun değildir.

 

Fast Website Loading Speed

 

Örneğin, bir çıkış niyeti açılır komut dosyası çalıştırmak istediğinizi varsayalım. Bu komut dosyasının yüklenmesi varsayımsal olarak 5-10 saniye sürer. Ancak, kullanıcıya sadece yaklaşık 20-30 saniye sonra göstermek istiyorum.

 

Komut dosyanızı hemen çalıştırmaya başlarsanız, kullanıcının görmesi gereken ilk şey gibi diğer önemli öğeleri yüklemeyi erteleyebilirsiniz: yukarıdaki kat içeriği. Bu çok kötü olurdu, özellikle de gelecekte yaklaşık 20-30 saniye kadar bu komut dosyası kullanmak için gitmiyoruz.

 

Böylece, kullanıcıya daha iyi bir deneyim sunmak için komut dosyasının yüklenmesi hayati önem taşıyan her şeyden sonra yüklemeyi erteleyebilirsiniz.

 

Ancak, menüyü çalıştıran bir komut dosyanız veya web sitesinin kullanılabilirliği için hayati önem taşıyan bir komut dosyanız varsa, bu komut dosyasını sonuna doğru yüklemek istemeyebilirsiniz. Kullanıcı her şey yüklenmeden önce bu işleve erişemeyecek gibi bu deneyimi mahveder.

 

Sayfa Hızı SEO Etkiler mi? 100/100 Insights Puanı Gerekli midir?

 

Basit cevap sayfa hızı SEO etkiler. Sayfa hızı doğrudan bir sıralama faktörü, Google'ın Algoritma Hız Güncelleme beri daha iyi bilinen bir gerçektir. Ancak, hız da dolaylı olarak sıralaması etkileyebilir, sıçrama oranını artırarak ve çalışma süresini azaltarak.

 

 

Google'da kullanıcılar önce gelir. Google tarafından yapılan çalışmalar, ortalama 3G yükleme hızının çok yavaş olduğunu göstermektedir. Ayrıca, kullanıcıların yaklaşık 3 saniye sonra siteden ayrıldığını da gösterirler. Bu onların deneyim kötü ve Google kötü kullanıcı deneyimi sağlayan sıralama siteleri sevmiyorum anlamına gelir.

 

 

 

Unutmamanız gereken şey, hızın 0'dan 100'e kadar olan noktalarda değil saniyecinsinden ölçüldüğüdür. PageSpeed Insights hızınızı artırmanıza yardımcı olan bir araç olsa da, oradaki skor gerçek dünyada bir şey ifade etmez.

Yine de, Sayfa Hız Puanı'nı geliştirmek önemlidir.

 

 

Neden?

 

Çünkü Google ile oradaki puanın bir sıralama faktörü olarak kullanılıp kullanılmadığını tam olarak bilmiyoruz. Google saniye kullanıyor mu? Skoru kullanıyor mu? Kim bilir...

 

Ancak, mükemmel pagespeed puanı kötü sıralama ve çok iyi (#youtube) rütbe 50'den daha düşük bir puan ile web siteleri gördüm.

 

Ancak, Google'ın bu testleri nasıl yaptığını göz önünde bulundurabilirsiniz. Testlerin nereden yapıldığını bilmiyoruz. Romanya ve Google'dan sunucunuz ABD'de bir 3G bağlantısı ile test mi? O zaman düşük hızlar bekleyebilirsin.

 

 

Ama sadece kullanıcının iyiliği için, yükleme süresini ön planda tkoyun. Ve bunu test etmek için yalnızca PageSpeed Insights'ı kullanmayın. Sonuna kadar sopa ve size web sitenizin farklı yerlerden yükler hızını test etmek için kullanabileceğiniz araçlar bir çift göstereceğim.

Bazen, Google kendisi çelişiyor!

 

 

Örneğin, Google PageSpeed Insights, Google Analytics komut dosyası oluşturma engellemeyi dikkate alır, bu da daha sonra altbilgide yüklemeniz gerektiği anlamına gelir. Ancak Google Analytics, komut dosyasının web sitenizin <head> bölümüne yerleştirilmesi gerektiğini, aksi takdirde düzgün çalışmayacağını ve başlangıçta geçerli bir yükleme olarak kabul edilmeyeceğini açıkça belirtir.

 

Böylece PageSpeed Insights küçük bir puan isabet olsun ... Google ne diyor yaparak ... sadece bu şekilde yapmamalısınız söylenecek ... Google tarafından. Anladın mı?

 

Ayrıca, analytics.js dosyasını sunucunuzda depolamadığınız sürece komut dosyasını düzgün bir şekilde önbelleğe alamazsınız. Bu açıkça Google Analytics'in tavsiye etmediği bir şey. Google Analytics JavaScript dosyası her güncelleme aldığında sitenizde de güncellemeniz gerekeceği için, bakım için de bir cehennem dir.

Bu, tabii ki, google araçları ve komut dosyaları ile sadece olmaz ama herhangi bir 3.

 

Bizim savunmamızda, Google'a ait olan ve teorik olarak örnek olması gereken YouTube bile, en azından bu makaleyi yazarken oldukça yavaş bir PageSpeed Insights puanına sahiptir.

 

Slow YouTube PageSpeed

 

Ama bu site yükleri yavaş olduğu anlamına gelmez. Bu alan verileri (hangi için bol olduğunu görebilirsiniz, YouTube gibi) site yükleri hemen hemen 4 saniye içinde, hangi aslında kötü değil, son zamanlarda YouTube küçük resimlerde video önizlemesağlar göz önüne alındığında.

 

 

ThinkWithGoogle Test Mobile Speed

 

Yukarıda görebileceğiniz gibi, diğer işletmenin web sitesi, BrandMentions bir 4G bağlantısı üzerinde 2 saniyenin altında yükler. Bunu oldukça iyi görürdük. Elbette, her zaman gelişme için yer vardır. Google standartlarına göre... Ortalama.

 

Ancak, Google cognitiveSEO web sitesi hızı yavaş düşünün gibi görünüyor, hala kullanıyoruz 3 parti araçlarının miktarı göz önüne alındığında hala oldukça hızlı 3 saniye içinde yükler olsa bile.

 

CognitiveSEO

Hızlı kabul edilmesi için 1 saniyenin altına inmeniz gerektiğini unutmayın! Bunu yapmak için, muhtemelen hiçbir 3 parti eklentileri veya fantezi pop-up ile çok basit bir site gerekir. Aslında bazı dijital pazarlama yapmak istiyorsanız kolay değil.

 

Yani evet, yükleme hızı SEO için önemlidir, ama mükemmel bir PageSpeed Insights puanı değildir. Web siteniz yaklaşık 3 saniye içinde yüklenir sürece, çoğu kullanıcı ile iyi olmalıdır.

 

PageSpeed Öngörüölçümleri

 

Pek çok şey site hızını etkileyebileceğinden, Google, sorunların daha iyi anlaşılması için PageSpeed Insights Aracı'ndaki farklı kategorilerdeki her şeyi ayırır.

 

Google aynı zamanda hızı en çok neyin etkilediğini gösteren bir tür öncelik lendirme sağladığı ndan, bu yararlıdır.

 

Saha & Laboratuvar Verileri

 

Bunlar gerçekten yararlı olan yeni ölçümlerdir. Bunlar iki kategoriye ayrılır: alan ve laboratuvar verileri.

 

Google tarafından chrome veya diğer veri sağlayıcıları aracılığıyla gerçek kullanıcılardan elde edilen veriler olduğu için, alan verileri gerçek dünyada önemli olan şeydir.

 

Tabii ki, bir ortalama ve Google henüz yeterli veri yoksa size bildirecektir.

 

Origin Özeti, sitenin bir bütün olarak hızının ortalamasını gösterir. Bu şekilde, sayfanızın siteyle nasıl karşılaştırışyaptığı ve sitenin Chrome Kullanıcı Deneyimi Raporu'ndaki diğer sitelerle nasıl karşılaştırışyaptığı hakkında bir fikriniz olabilir.

 

Laboratuvar verileri,hala yararlı olmasına rağmen, kontrollü bir ortamdan toplanan olarak daha az önemli olarak kabul edilebilir. Bu, tek bir bağlantı üzerinden test edildiği ve birden çok kullanıcıdan veri toplamaz anlamına gelir.

Laboratuvar verileri aslında Google sayfa hız puanı oluşturur.

 

Google'ın her zaman alan verilerine sahip olmaması nedeniyle, sitenizi analiz etmek için yerinde gerçekleştirilen laboratuvar verilerini kullanır.

 

İlk İçerikli Boyama, kullanıcıların web sayfanızda ilk kez bir şey gördüğü anı temsil eder. Eğer görüntü serisi bakarsanız aslında nasıl göründüğünü görebilirsiniz:

 

First Contentful Paint

 

Gördüğünüz gibi, sayfa tam olarak işlenmedi, orada bir şey görüntülendi.

 

İlk Anlamlı Boya ikinci adımdır, diyelim ki, yukarıdaki sonuçları örnek olarak alırsak. Kullanıcının ilk içerik parçasını gerçekten anlayabileceği noktayı temsil eder. Örneğin, yalnızca renkler ve arka planlar yerine bazı okunabilir metin veya resim görüntülenir.

 

Hız İndeksi daha karmaşık bir metriktir. Web sitenizdeki öğelerin gözle görülür şekilde ne kadar hızlı doldurulur ölçer. Ne kadar hızlı görünürlerse o kadar iyi. Saniyeler içinde ölçüldüğü için burada daha düşük bir skor arıyorsunuz.

 

İlk CPU Boşta, sitenin kullanıcının ilk girdisini işleyebilmek için yeterli bilgiyi yüklediği noktayı temsil eder. Örneğin, site yeterince alakalı bilgi yüklemediyse, kullanıcı öğelere dokunabilir veya aşağı kaydırabilir, ancak hiçbir şey olmaz.

 

Time to Interactive, web sitesinin tamamen etkileşimli olduğu bir sonraki seviyedir. Bu, her şeyin aygıtın belleğinde yüklendiği ve artık kullanıma hazır olduğu anlamına gelir.

 

Max Potansiyel İlk Giriş Gecikmesi, kullanıcının tarayıcılarla etkileşimde bulunduğu noktadan tarayıcının yanıt verdiği noktaya kadar yaşadığı gecikmedir. Bu, sayfa hız puanını etkilemeyen tek performans ölçüsüdür.

 

 

Fırsatlar & Teşhis

 

Fırsatlar bölümü, sitenizde neler geliştirebileceğiniz hakkında bilgi sağlar. Ayrıca, her sorunun yükleme sürenizi ne kadar etkilediğini ve görevlerinize nasıl öncelik vermeniz gerektiğini de bildirir.

 

Her birini gözden geçirmek aşırıya kalırdı. Ancak, her metrik altında bölümü genişletmek için kullanabileceğiniz küçük bir ok olacak.

 

PageSpeed Opportunities & Diagnostics

 

Burada her tavsiye ve sitenizin hızını artırmak için sorunu düzeltmek için nasıl hakkında bilgi bulacaksınız. En büyük sorunlara neden olan unsurların genel olarak görüntüler ve üçüncü taraf komut dosyaları olduğunu fark edeceksiniz.

 

Geçirilen Denetimler bölümü, web sayfanızda zaten iyi yaptığınız şeylerin listesidir. Temel olarak, Google'ın parametrelerine uyan hem Fırsatlar hem de Tanılama bölümlerinden öğeler gösterecektir.

 

Bu listede ne kadar çok varsa, o kadar iyi!

 

PageSpeed Insights Puanı Nasıl Hesaplanır?

 

PageSpeed Insights Aracı'nda çok fazla şey görebilirsiniz, ancak skor aslında yalnızca Laboratuvar Verileri bölümündeki saniyeler kullanılarak hesaplanır. Yakından okursanız, Fırsatlar ve Tanılama altında "Bu ölçümler Performans puanını doğrudan etkilemez." iletisini gerçekten görebilirsiniz.

 

Laboratuvar Verileri'ndeki ölçümlere performans ölçümleri denir. Onlardan 6 tane var ve biz onları yukarıda sunduk. Her metrik 0'dan 100'e kadar puan alır. Her metrik puanı hesaplamak farklı bir ağırlık vardır.

 

3 – İlk

içerikli boya

1 – İlk

anlamlı boya

2 –

İlk cpu boşta 5 – Etkileşimli 4 – Hız indeksi 0 – Tahmini giriş gecikmesi

 

Önem sırasına göre, bunlar şu şekilde listelenir: Etkileşimli Zaman, Hız İndeksi, İlk İçerikli Boyama, İlk CPU Boşta, İlk Anlamlı Boyama ve Tahmini Giriş Gecikmesüresi, aslında skor üzerinde hiçbir etkisi yoktur.

 

Skorlar Log-normal dağıtım algoritmalarına dayanıyor, bu yüzden tavşan deliğinin derinliklerine inmeyelim. Daha fazla bilgi edinmek istiyorsanız bu sayfayı okuyabilirsiniz.

 

Google ayrıca, skorun gerçekte nasıl oluşturulduğunu görmek için kullanabileceğiniz bir Sayfa dosyası da koymuştur. Excel işlevlerini biliyorsanız, her şeyin nasıl çalıştığını tersine çevirebilirsiniz. Bu dosyayı buradan indirebilirsiniz, ancak daha önce kendi kopyanızı (Dosya -> Kendi kopyanızı yapın) oluşturmanız gerekir. Deniz Feneri v5 için bir sürümü de var.

 

PageSpeed Score Calculator

 

Basit bir ifadeyle ifade etmek gerekirse, İlk İçerikli Boya skoru İlk Anlamlı Boya'dan daha fazla etkiler ve böyle devam eder.

 

Neden? Eh, muhtemelen çünkü ekranda hiçbir şey görüntüler, kullanıcı web sitenizi terk etmek daha olasıdır. Görüntülerseniz... Bir şey, geri kalanı teslim almak için biraz zaman kazanırsınız.

 

Puanlar sonuçta 3 kategoriye ayrılır, Yavaş (0-49), Ortalama (50-89) ve İyi (90-100). Sonra ortalama web siteniz için bir final puanı olarak oluşturulur.

Genellikle, 50 yaşından az iseniz, düzeltilmesi gereken bazı sorunlar var! Ama yine de, siteniz yaklaşık 3 saniye içinde yükler eğer ter yok.

 

 

PageSpeed Insights Puanını Artırmada Önemli Noktalar

 

Oradaki her şeyi sindirmek biraz zor olabilir. Anlıyoruz. Büyük ihtimalle, her şeyi çözemeyeceksin! %100 puan almanın önemli olmadığını göz ardı ettik. Ancak, burada fark sitenizin daha hızlı yük yapacak temel unsurlardır.

 

Uyarı: Bu geliştirmeleri yapmadan önce hem dosyalarınızın hem de veritabanınızın yedekini gerçekleştirin. Onlar web sitenizi berbat edebilir ve bir önceki sürüme dönebilirsiniz emin olmak zorunda!

 

Sunucu yanıt süresi

 

Sunucu gerçekten kendinizi geliştirmek değil bir şeydir. Ya iyi bir tane ya da kötü bir tane var. Bunu geliştirmek için, fiziksel makineye sahip olmadığınız sürece, üzerindeki yükü önemli ölçüde azaltmanız veya her ikisi de üzerinde denetiminizle birlikte olmayan donanımını geliştirmeniz gerekir.

 

Bu yüzden ilk etapta iyi bir sunucu olması önemlidir. Ama nasıl iyi bir sunucu seçerim?

 

Eh, Google'da iyi sırada herhangi bir hosting şirketi iyi hizmet vermelidir. Ancak, bunu test etmek size kalmış. En iyi tavsiye? Çoğunlukla yerel SEO odaklanmış iseniz, yerel bir sunucu seçin. Örneğin, hedef kitlenizin çoğu İtalya'da yaşıyorsa, İtalya'daki veri merkezi nin olduğu bir sunucu seçin.

 

Veri merkezi ABD'de tüm yol ise, bilgi hedef kitleye ulaşmadan önce büyük bir mesafe seyahat etmek zorunda kalacak.

 

Her zaman PageSpeed Insights ile barındırma sağlayıcısının kendi web sitesini test edebilir ve ttfb (Time To First Byte) veya Server Response Time'ı görebilirsiniz. Geçirilen Denetimler bölümündeyse, iyi bir barındırma sağlayıcınız olduğunu bilirsiniz.

 

Fast Server TTFB

 

Ancak, orada hızı test edebilirsiniz böylece barındırma sağlayıcısının gerçek bir istemci sağınızda birini tanıyorsanız daha iyidir.

 

Gerçekçi, ev sahibinin kendi web sitesi muhtemelen özel bir sunucuda olacak, siteniz paylaşılan bir barındırma paketi üzerinde olacak. Bu, bilgisayarın CPU'su ve internet bant genişliğini diğer web siteleri ile paylaşacağınız anlamına gelir.

 

Eğer bir istemciden gerçek bir site test edebilirsiniz, bu harika. İncelemelere bakıp müşteri bulabilir veya destek ekibinden bir tane sağlamasını isteyebilirsiniz.

 

Görüntü sıkıştırma

 

Genel olarak, görüntüleri web siteleri ile en büyük sorun vardır. Onlar büyük ve indirmek için çok almak.

 

Görüntülerle ilgili iki tür sorun vardır. Bunlardan ilki ekran boyutu ile pikseldeki gerçek görüntü boyutu, ikincisi ise disk boyutudur.

 

Disk Boyutu: Bir görüntü sabit diskveya SSD'ye ne kadar çok fiziksel alan yüklenirse, karşıdan yüklemesi o kadar fazla sürer. 100 KB 1000 KB 'den (1MB) çok daha hızlı indirecektir. Blog yazınızda bunun gibi 10 resim varsa, sitenizin çok yavaş yüklenmesini bekleyin.

 

Görüntülerinizi optimize etmek için WP Smush'u kullanabilirsiniz. Herhangi bir kalite kaybetmeden görüntüleri sıkıştıracak bir eklenti. Bu, 1000×1000 piksellik bir görüntüyü kalite farkı fark etmeden 200 KB'den 150 KB'ye küçültebileceğiniz ve böylece %25 daha hızlı yük yükleyebileceğiniz anlamına gelir.

 

WP Smush

 

Ekran Boyutu: Ekran boyutu, görüntünün görüntülendiği boyuttır. Örneğin, aşağıdaki resim 300×300 piksel de görüntülenmektedir.

 

300x300

 

Görüntülerin daha hızlı yüklenmesini sağlamak için, öncelikle görüntülenecek görüntüden daha büyük bir görüntü kullanmadığınızdan emin olun. Örneğin, 300×300 piksel de CSS ile stilde bir HTML bölümünüz varsa, ancak kaynakta 1000×1000 piksellik bir görüntü yüklediğinizde, bu 700×700 piksel için yükleme süresini kaybedersiniz.

 

Tarayıcı 1000 × 1000 piksel görüntü indirmek ve daha sonra 300 × 300 piksel küçültmek zorunda olmasıdır. Bu, hem karşıdan yükleme hem de küçültme işlemi için daha fazla zaman alır. Resimlerinizi görüntülenecekleri aynı genişlik ve yüksekliğe yükleyerek bunu düzeltebilirsiniz.

 

WordPress bunu, yüklediğinizde resmin birden çok örneğini oluşturarak otomatik olarak yapar. Bu nedenle bir resim dosyası yolunun sonunda 300 × 300 veya 150 × 150 soneki görürsünüz. Bu nedenle boyutları (Büyük, Orta, Küçük Resim) seçebilirsiniz. Mükemmel olmasa da, özellikle görüntüyü tıklatma ve sürükleme ile el ile yeniden boyutlandırıyorsanız ve uzun vadede sunucunuzda daha fazla yer kaplarsa da, yük hızına yardımcı olur.

 

Görüntüleri ertelemek, yükleme süresini iyileştirmek için yapabileceğiniz başka bir şeydir. Bu, kullanıcı web sayfasında aşağı kaydırılır gibi daha sonra bunları indirebilirsiniz anlamına gelir. Görüntülerin görünmeyeceği ancak sonunda birbiri ardına görüneceği kısa bir an olacaktır.

 

Bu, Tarayıcıların kullanıcıların bu noktada görüntülediği önemli bölüme odaklanmasına yardımcı olur.

 

 

Bunu yapmanıza yardımcı olabilecek çok sayıda eklenti vardır. Ancak, çoğu hata var ya da sadece belirli durumlarda görüntüleri ertelemek, örneğin WordPress veya WooCommerce tarafından oluşturulan, ancak oluşturulan veya daha az popüler eklentileri tarafından eklenen değil.

 

Joomla veya Magento gibi diğer CMS için kesinlikle eklentileri vardır. Sadece onlar için bir Google arama yapmak. Eğer WordPress gibi popüler bir CMS, değilseniz, görüntüleri erteleme jQuery ile yapılabilir, ama kesinlikle bunun için bir geliştirici gerekir, eğer bir kendiniz değilseniz.

 

Sonraki gen resim biçimleri Google tarafından önerilir. Özellikle bir mobil cihazdan bir web sitesi yüklerken, çok yararlıdır. Ancak, henüz pek çok kişi bunları kullanmak bir nedeni var.

Sonraki gen görüntü biçimleri henüz tüm büyük tarayıcılar tarafından desteklenmez. Bu, farklı tarayıcılar için farklı biçimleri dinamik olarak sunmanız gerektiği anlamına gelir.

CMS'nizde kolay olabilecek bir eklenti kullanıyorsanız, ancak özel bir platformdaysanız, her şeyi sıfırdan geliştirmeniz gerekir, bu da çok pahalıdır. Aşağıda, tarayıcıların WebP biçimini desteklediği bir liste vereyim.

 

WebP Next Gen Image Format

 

Resimlerinizi düzgün bir şekilde boyutlandırıp optimize ederseniz, bunları JPEG2000 veya WebP gibi sonraki gen görüntü biçimlerine dönüştürerek elde acağınız tasarruflar zaman ve para cinsinden maliyete değmeyebilir.

 

Ancak, zaman ve bütçe varsa, her ne şekilde olursa olsun, bunu gidin. Bu aracı, kullanıcılarınızın en çok zaman harcadığı tarayıcıların desteklenip desteklenmediğinizi kontrol etmek için kullanabilirsiniz. WebP veya JPEG2000'i arayın.

 

HTML & CSS Yapısı

 

Web sayfanızın HTML yapısı, sayfanızın nasıl yükleştünüzü belirler. Tarayıcılar bir sayfayı yukarıdan aşağıya doğru okur ve öğeleri aynı şekilde yüklerler. Bu, bir şeyi önce yüklemek istiyorsanız, sayfanıza daha yüksek bir şekilde koymanız gerektiği anlamına gelir.

 

Genel olarak, sorunlar HTML ile değil, CSS ile. CSS'nizi kaotik bir şekilde yazarsanız, daha yavaş yükleme süresi ve kötü bir kullanıcı deneyimi ne olur.

 

Bir örnek verelim. Çoğu web sitesi, hepsi değilse de, bu HTML yapısını takip edin: baş > gövde > altbilgi.

 

Benim CSS dosya stilleri önce altbilgi, o zaman altbilgi stil alırsınız, kat önce olmasına rağmen. Bu arada, üstbilgi ve vücut düz kalabilir.

 

Mobil cihazlar en yavaş olanlar olduğu için, önce mobil stilinizi eklemek de iyi bir fikirdir. Bu hiyerarşi fikrini almak ve kendi kod ile ilgili sorunları tanımlamak mümkün olmak için en az temel bir CSS eğitimi gerekebilir

 

Aynı javascript engelleme ile de geçerli. Hayati önem taşıyan komut dosyalarını erteleyin. En son yüklenecek şekilde altbilgiye ekleyin.

 

Ancak, Analytics gibi en kısa sürede çalışması gereken önemli komut dosyalarınız varsa, bu komut dosyalarınızı en kısa sürede üstbilgide tutun ve daha düşük bir PageSpeed puanıyla sonuçlansa bile, bunların düzgün bir şekilde ateşleyip çalıştırDığından emin olun.

 

Minification & Script Sıkıştırma

 

Minification, gereksiz bilgileri kaldırarak bir dosyayı küçültme işlemidir.

 

Örneğin, JavaScript ve CSS yazarken, çoğu, tüm kodlayıcılar, kodlarını temiz ve kolay okunabilir tutmak için boşlukları kullanmayı ister. Ancak, bu ekstra boşluklar, özellikle kod uzun bir parçası varsa ekleyin.

 

CSS Minification

cssminifier.com

 

Kod minifying başka bir yolu benzer öğeleri birleştirerek olacaktır.

 

Örneğin, başım ve altbilgi bölümlerim aynıysa, bunları şu şekilde yazmak yerine:

 

body {
font-size: 16px;
}
footer {
font-size: 16px;
}

 

Şöyle yazabilirim:

 

body, footer {
font-size: 16px;
}

 

Sıkıştırma, yinelenen bilgi dizilerini belirli bir diziye tek bir başvuruyla değiştirerek dosyaları küçültme işlemidir.

 

Yani, örneğin, aşağıdaki kodu varsa: 123 4 123 123 123 4 123 123 123, ben 1 ile 123 yerine ve bunun gibi bir sıkıştırılmış sürümü alabilirsiniz: 1 4 1 1 1 1 1 1 1. Tabii ki, sunduklarından çok daha karmaşık.

 

Bu genellikle sunucu tarafında olur ve en yaygın olanı Gzip sıkıştırma denir. Sunucu sıkıştırılmış bir sürüm gönderir. Tarayıcı sıkıştırılmış dosyayı aldıktan sonra, gerçek içeriğini okumak için işlemi tersine çevirerek dosyayı dekomprese eder.

 

Bu winrar gibi hemen hemen çalışır; muhtemelen hepimiz biliyoruz, çünkü biz sonsuza kadar ücretsiz olarak kullanıyorum!

 

Eğer popüler bir CMS iseniz, kesinlikle sıkıştırma ve minification hem debir eklenti bulacaksınız. Örneğin, W3 Toplam Önbellek eklentisi, düzgün bir şekilde ayarlarsanız, bunların her ikisi de dahil olmak üzere birçok şey yapar.

 

Sıkıştırmanın sunucu kurulumuna bağlı olduğunu unutmayın. Sunucunuz Gzip'i desteklemiyorsa, dosyaları sıkıştıramazsınız. Bir Apache sunucunuz varsa, mod_deflate yüklü olduğundan emin olun.

 

Barındırma cihazınızın bunu destekleyip desteklemediğinizi sunucu sağlayıcınıza sorabilirsiniz. %99.9'u evet diyecekler. Zaten yüklü değilse, onlar oldukça basit bir şey olduğu gibi, ücretsiz olarak yapmalıdır.

 

Popüler bir CMS'de değilseniz, mod_deflate yüklü olduğu sürece aşağıdaki kodu ekleyerek .htaccess dosyası (Apache sunucuları) üzerinden Gzip sıkıştırmasını da etkinleştirebilirsiniz.

 

 

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<span class="token operator">&lt;</span>IfModule mod_deflate<span class="token punctuation">.</span>c<span class="token operator">&gt;</span>
  <span class="token shell-comment comment"># Compress HTML, CSS, JavaScript, Text, XML and fonts</span>
  AddOutputFilterByType <span class="token constant">DEFLATE</span> application<span class="token operator">/</span>javascript
  AddOutputFilterByType <span class="token constant">DEFLATE</span> application<span class="token operator">/</span>rss<span class="token operator">+</span>xml
  AddOutputFilterByType <span class="token constant">DEFLATE</span> application<span class="token operator">/</span>vnd<span class="token punctuation">.</span>ms<span class="token operator">-</span>fontobject
  AddOutputFilterByType <span class="token constant">DEFLATE</span> application<span class="token operator">/</span>x<span class="token operator">-</span>font
  AddOutputFilterByType <span class="token constant">DEFLATE</span> application<span class="token operator">/</span>x<span class="token operator">-</span>font<span class="token operator">-</span>opentype
  AddOutputFilterByType <span class="token constant">DEFLATE</span> application<span class="token operator">/</span>x<span class="token operator">-</span>font<span class="token operator">-</span>otf
  AddOutputFilterByType <span class="token constant">DEFLATE</span> application<span class="token operator">/</span>x<span class="token operator">-</span>font<span class="token operator">-</span>truetype
  AddOutputFilterByType <span class="token constant">DEFLATE</span> application<span class="token operator">/</span>x<span class="token operator">-</span>font<span class="token operator">-</span>ttf
  AddOutputFilterByType <span class="token constant">DEFLATE</span> application<span class="token operator">/</span>x<span class="token operator">-</span>javascript
  AddOutputFilterByType <span class="token constant">DEFLATE</span> application<span class="token operator">/</span>xhtml<span class="token operator">+</span>xml
  AddOutputFilterByType <span class="token constant">DEFLATE</span> application<span class="token operator">/</span>xml
  AddOutputFilterByType <span class="token constant">DEFLATE</span> font<span class="token operator">/</span>opentype
  AddOutputFilterByType <span class="token constant">DEFLATE</span> font<span class="token operator">/</span>otf
  AddOutputFilterByType <span class="token constant">DEFLATE</span> font<span class="token operator">/</span>ttf
  AddOutputFilterByType <span class="token constant">DEFLATE</span> image<span class="token operator">/</span>svg<span class="token operator">+</span>xml
  AddOutputFilterByType <span class="token constant">DEFLATE</span> image<span class="token operator">/</span>x<span class="token operator">-</span>icon
  AddOutputFilterByType <span class="token constant">DEFLATE</span> text<span class="token operator">/</span>css
  AddOutputFilterByType <span class="token constant">DEFLATE</span> text<span class="token operator">/</span>html
  AddOutputFilterByType <span class="token constant">DEFLATE</span> text<span class="token operator">/</span>javascript
  AddOutputFilterByType <span class="token constant">DEFLATE</span> text<span class="token operator">/</span>p