Site Hızınızı Optimize Etmek İçin 8 İpucu

Siteniz ne kadar hızlı?

Yavaş bir sitenin kullanıcı davranışını olumsuz etkilediğini hepimiz biliyoruz. Ancak site hızınızı en aza indirmek için gerçekten elinizden gelen her şeyi yapıyor musunuz?

Bugün, en sevdiği şeyler web geliştirme, petroloji, WordPress, bilim kurgu ve cin olan bir adamla site hızı optimizasyonu için sekiz ipucu tartışıyoruz. Ve kim diz boyu PHP'de, sahnede veya iyi bir kitap okurken en mutlu olur. Dijital stratejist, dijital pazarlama teknolojisi uzmanı ve tam yığın geliştiricidir ve Yoast'ta SEO başkanıdır.

In Search SEO podcast'i Jono Alderson'a sıcak bir karşılama.

Sekiz adım şunlardır:

1. Temel Web Verileri
2. bulut parlaması
3. Chrome Geliştirici Araçları
4. Gelişmiş Görüntü Optimizasyon Teknikleri
5. Gelişmiş Yazı Tipi Optimizasyon Teknikleri
6. CSS ve JavaScript Püf Noktaları
7. Önbelleğe Alma ve Sürüm Oluşturma
8. Zeki Üçüncü Taraf Kiti

Hızlı Web Sitelerinin Sekiz Temel Öğesi

J: Hey, burada olmak güzel. Bana sahip olduğun için teşekkürler. Bu süper heyecan verici.

D: Süper, Jono. İyi ki varsın. Jono'yu jonoalderson.com'da bulabilirsiniz. Peki Jono, yavaş bir sitenin kullanıcı davranışını gerçekten nasıl etkilediğine dair mevcut duruş hakkında ne söylersin?

J: Çok fazla araştırma var. Ve bence hiçbiri haber değil. Artık onlarca yıl geriye giden araştırmalar var. Ve bunların tümü, insanları kaç milisaniye beklettiğiniz ile bunun bir şey satın alma olasılıklarını ne kadar etkilediği arasında şaşırtıcı derecede doğrudan bir ilişki olduğunu söylüyor. Muhtemelen insanların bilinçli olarak "Ah, bu 200 milisaniye çok uzun sürdü ve ben rakibinizle alışveriş yapacağım" demiyor. Ancak bu, pencereden dışarı bakabilecekleri veya başka bir sekme açabilecekleri veya öğle yemeğinde ne olduğunu merak edebilecekleri bir dönemdir ve tüm bunlar, anda kalma ve harekete geçme veya harekete geçme olasılıklarını aşındırır.

Geçenlerde büyük bir danışmanlık firması olan Deloitte'tan gerçekten ilginç bir araştırma gördüm. İngiltere ve ABD'deki e-ticaret ve olası satış yaratma ve farklı sektörlerdeki en büyük 50 farklı sitenin alt kümesi gibi bir şeye baktılar. Ve 200 milisaniye gibi bir gecikme buldular, yani göz açıp kapayıncaya kadar geçen süre, site hızını %10 gibi bir artışla artan gelir kadar azalttı. Ve bu sadece böyle bir çalışma. Bunun gibi çok var. Ve hepsi daha hızlı, daha şık, daha erişilebilir ve daha kullanışlı olmanın sadece daha fazla para anlamına geldiğini söylüyor. Yani evet, buna bakmamız hiç de akıllıca değil.

D: Amazon'un bir araştırmasını gördüğümü hatırlıyorum, sanırım 10 yıldan fazla bir süre önceydi ama ben bu konuda güncel istatistikler görmemiştim. Ama kesinlikle hepsi de karşılaştırmalı. Çünkü insanlar diğer web sitelerine göz atmaya alışkınsa ve sitenizi diğer web sitelerinden çok daha yavaş görürlerse, o zaman çok uzun süre orada kalmazlar.

J: Evet ve insanlar bunu gerçekten düşünmüyor. Sitelerinin muhtemelen yeterince hızlı olduğunu düşünüyorlar. Ancak rakiplerinizin siteleri hızlanıyor, Facebook hızlanıyor, Instagram hızlanıyor ve bu kullanıcı deneyiminin temelinin nerede değiştiğine dair beklentiler. Yani beklentiden daha hızlı olmalısınız, aksi takdirde nispeten yavaşlıyorsunuz.

D: Yani bugün, bir numaralı Temel Web Verileri ile başlayan hızlı web sitelerinin temel öğelerini paylaşıyorsunuz.

1. Temel Web Verileri

J: Bunun dışında biraz daha olabileceğini düşünüyorum. Ama bu kesinlikle benim gidilecek listem. Eminim artık herkes Core Web Vitals'i duymuştur. Ama eğer yapmadıysanız, Google bunu başlattı, sanırım 2020'nin ortalarında. Ve bu, PageSpeed'in ne olduğunu ölçmek için bir tür standartlaştırılmış, evrensel ölçütler yaratma girişimleridir. Çünkü teknik ve kavramsal olarak oldukça karmaşık. Sayfalar yükleniyor, her türlü farklı aşama ve onu etkileyen her türlü farklı şey var. Böylece, zaman içinde izleyebileceğiniz, eğilim gösterebileceğiniz ve analiz edebileceğiniz bir dizi ölçüme indirgediler.

Bununla ilgili gerçekten güzel olan şey, bunun sadece bir adım olmasıdır. Şu anda üç ölçüm var ve bu yıl iki tane daha alıyoruz. Metriklerin kendileri gelişiyor. Bu, bu tür ölçümlere karşı kesin rakamlar koymak için olgun bir ekosistem haline geliyor; bu, çevrimiçi bir işletme olarak çok iyi puan almadığımızı ve rakiplerimizin daha iyi puan aldığını söylemenin çok daha kolay hale geldiği anlamına geliyor. Tüm araştırmaların bunu gelire bağladığını biliyoruz, bu yüzden bunu iyileştirmeye odaklanmalıyız. Birdenbire, paydaşları yalnızca sayfa hızının önemli olduğuna değil, aynı zamanda herkesin hemfikir olacağı bir ölçüme sahip olduğumuza ikna edebileceğimiz bir yolumuz var. o köşedeki geliştirici ile aynı fikirde değil ve gerçekten ortak bir dile sahip değil. Yani bu bir iş aracı olarak gerçekten güçlü, sadece teknik bir önlemi boşverin.

D: Beyninizin, web sitenizi geliştirmek için gerçekten yapabileceğiniz en önemli sekiz en hızlı şey olduğunu söylemeye söz veremeyeceğinizi söylediğini biliyorum. Beyninizin o anda gerçekten 1024 şey düşünebildiğini biliyorum, ancak biz de biraz önce biraz önce tartıştığımız fikirle aklınıza gelen ilk sekiz fikri paylaşıyoruz. Yani iki numara Cloudflare'dı.

2. Bulut Parlaması

J: Web sitemi hızlandırmak için yalnızca bir şey yapmak için yeterli zamanım ve kaynağım olsaydı, Cloudflare'a giriyor olurdu. Cloudflare çok büyük. Uzaydaki en büyük teknik teknoloji şirketlerinden biri. Yine de, biraz inek olduğu için anlaşılır bir şekilde onları hiç duymamış tonlarca geliştirme ekibi ve işletme var. Cloudflare bir içerik dağıtım ağıdır. Web sitenizin önünde oturan bir altyapı parçasıdır. Ücretsiz bir sürümü var. Kurulumu yaklaşık 10 dakika sürer. Ve sitenizi hızlandırmak için sadece sihir kullanırlar. Resimlerinizi otomatik olarak küçültürler, JavaScript'inizi küçültürler, işlerin yüklenme şeklini değiştirirler, bağlantıların farklı yerlerde farklı kullanımlar ve 1000 başka şey için dünya çapında daha verimli bir şekilde yönlendirilmesini sağlarlar. Ve bunların hepsi teoride yapabileceğiniz şeyler, eğer çok akıllı ve çok iyi kaynaklara sahip bir geliştirme ekibiniz varsa bazılarını yapabilirsiniz. Ama neden Cloudflare ücretsiz ürünü çoğunu yapıyor ve ayda 20 dolar geri kalanını hemen hemen yapıyorsa?

Bu nedenle, belki çok iyi puan almayan bir siteniz varsa, bu biraz yavaş olabilir, yalnızca birkaç düğmeyi tıklayarak yüklenmesi altı saniye süren bir siteyi iki saniyeye indirebilirsiniz. Temel seviye olağanüstü, ancak ileri düzey kullanıcılar ve gelişmiş vakalarla daha da ileri gidebilirsiniz. Cloudflare'ı sitemin çalışma şekline daha derinlemesine entegre etmek istediğimi söyleyebilirsiniz. Ve bu iş mantığının bir kısmını boşaltmak istiyorum. Ve bu etiketleme ve izlemeyi, kullanıcının bulunduğu yere yakın bulutta, uçta Google Analytics'te çalıştırmak istiyorum. Sitenin kendisini daha hızlı hale getirmenin zor olduğu veya eski donanım üzerinde çalıştığı veya barındırmanın biraz naf olduğu durumlar için olağanüstü bir araçtır, aslında Cloudflare'in tüm bunların önüne geçmesini sağlayabilirsiniz ve asla sahip olamazsınız. tekrar endişelenmek için. Bu, yığının kaç farklı parçasından sorumlu oldukları ve iş mantığını ne kadar boşaltmak istediğiniz konusunda bazı ilginç soruları gündeme getiriyor. Ancak hızlı bir hack olarak, olağanüstü bir araçtır.

D: Üçüncüsü, performans darboğazlarını tespit etmek için Chrome Geliştirici Araçlarını kullanın.

3. Chrome Geliştirici Araçları

J: Evet, bu nedenle PageSpeed ​​Insights ve Web Page Test gibi Önemli Web Verileri araçlarını çalıştırmak size en üst düzeyde puanlar ve bazı genel tavsiyeler verecektir. Daha az JavaScript kullanmak gibi genel tavsiyelerle ilgili sorun, bunu web sitenize ve karşılaştığınız zorluklara uygulamanın gerçekten çok kolay olmayacağıdır. Web siteniz benzersizdir, çok özel bir şekilde yerleşiktir. Fırsatların nerede olduğunu gerçekten tespit etmenin bir sonraki aşamasına geçmek istiyorsanız, web sitenizin nasıl yüklendiğine bakmanız gerekir. Bunun için kullanabileceğiniz en iyi araçlardan biri de Chrome Geliştirici Araçları.

Windows bilgisayardayım. Bu yüzden bir tarayıcıda F12'ye bastım, bir Mac eşdeğeri olduğundan eminim ve İncelemeye genel bakışı alıyorum. Ağ sekmesine tıklayabilir ve sayfanıza yüklenen tüm öğeleri yükledikleri sırayla ve ne kadar sürdüğünü gösteren bir şelale diyagramı elde edebilirsiniz. Ve birkaç kez yenile düğmesine basarsanız, bunun olmasını izleyebilir ve kalıpları görmeye başlayabilirsiniz. Ve bu belirli şeyin diğer her şeyden iki kat daha uzun sürdüğünü görmek için çok derin bir geliştirici olmanıza gerek yok. Ve bir sürü şey tutuyor. Ve bu büyük bir JPEG, belki de bu JPEG'i küçültmeliyiz. Bu nedenle, sitenizi, özellikle sayfa sayfa veya şablon şablon tanılamanın bir yolu olarak, en büyük suçluların nerede olduğunu görmenin güçlü bir yoludur.

Ve evet, bunun dışında bir nüans var, ancak en büyük darboğazın nasıl düzeltileceğini bilmek, geride tutulan her şeyin daha hızlı yüklendiği anlamına gelir. Ve kolay fırsatları yakalamanın bir yolu olarak, bu, ona yaklaşmanın harika bir yoludur. Diğer şeyleri tutan şeyi bulun ve bunu biraz daha hızlandırın. Ve bunun ekran görüntüsünü alabilir ve geliştiricilerinize iletebilirsiniz, vb. Ve bu her neyse ona saldırabilmeleri gerekir.

D: Ve dördüncüsü, gelişmiş görüntü optimizasyon tekniklerini kullanın.

4. Gelişmiş Görüntü Sıkıştırma Teknikleri

J: Evet, örnek olarak büyük JPEG'lerden bahsettim. Ve bu hala utanç verici derecede yaygın. Birçok sitenin yavaş olmasının en büyük nedenlerinden biri, birisinin ana sayfasına 10 megabaytlık bir GIF yüklemesi veya cep telefonu veya kamerasıyla bir resim çekmesi ve bunu CMS'ye yerleştirmesidir. Ve belki de bunu biraz küçültmeliyiz diyen bir mantık yok. Belki de boyutuna sığdırmalıyız. Çoğu zaman Chrome Geliştirici Araçları'na ve Cloudflare'a baktığınızda, darboğazın bu resmin büyük olması nedeniyle yüklenmesinin uzun sürmesi olduğunu göreceksiniz. Bunu çözmek için kullanabileceğiniz her türlü araç var. En önemlisi, bu görüntüleri üretmek için kullandığınız süreç ne olursa olsun, muhtemelen bir iş akışına sahip olmasıdır. Photoshop'ta bir şeyler yapıyorsanız, dışa aktarırken web için dışa aktardığınızdan emin olun. Bu JPEG'in gerçekten mükemmel piksel kalitesine sahip olması gerekip gerekmediğini düşünün, yoksa kaliteyi biraz düşürebilir ve belki dosya boyutundan tasarruf edebilir miyiz? Bunların hepsi biraz teknikse, squoosh.app adresine gidin. Squoosh, bazı Google geliştirme ekibi tarafından oluşturulmuş bir araçtır. Süper inekler, gerçekten görüntü alanına giriyorlar. Resminizi sürükleyip bırakıyorsunuz. Ve size PNG'yi JPEG olarak değiştirebileceğiniz yeri tıklatabileceğiniz seçenekler sunuyor. Sürükleyip bırakıyorsunuz ve yaptığınız gibi görüntüde kalitenin değiştiğini görebilirsiniz. Bu takastan memnun muyum? Ve tıklayabileceğim ve ne olduğunu görebileceğim ve orada burada birkaç kilobayt daha azaltabileceğim bir sürü gelişmiş onay kutusu var. Ve sadece birkaç saniye sürükleyip bırakarak ve ayarlarla oynayarak 2 megabayttan 200 kilobayta kadar olan bir görüntüyü çok kolay bir şekilde elde edebilirsiniz. İş akışlarınız için pek uygun değil, ancak bu büyük darboğaz görüntülerin bazılarını küçültmek için hızlı bir düzeltme olarak, gerçekten harika.

D: Evet, görüntü optimizasyonunun üstüne çıkmam gerekiyor çünkü itiraf etmekten nefret ediyorum ama aslında hala yazılım üretmek için Macromedia Fireworks kullanıyorum.

J: Oh, Fireworks'ü özlüyorum. Oyuncağım olduğu yerde iyi bir on yıl vardı.

D: Biliyorum. Ve bir görüntü oluşturuyorum ve sonra onu yaklaşık %80 kalitede bir JPEG olarak dışa aktarıyorum ve "Web için sorun değil" diyorum. Belki bu 10 yıl önce uzak bir şeydi.

J: Bu muhtemelen bir çok insanın iş akışını sadece %80'e çıkardıkları bir iş akışıdır ve sorun olmayacaktır. Ve bu, çoğunlukla iyi olacak, ancak ara sıra bazı şeyler kayıp gidecek. Ve eğer bu darboğaz ve engellemeyi kaldırmayı yapmak istiyorsanız, her bir görüntüye bakıp "Boyuttaki bu değiş tokuşlardan memnun muyum?" demeye gerçekten zaman harcamaya değer.

D: Kesinlikle. Ve oradaki en iyilerle rekabet etmesi gereken aşırı hızlı modern bir site için, az önce tarif ettiğim şey kesinlikle bunu yapamayacak. Bu da bizi gelişmiş yazı tipi optimizasyonu tekniklerini kullanmak olan beş numaraya getiriyor.

5. Gelişmiş Yazı Tipi Optimizasyon Teknikleri

J: Büyük JPEG'lerin genellikle engelleyici bir sorun olduğundan bahsetmiştim. Ve en büyük suçlulardan biri, yazı tipleri, özellikle Google yazı tipleri veya aslında, bir üçüncü taraf alan adından yüklediğiniz yazı tipleridir. Bunlar genellikle sayfadaki en yavaş, sayfadaki en büyük şeydir ve bunu bir kullanıcı olarak her zaman göreceksiniz. Bir sayfayı yüklerken, çözülmesi birkaç saniye sürer ve ardından yazı tipi yanıp söner. Bu gerçekten kötü bir kullanıcı deneyimidir. Önemli Web Verileri için birçok yönden gerçekten kötü, ancak düzeltmeler var. Dolayısıyla, Google yazı tipleri ve benzeri yazı tipleriyle ilgili sorunlardan biri, biraz zaman alan alanlar arası bağlantı kurmanızdır. Bağlandığınız şey, biraz zaman alan bir sürü arka uç sistemi sorgular. Yazı tipini geri tükürür, sonra o yazı tipini indirmeniz ve sonra onu oluşturmanız gerekir. Bu süreçte yaklaşık beş adım var ve saniyeler sürüyor ve bunu daha hızlı hale getirmenin bir yolu yok.

Bu yüzden en kolay kazançlardan biri bu yazı tiplerini yerelleştirmektir. Bunları Google Fonts'tan yüklemeyin, Google Fonts'un size CSS'yi kopyalayıp yapıştırma konusunda verdiği talimatları dikkate almayın. Biraz Googling yapın ve bu yazı tiplerini kendi kendine barındırma konusunda bazı kılavuzlar bulun. Ve bu, kurulumunuza ve CMS'nize göre değişecektir. Tipik olarak, bunu oldukça basit hale getirmek için eklentiler ve işlemler vardır. Bu, hepsini tıraş eder. Ve sonra yapmak istediğiniz diğer şey, yüklediğim bu yazı tipinin gerçekte ne olduğuna ve onu nasıl yüklediğime bakmaktır.

Modern yazı tipi yükleme CSS'sinde belirli karakter kümeleri tanımlayabilirsiniz. Bu nedenle, örneğin, web sitenizin çoğunlukla İngilizce olduğunu biliyorsanız, muhtemelen varsayılan olarak gerçekleşen bir sürü genişletilmiş Latin glif için yazı tipi karakterlerini yüklemeniz gerekmez. Yani yüklediğiniz yazı tipi, yalnızca AZ kullanıyorsunuz, birden dokuza kadar, ama aslında, sayfalarınızda hiç görünmeyen 200 tuhaf karakter yüklüyorsunuz. Yani, bunu bölebilirseniz, bu çok daha hızlı. Ayrıca, "Bu yazı tipinin hızlı bir şekilde yüklenmesini, ancak potansiyel olarak önbelleğe alınmamasını istiyor muyum? Veya takaslar nerede olursa olsun, yüklenmesi için ne kadar beklemek istiyorum? Ve başka bir şeye geri mi dönüyorum?" diyebilirsiniz. Yoksa olması gereken yerde boş bir alan mı göstereyim?” Kurcalayabileceğiniz farklı ayarlar ve optimize etmek için Google'da kullanabileceğiniz araçlar vardır. Aynı şekilde, her bir bitine bakmak istediğiniz resimler gibi, bu yazı tiplerini nasıl yüklediğinizi gerçekten sorgular. csstricks.com'un bazı harika kılavuzları var. Gidebileceğiniz bir sürü yol için bunu kesin olarak seçin.Ancak yine, CMS'nize ve yığınınıza bakın, bunu kolaylaştırmak için eklentiler ve satın almalar olacak.

D: Ve altı numara, CSS ve JavaScript hilelerini kullanın.

6. CSS ve JavaScript Püf Noktaları

J: Bir sonraki en yaygın suçlu, stillerin ve komut dosyalarının nasıl yüklendiğidir. Ve çok sayıda karmaşık görsel öğeye sahip bir web siteniz varsa ve belki de hareket, etkileşim ve widget'lar ve tıklayabileceğiniz ve bir şeyler yapabileceğiniz şeyler varsa, CSS ve JavaScript'in bir süre alması neredeyse kesindir. Sayfayı farklı şekillerde yüklemek ve sayfayla etkileşim kurmak için. Bunu, başka şeyleri tutan şeylerin şelalesine baktığınızda, Chrome Geliştirici Araçları raporunuzda göreceksiniz. JavaScript bunun için gerçekten kötü bir suçludur. Örneğin sayfamın üst kısmında bir atlıkarıncayı çalıştıran bir komut dosyam varsa, bu atlıkarınca kaydırmaya başlamadan önce o komut dosyasının yüklenmesini beklemek zorunda kalmak istemiyorum. Yani bununla yapabileceğiniz birkaç şey var. Birincisi, onları daha küçük yapabilirsiniz. Cloudflare bu konuda gerçekten çok iyi. Daha küçükse, daha az bayt, daha hızlı sayfa yükleme süresi. Ama gerçekten güçlü olan bir diğer şey ise bu JavaScript dosyası için hemen yüklememe gerek yok, sayfa bitene kadar bekleyebilirim demek.

Ve bunu yapmanın farklı yolları var. Asenkron olarak yükleyebilir, erteleyebilirsiniz. Erteleme, günümüzde tipik olarak en iyi uygulamadır. İnsanlar, zaman uyumsuzluğunu birleştirerek ve onu ertelemekle her türlü garip şeyi yaparlar. Ancak JavaScript dosyalarında hemen ihtiyacınız olmayan erteleme özelliğini kullanmak sayfanızı çok daha hızlı hale getirebilir. Bu nedenle, altbilgideki bir şeyi kontrol eden bir JavaScript'im varsa, sayfanın geri kalanını yüklemek için gerçekten beklemem gerekmez, özellikle de JavaScript ve CSS'nin etkileşim biçiminin oldukça bulanıklaştığını düşündüğünüzde. Sayfamda çok sayıda komut dosyası, çok sayıda stil varsa, bunların bazıları JavaScript yüklenene kadar bekleyecek. Yani her yerde başka şeyleri tutan şeyler var. Bu yüzden gerçekten taktiksel olmak ve buna hemen ihtiyacım olmadığını söylemek, büyük performans artışlarının kilidini açabilir. Yine, bu suçluların Chrome Geliştirici Araçları'nda nerede olduğunu görmek gerçekten çok kolay. Ve bir geliştirme kaynağınız varsa, bunu yapmak çok kolaydır. Kelimenin tam anlamıyla etikete bir nitelik eklersiniz ve bunu otomatik olarak yapar.

D: Yedi numara, önbelleğe alma ve sürüm oluşturmadan en iyi şekilde yararlanmaktır.

7. Önbelleğe Alma ve Sürüm Oluşturma

J: Yani Cloudflare'ın gerçekten iyi yaptığı şeylerden biri, bir kaynakla ilk karşılaştığında, bu bir görüntü, bir JavaScript parçası veya bir stil olsun, onu Cloudflare'a kaydeder ve gelecekte bunu isteyen herhangi biri önbelleğe alınmış sürümü alır. Ve bu onlara süper yerel bir yerden hizmet etti. Bu süper verimli, gerçekten güzel. Birçok web sitesi bunu oldukça zorlaştıracak şekilde çalışır. Örneğin, stil sayfalarınızı ve komut dosyalarınızı sürümlendirdiğinizden emin olmak istiyorsunuz. Bu nedenle, JavaScript parçanızın en son sürümünü yayınladığınızda, bunun altıncı sürüm olduğunu söylemek istersiniz. Ve sonra bu, Cloudflare ve ziyaret eden herkes için güzel bir şekilde önbelleğe alınabilir. Güncelleme yaptığınızda, o dosya türünü değiştirmek, dosya adını değiştirmek istiyorsunuz, yani bu sürüm yedi. Ve sonra tüm önbelleklerinizin süresi doldu, insanlar farklı bir kaynak talep ediyor ve çok hızlı bir şekilde geri gelmeye başlıyorlar.

Bunun gerçekten güçlü olmaya başladığı yer, gerçek web sayfalarını önbelleğe almaya başladığınız zamandır. Bu nedenle Cloudflare, varsayılan olarak yalnızca JavaScript bitlerini ve CSS bitlerini önbelleğe alacaktır. Web sayfalarını önbelleğe almak istiyorsunuz. Ancak bunu, giriş yapmış veya alışveriş sepetinde eşyası olan kişileri yanlışlıkla önbelleğe almayacak şekilde yapmak istiyorsunuz. WordPress kullanıyorsanız, Cloudflare tarafından otomatik platform optimizasyonu adı verilen ve bunu otomatik olarak yapan bir hizmet vardır. Artık web sitenize, kullanıcınıza en yakın Cloudflare veri merkezinin olduğu yerden hizmet veriyorsunuz ve onlar bunun önbelleğe alınmış kayıtlı bir sürümünü 600 milisaniye yerine 50 milisaniyede alıyorlar.

Daha karmaşık bir web siteniz varsa, bunu Cloudflare ile Workers ürünüyle yapabilirsiniz; bu, Sayfa Kuralları ürünü altında bunun için kendi mantığınızı tanımlamanıza izin verir. Ama temel olarak, öncül, web sitenizin hiçbir şey yapmasını istemiyorsunuz. Biri sayfalarınızı açıyorsa, o sayfanın, her bir JavaScript parçasının ve her bir stil parçasının size en yakın veri merkezinin bulunduğu yerden sunulmasını istersiniz. Sunucularım Norveç'te sanırım. Ama şimdi web sitemi açarsanız, içindeki her şey Manchester'dan geliyor çünkü orası Cloudflare'in veri merkezinin bulunduğu en yakın yer. Ve bununla uğraşabilirsin. Buna Chrome Geliştirici Araçları'nda bakabilirsiniz, görünüme Cloudflare'i önbelleğe alıp almadığını söyleyen fazladan bir sütun ekleyebilirsiniz. Ve hiçbir şeyin arka uca çarpmadığından emin olmak için bu ayarları özenle seçmeye ve ince ayar yapmaya başlayabilirsiniz.

D: Ve bu bizi sonuncusuna götürüyor. Sekiz numara, akıllı bir üçüncü taraf kiti kullanın.

8. Zeki Üçüncü Taraf Kiti

J: Bir sürü şey var, bunlardan bazılarıyla hile yapmak için can atabilirsin. Şu anda iki gerçek favorim var. Bunlardan biri, ilginç bir etki alanına sahip olan instant.page'deki Instant Page. Bu gerçekten havalı. Bu nedenle sitenizi hemen daha hızlı hale getirmez, ancak sonraki gezinmeyi daha hızlı hale getirir. Bu nedenle, bir kullanıcı faresini sayfanızdaki bir bağlantının üzerine getirdiğinde, onu tarayıcınızın arka planına önceden yükler, böylece tıkladıkça zaten kullanılabilir olur. Ve ortalama bir insanın tıklamadan önce faresini bir bağlantının üzerinde 16 milisaniye boyunca hareket ettirdiğini söyleyen bir sürü araştırmaları var. Yani orada biraz arabellek zamanı var. Ve bu 16 milisaniyede, sayfayı arka planda yüklemeye başlamak için yeterli bir süre. Yani anlık hissettiriyor.

Ve bunun gerçekten güzel olmasının birkaç nedeni var. Birincisi, bu harika bir kullanıcı deneyimi. İkincisi, Önemli Web Verilerinizi etkiler, ilk sayfa yüklemesi olmasa da Önemli Web Verileri, URL'lerinizde tüm sitenizdeki hız ve yükleme sürelerini toplar. Dolayısıyla, bu navigasyonlar çok hızlıysa, bu genel puanlarınız için harikalar yaratacak ve bu da sizi gelişmiş Google sıralamalarının kutsal kâsesine yaklaştırabilir.

Daha teknik insanlar için, şu anda gerçekten ilgilendiğim diğer oyuncak Party Town. Ve öncül, sitenize yüklediğiniz bazı şeylerin üçüncü taraf olmasıdır. Ve bu genellikle pikselleri ve Google Etiket Yöneticisi'ni ve belki başka olasılıkları ve sonları izlemektir. Bu şeylerin web siteniz için kritik olan ana önemli şeylerle rekabet etmesini istemezsiniz. Bu nedenle, sayfa yüklemeye güç veren bir sürü JavaScript'im varsa, Google Etiket Yöneticisi'nin buna karşı yüklenmesini ve kaynakları çalıp savaşmasını istemiyorum. Bunları ayırmak istiyorum, böylece tarayıcımdaki sayfam gerçekten kritik olan şeylere öncelik vermesi gerektiğini ve üçüncü taraf şeylerin arka planda gerçekleşebileceğini bilsin, ayrı ayrı gerçekleşebilir. Ve teknik açıdan, tüm bu üçüncü taraf kaynaklarını ayrı bir çalışana yükler, yani normal akışın dışında gerçekleşir, performansı etkilemez ve arka planda sessizce gerçekleşir. Bu tür şeylerden inanılmaz performans kazanımları gördüm. Bence performans optimizasyonunun gittiği yer burası. Kurulumu biraz zor, her şeyle mükemmel çalışmıyor. Ama gerçekten rekabette öne geçmek istiyorsanız, bu oynamak için gerçekten harika bir oyuncak. Yani biraz beta, ama keşfetmeye değer.

D: Party Town'ın URL'sini aramaya çalışıyordum çünkü Google'da arama yaparsanız bulmak oldukça zor ama GitHub'da.

J: Evet. Az önce sana paylaşabileceğin bir bağlantı gönderdim. Çok beta. Çok GitHub. Şu anda çok inek ve geliştirici.

Pareto Turşu - 100 Küçük Değişiklik Yapın

D: Pareto Turşusu ile bitirelim. Pareto, sonuçlarınızın %80'ini çabalarınızın %20'sinden elde edebileceğinizi söylüyor. Mütevazı düzeyde çaba için inanılmaz sonuçlar sağlayan, önerebileceğiniz bir SEO etkinliği nedir?

J: Bu konuda verebileceğim en iyi tavsiye, SEO için optimal Pareto'yu görmezden gelmektir. Bunun artık böyle çalıştığını sanmıyorum. 100 yıl önce gerçek bir perakende mağazası işleten büyükanne ve büyükbabamızsanız, bunun harika bir tavsiye olduğunu düşünüyorum. Ekosistemimizin farklı olduğunu düşünüyorum. Ve bence özellikle SEO için kazanmanın yolu, bugün ve yarın ölene kadar teker teker 100 küçük değişiklik yapmaktır. Aksi takdirde, rakipleriniz daha hızlı hareket ediyor. Her şey kalite, marka ve işle ilgili. Taktiksel olarak "Oh, sadece şunu yap" diyebileceğiniz her şeyi rakipleriniz de yapabilir.

Yani evet, marka itibarınızı ikiye katlamak gibi potansiyel olarak bazı akıllı cevaplar var, çünkü bu kesinlikle iyi olacak. Ama bu çok büyük karmaşık bir şey. Ve bence bunu düşünmenin çok daha iyi bir yolu, bu öğleden sonra, hangi on şeyi iyileştirebilirim? Ve sadece git ve bunu yap. Ve büyük veya zeki olmalarına gerek yok, sadece tekrar edin ve daha iyi olun.

D: Bir şeylere öncelik vermek zorunda değilsin. Ama kesinlikle bazı şeylerin diğerlerinden daha büyük bir etkisi vardır.

J: Evet, ama büyük şeylerin hepsi daha iyi bir çözüm, daha iyi içeriğe sahip olmak, daha fazla ürün-pazar uyumluluğu olmak veya hedef kitlenizi etkilemek ve onlara yardımcı olmak gibi görünüyor ama bunların hiçbiri yapabileceğiniz somut, taktik şeyler değil.

Biliyor musun, fikrimi değiştiriyorum. Yapabileceğin %80 şey gidip Cloudflare almak.

D: Ev sahibiniz David Bain oldum. Jono, In Search SEO podcast'inde olduğun için çok teşekkürler.

J: Bana sahip olduğun için teşekkürler. Bu çok hoştu.

D: Ve dinlediğiniz için teşekkür ederim.