Sayfa Hızı Yarışını Kazanmak: Bir Web Sitesindeki Clunker'ınızı Bir Yarış Arabasına Nasıl Çevirirsiniz?

Google’ın web’i daha hızlı hale getirme misyonunun kısa bir tarihi

2009’da Google, “web’i daha hızlı hale getirmek” için bir silah çağrısı yayınlayarak, web sitesi sahiplerini sitelerinin daha hızlı yüklenmesini sağlamaya ikna etme misyonuyla yola çıktı.

Web sitesi sahiplerini bunu gerçekten önemsemeye ikna etmek için, 2010’da Google, site hızının masaüstü (mobil olmayan) arama motoru sıralama algoritmalarında bir faktör olacağını duyurdu. Bu, hızlı yüklenen sitelerin diğer web sitelerine göre SEO avantajına sahip olacağı anlamına geliyordu.

Altı yıl sonra, 2015 yılında Google , mobil cihazlarda yapılan aramaların sayısının masaüstü bilgisayarlarda yapılan aramaları aştığını duyurdu. Bu oran artmaya devam ediyor. En son yayınlanan istatistik, 2019 itibariyle Google’da yapılan aramaların %61’inin mobil cihazlardan yapıldığını söylüyor.

Mobil’in aramadaki baskın rolü, Google’ın “Hızlandırılmış Mobil Sayfalar” (AMP) projesini geliştirmesine yol açtı. Bu girişim, web sitesi sahiplerini, duyarlı mobil temalarının yanı sıra, çok katı bir dizi geliştirme ve performans yönergesine uyan başka bir mobil tema oluşturmaya teşvik etmeyi amaçlıyor.

Her ne kadar birçok site sahibi ve SEO uzmanı, sayfa hızına ve AMP’ye zaten baş ağrısı veren diğer 200’den fazla sıralama faktörünün üzerine eğilmekten şikayet etse de, sayfa hızı gerçekten de site sahiplerinin odaklanması gereken değerli bir çabadır. 2017’de Google, sonuçların web’i daha hızlı hale getirmeye odaklanmalarını fazlasıyla haklı çıkardığı bir çalışma yürüttü. “ Sayfa yükleme süresi bir saniyeden 10 saniyeye çıktıkça, bir mobil site ziyaretçisinin hemen çıkma olasılığı %123 artar. ”

Temmuz 2018’de sayfa hızı, mobil aramalar için bir sıralama faktörü haline geldi ve bugün Google, sıralama algoritmalarına hızla ilgili daha da fazla faktörü ( Önemli Web Verileri olarak adlandırılır) dahil edecek.

Her zaman azalan ortalama insan dikkat süresi ve mobil cihazlarımıza olan güvenimiz istikrarlı bir şekilde artarken, sayfa hızının web sitesi sahiplerinin eğiliminde olduğu inanılmaz derecede önemli bir şey olduğuna ve olmaya devam edeceğine dair hiçbir soru yok.

Bir web sitesi hız için nasıl optimize edilir

Bir yarış arabası sürücüsü gibi düşünün

Sayfa hızı yarışını kazanmak, bir araba yarışını kazanmakla aynı şeyleri gerektirir. Bir arabada bir yarış kazanmak için aracınızın olabildiğince hafif, olabildiğince güçlü olduğundan emin olur ve yarış pistinde mümkün olduğunca verimli bir şekilde gezinirsiniz.

Sayfa hızı optimizasyon tekniklerini biraz daha anlaşılır kılmak için bu benzetmeyi kullanacağım.

Hafif yap

Bugünlerde web siteleri her zamankinden daha güzel ve işlevsel – ama bu aynı zamanda her zamankinden daha büyük oldukları anlamına geliyor. Çoğu modern web sitesi, bir parti otobüsü veya limuzine eşdeğerdir. Süper süslüler, her türlü olanakla dolular ve bu nedenle AĞIR ve YAVAŞ. “Yarış pisti” arama motorunda parti otobüsü veya limuzinle kazanmayacaksınız. Havalı görüneceksin, ama kaybedeceksin.

Görüntü kaynağı: Bir GTMetrix test sonuçları sayfası

Sayfa hızı yarışını kazanmak için hafif olan uygun bir yarış aracına ihtiyacınız var. Yarış arabalarında radyo, bardaklık, torpido gözü veya kesinlikle gerekli olmayan hiçbir şey yoktur. Benzer şekilde, web siteniz ayrıntılı animasyonlar, video arka planları, muazzam resimler, süslü widget’lar, aşırı eklentiler veya kesinlikle gerekli olmayan hiçbir şeyle yüklenmemelidir.

Sitenizi gereksiz fantezilerden ve aşırı eklentilerden arındırmanın yanı sıra, web sitesi ağırlığını şu yollarla da azaltabilirsiniz:

• Üçüncü taraf komut dosyalarının sayısını azaltmak (diğer web sitelerinden veri gönderen veya alan kod parçacıkları)

• Daha hafif (daha az kod ağırlıklı) bir temaya geçmek ve kullanılan yazı tipi sayısını azaltmak

• AMP’yi uygulama

• Görüntüleri optimize etme

• Kodu sıkıştırma ve küçültme

• Düzenli veritabanı optimizasyonları yapmak

WordPress gibi açık kaynaklı bir içerik yönetim sisteminde, bu görevlerin çoğunu çok daha kolay hale getirebilecek hızlı eklentiler mevcuttur. WP Rocket ve Imagify, görüntü optimizasyonu, sıkıştırma, küçültme ve çeşitli diğer sayfa hızı en iyi uygulamaları yoluyla web sitenizin ağırlığını önemli ölçüde hafifletmek için birlikte kullanılabilen iki WordPress eklentisidir.

Daha fazla güç ver

Bir yarış arabasına bir golf arabası motoru koymazsınız, o halde neden web sitenizi çok ucuz, paylaşılan bir barındırma planına koyarsınız? Uzun süredir bu planlardan birini yapıyorsanız, barındırma için ayda birkaç dolardan fazla ödemeyi acı verici bulabilirsiniz, ancak yine, golf arabasına karşı yarış arabası motoru: bu yarışı kazanmak istiyor musunuz, istemiyor musunuz? ?

Geleneksel paylaşımlı barındırma planları, on binlerce web sitesini tek bir sunucuya tıkıyor. Bu, her bir siteyi bilgi işlem gücü için aç bırakır.

Büyük liglerde yarışmak istiyorsanız, yetişkinlere yönelik bir hosting planı almanın tam zamanı. WordPress siteleri için, WP Engine ve Flywheel gibi yönetilen barındırma şirketleri, WordPress sitelerine daha hızlı hizmet vermek için güçlü ve özel olarak ayarlanmış sunucular kullanır.

Yönetilen WordPress barındırma sizin işiniz değilse veya bir WordPress siteniz yoksa, bir VPS’ye (Sanal Özel Sunucu) yükseltme yapmak, web sitenizin çok daha fazla bilgi işlem kaynağına sahip olmasına neden olur. Ayrıca kendi barındırma ortamınız üzerinde daha fazla kontrole sahip olacaksınız ve PHP’nin en son sürümleri, MySQL, Varnish önbelleğe alma ve diğer modern web sunucusu teknolojileri gibi şeylerle “motorunuzu ayarlamanıza” izin vereceksiniz. Halihazırda vergilendirilmiş sunucunuza giderek daha fazla web sitesi doldurdukları için, paylaşılan barındırma şirketinizin açgözlülüğünün insafına kalmayacaksınız.

Kısacası, web sitenizi iyi ayarlanmış bir barındırma ortamına koymak, yarış arabanıza bir süper şarj cihazı koymak gibi olabilir.

Daha iyi sür

Son olarak, ama kesinlikle en az değil, hafif ve güçlü bir yarış arabası, parkuru verimli bir şekilde nasıl kullanacağını bilen eğitimli bir sürücü olmadan ancak bu kadar hızlı gidebilir.

Bu analojinin “kursta gezinme” kısmı, bir web tarayıcısının bir web sayfasını yükleme sürecini ifade eder. Bir web sitesinin her bir öğesi, kodda gezinirken ve sayfanın çıktısını işlerken tarayıcının gezinmesi için başka bir bükülme veya dönüştür.

Bunu daha açık bir şekilde açıklamaya çalışmak için bir an için analojileri değiştireceğim. Bir evi yeniden şekillendirirken, zeminleri yeniden yapmadan önce odaları boyarsınız. Önce katları yeniden yapıp sonra odaları boyarsanız, yeni katlar üzerlerinde boya olur ve daha sonra geri dönüp döşemelere tekrar bakmanız gerekir.

Bir tarayıcı bir web sayfasını yüklediğinde, (tesadüfen) “resim” adı verilen bir süreçten geçer. Tarayıcı, web sayfasının kaynak kodundan veri bitleri aldığı için her sayfa “boyalı” olur. Bu boyama işlemi ya verimli bir şekilde yürütülebilir (yani, zeminleri yeniden cilalamadan önce duvarları boyamak) ya da yeniden yapmak, düzeltmek veya bir şeyler eklemek için sürecin başlangıcına birkaç gezi gerektiren daha kaotik, sıra dışı bir şekilde yapılabilir. bu, süreçte daha önce yapılabilirdi/yapılmalıydı.

Resim kaynağı: WebPageTest.org Test Sonucu (Film Şeridi Görünümü)

Burada işler teknikleşebilir, ancak sitenizin “yol”u daha verimli bir şekilde sürmesine yardımcı olmak için elinizden gelen her şeyi yapmanız önemlidir.

Önbelleğe alma, bir web sayfasının tarayıcıya yüklenmesini kolaylaştırmak için her web sitesinde olması gereken bir kavramdır. Bir tarayıcının bir sayfanın tüm kaynak kodunu işlemesi ve kullanıcıya görsel olarak boyaması zaten yeterince uzun sürüyor, bu nedenle bu kaynak kodunu sunucuya gitmeye hazır hale getirebilirsiniz. Varsayılan olarak, önbelleğe alma olmadan durum böyle değil.

Önbelleğe alma olmadan, web sitesinin CMS’si ve sunucusu, tarayıcı sayfayı boyamayı beklerken web sayfasının kaynak kodunu oluşturmaya devam edebilir. Bu, tarayıcının duraklamasına ve sunucudan daha fazla kod gelmesini beklemesine neden olabilir. Önbelleğe alma ile, bir sayfanın kaynak kodu sunucuda önceden derlenir, böylece tek seferde tam olarak tarayıcıya gönderilmeye hazır hale gelir. Bunu, biri her istediğinde talep üzerine bir kopya yapmak yerine, önceden üretilmiş ve dağıtılmaya hazır bir belgenin bol miktarda kopyasına sahip bir fotokopi makinesi gibi düşünün.

Eklentiler, barındırma şirketiniz ve/veya bir CDN (İçerik Dağıtım Ağı) aracılığıyla çeşitli önbellek türleri ve düzeyleri elde edilebilir. CDN’ler yalnızca önbelleğe alma sağlamakla kalmaz, aynı zamanda önceden oluşturulmuş web sitesi kodunun kopyalarını dünya çapındaki çeşitli sunucularda barındırarak sunucu ile kullanıcı arasındaki fiziksel mesafenin yükleme süresi üzerindeki etkisini azaltır. (Ve evet, internet aslında fiziksel mesafeler üzerinden birbirleriyle konuşmak zorunda olan fiziksel sunuculardan oluşur. Web aslında bu anlamda bir “bulut” değildir.)

Yarış arabası benzetmemize geri dönersek, önbelleğe alma ve CDN kullanmak, yarış pistinde çok daha hızlı bir yolculuğa eşittir.

Bunlar, etkili sayfa boyamanın temel yapı taşlarından ikisidir, ancak kullanılabilecek daha fazla teknik de vardır. WordPress’te, bir eklenti veya eklentiler aracılığıyla aşağıdakiler uygulanabilir (yine, WP Rocket ve Imagify, bunların çoğunu başarmak için özellikle iyi bir kombinasyondur):

• Komut dosyalarının zaman uyumsuz ve/veya ertelenmiş yüklenmesi. Bu, temelde aynı anda birden fazla şeyi yüklemenin veya hemen gerekli olmayan şeyleri yüklemek için daha sonraya kadar beklemenin süslü bir yoludur.

• Ön yükleme ve ön yükleme. Temel olarak, kullanıcının bağlantılara tıklamasını beklemek yerine, bağlantılarla ilgili verileri önceden almak.

• Yavaş yüklenme. Bu kavramın sayfa hızı amaçları için var olduğu ironik bir terimdir, ancak varsayılan olarak, çoğu tarayıcı bir sayfaya TÜM görüntüleri yükler, hatta bir kullanıcı aşağı kaydırana kadar gözden kaybolanlar bile. Tembel yükleme uygulamak, tarayıcıya tembel olmasını ve kullanıcı gerçekten oraya kaydırana kadar bu gözden uzak görüntüleri yüklemeyi beklemesini söylemek anlamına gelir.

• Görüntüleri yeni nesil formatlarda sunuyor. WebP gibi yeni görüntü formatları, tarayıcılar tarafından eski moda JPEG ve PNG formatlarından çok daha hızlı yüklenebilir. Ancak, tüm tarayıcıların henüz bu yeni biçimleri destekleyemediğini unutmamak önemlidir – bu nedenle, yeni nesil sürümleri onları destekleyen tarayıcılara sunabilen, ancak eski sürümleri desteklemeyen tarayıcılara sağlayan bir eklenti kullandığınızdan emin olun. . WP Rocket, Imagify ile eşleştirildiğinde bunu başarabilir.

Resim kaynağı: WP Rocket eklenti ayarları

Önemli Web Verileri için Optimize Edin

Son olarak, yeni Core Web Vital metriklerini (En Büyük İçerikli Boyama, İlk Giriş Gecikmesi ve Kümülatif Düzen Kaydırma) optimize etmek, yarış pistinde çok daha verimli bir yolculuk da sağlayabilir.

Görüntü kaynağı

Bunlar oldukça teknik kavramlardır, ancak ne anlama geldiklerini anlamanız için kısa bir genel bakış:

• En Büyük İçerikli Boyama (LCP) , sayfadaki en büyük öğenin resmini ifade eder. Google’ın PageSpeed Insights aracı, hangi öğenin bir sayfanın LCP öğesi olarak kabul edildiğini size söyleyecektir. Çoğu zaman bu bir kahraman resmi veya geniş bir kaydırıcı alanıdır, ancak sayfadan sayfaya değişir, bu nedenle sayfanızdaki LCP’yi belirlemek için aracı çalıştırın ve ardından o belirli öğenin daha hızlı yüklenmesini sağlamak için neler yapabileceğinizi düşünün.
  

• İlk Giriş Gecikmesi (FID) , kullanıcının ilk eylemi ile tarayıcının buna yanıt verme yeteneği arasındaki gecikmedir. Bir FID sorununa örnek olarak, bir kullanıcı tarafından tıklanabilir hale gelmeden önce görünen bir düğme verilebilir. Gecikme, tıklama işlevinin özellikle düğmenin kendisinden daha sonra yüklenmesinden kaynaklanabilir.

• Kümülatif Düzen Kayması (CLS) , basit bir konsepte atıfta bulunan üç büyük kelimeden oluşan bir gruptur. Telefonunuza bir web sayfası yüklerken ve bir şeye tıklamaya veya bir şey okumaya gittiğinizde, ancak üstüne veya altına başka bir şey yüklendiği için yukarı veya aşağı zıplıyor mu? Bu hareket CLS’dir, büyük ölçüde can sıkıcıdır ve verimsiz sayfa boyamanın bir yan ürünüdür.

Sonuç olarak, yarış arabası > golf arabası

Sayfa hızı optimizasyonu kesinlikle karmaşık ve kafa karıştırıcıdır, ancak daha iyi sıralamalar elde etmek için önemli bir bileşendir. Bir web sitesi sahibi olarak, isteseniz de istemeseniz de bu yarışın içindesiniz – bu nedenle web sitenizi golf arabası yerine yarış arabası yapmak için elinizden geleni yapabilirsiniz!