Google'ın web'i daha hızlı hale getirme misyonunun kısa geçmişi
Google, 2009 yılında "web'i daha hızlı hale getirmek" için silaha çağrıda bulunarak, web sitesi sahiplerini sitelerinin daha hızlı yüklenmesini sağlamaya ikna etme misyonunu üstlendi.
Web sitesi sahiplerini bunu gerçekten önemsemeye ikna etmek için Google, 2010 yılında 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 gerçekleştirilen arama sayısının masaüstü bilgisayarlarda yapılan aramaları aştığını duyurdu. Bu yüzde artmaya devam ediyor. Yayınlanan en son istatistik, 2019 itibarıyla Google'da gerçekleştirilen aramaların %61'inin mobil cihazlardan yapıldığını söylüyor.
Mobilin artık aramada 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ı geliştirme ve performans yönergelerine uygun, esasen başka bir mobil tema olan bir şey oluşturmaya teşvik etmeyi amaçlamaktadır.
Her ne kadar pek çok site sahibi ve SEO, başlarını ağrıtan diğer 200'den fazla sıralama faktörünün yanı sıra sayfa hızı ve AMP'ye yönelmek zorunda kaldıklarından ş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 odaklandıklarını fazlasıyla haklı çıkardığı bir çalışma gerçekleştirdi. "Sayfa yükleme süresi bir saniyeden 10 saniyeye çıktıkça, bir mobil site ziyaretçisinin hemen çıkma olasılığının %123 arttığını" buldular.
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 fazla faktörü (Core Web Vitals adı verilen) dahil edecek.
Ortalama insanın dikkat süresinin sürekli azalması ve mobil cihazlarımıza olan bağımlılığımızın istikrarlı bir şekilde artmasıyla, sayfa hızının web sitesi sahipleri için inanılmaz derecede önemli bir şey olduğuna ve olmaya devam edeceğine şüphe yok.
Bir web sitesini hız için nasıl optimize edebilirim?
Bir yarış arabası sürücüsü gibi düşünün
Sayfa hızı yarışını kazanmak, araba yarışını kazanmakla aynı şeyleri gerektirir. Arabayla yarış kazanmak için aracınızın olabildiğince hafif, olabildiğince güçlü olduğundan emin olmanız ve yarış pistinde olabildiğince verimli bir şekilde ilerlemeniz gerekir.
Sayfa hızı optimizasyon tekniklerini biraz daha anlaşılır hale getirmeye çalışmak için bu benzetmeyi kullanacağım.
Hafif yap
Bu günlerde web siteleri her zamankinden daha güzel ve işlevsel; ancak bu aynı zamanda onların her zamankinden daha büyük olduğu anlamına da geliyor. Çoğu modern web sitesi bir parti otobüsüne veya limuzine eşdeğerdir. Süper şıklar, her türlü olanakla donatılmışlar ve bu nedenle AĞIR ve YAVAŞlar. "Yarış pisti" arama motorunda parti otobüsü veya limuzinle kazanamazsınız. Harika görüneceksin ama kaybedeceksin.
Resim kaynağı: GTMetrix test sonuçları sayfası
Sayfa hızı yarışını kazanmak için hafif, uygun bir yarış aracına ihtiyacınız var. Yarış arabalarında radyo, bardak tutucu, torpido gözü veya kesinlikle gerekli olmayan herhangi bir şey yoktur. Benzer şekilde, web siteniz ayrıntılı animasyonlar, video arka planları, devasa resimler, süslü widget'lar, aşırı eklentiler veya kesinlikle gerekli olmayan başka herhangi bir şeyle dolu olmamalıdır.
Sitenizi gereksiz süslülüklerden ve aşırı eklentilerden arındırmanın yanı sıra, aşağıdakileri yaparak da web sitesinin ağırlığını azaltabilirsiniz:
Üçüncü taraf komut dosyalarının (diğer web sitelerinden veri gönderen veya alan kod parçacıkları) sayısını azaltmak
Daha hafif (daha az kod ağırlıklı) bir temaya geçiş ve kullanılan yazı tipi sayısını azaltma
AMP'yi uygulama
Resimleri optimize etme
Kodu sıkıştırma ve küçültme
Düzenli veritabanı optimizasyonlarının gerçekleştirilmesi
WordPress gibi açık kaynaklı bir içerik yönetim sisteminde, bu görevlerin çoğunu çok daha kolaylaştırabilecek hız eklentileri mevcuttur. WP Rocket ve Imagify, wP'nizi önemli ölçüde hafifletmek için birlikte kullanılabilecek iki WordPress eklentisidir.
ebsite'nin ağırlığını görüntü optimizasyonu, sıkıştırma, küçültme ve diğer çeşitli sayfa hızı en iyi uygulamaları aracılığıyla ölçün.
Ona daha fazla güç ver
Bir yarış arabasına golf arabası motoru koyamazsınız, öyleyse neden web sitenizi çok ucuz, paylaşılan bir barındırma planına koyasınız ki? Uzun süredir bu planlardan birindeyseniz, barındırma için ayda birkaç dolardan fazla ödemeyi acı verici bulabilirsiniz, ancak yine golf arabası ve yarış arabası motoru: bu yarışı kazanmak istiyor musunuz, istemiyor musunuz?
Geleneksel paylaşımlı barındırma planları on binlerce web sitesini tek bir sunucuya sıkıştırır. Bu, her bir sitenin bilgi işlem gücüne aç kalmasına neden olur.
Büyük liglerde yarışmak istiyorsanız yetişkinlere yönelik bir ev sahipliği planı almanın zamanı geldi. WordPress siteleri için, WP Engine ve Flywheel gibi yönetilen barındırma şirketleri, güçlü ve WordPress sitelerini daha hızlı sunmak için özel olarak ayarlanmış sunucular kullanır.
Yönetilen WordPress barındırma size göre değilse veya bir WordPress siteniz yoksa, VPS'ye (Sanal Özel Sunucu) yükseltme yapmak, web sitenizin çok daha fazla bilgi işlem kaynağına sahip olmasına neden olacaktır. Ayrıca kendi barındırma ortamınız üzerinde daha fazla kontrole sahip olacaksınız; bu da PHP, MySQL, Varnish önbelleğe alma ve diğer modern web sunucusu teknolojilerinin en son sürümleri gibi şeylerle "motorunuzu ayarlamanıza" olanak tanıyacak. Zaten vergilendirilen sunucunuza giderek daha fazla web sitesi dolduran paylaşımlı barındırma şirketinizin açgözlülüğünün insafına artık kalmayacaksınız.
Kısacası, web sitenizi iyi ayarlanmış bir barındırma ortamına yerleştirmek, yarış arabanıza süper şarj cihazı takmak gibi olabilir.
Daha iyi sür
Son olarak, ama kesinlikle en önemlisi, hafif ve güçlü bir yarış arabası, parkurda nasıl verimli bir şekilde hareket edeceğini bilen eğitimli bir sürücü olmadan ancak bu kadar hızlı gidebilir.
Bu benzetmenin "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 öğesi, tarayıcının kodda dolaşırken ve sayfanın çıktısını işlerken gezinmesi için başka bir değişiklik 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, zemini yeniden yapmadan önce odaları boyarsınız. Önce zeminleri yeniden düzenlerseniz ve ardından odaları boyarsanız, yeni zeminlerin üzerine boya bulaşır ve daha sonra geri dönüp zeminlerle ilgilenmeniz gerekir.
Bir tarayıcı bir web sayfasını yüklediğinde, (tesadüfen) "boyama" adı verilen bir süreçten geçer. Tarayıcı, web sayfasının kaynak kodundan veri parçaları aldığında her sayfa "boyanır". Bu boyama işlemi ya verimli bir şekilde gerçekleştirilebilir (örneğin, zemini yeniden cilalamadan önce duvarları boyamak) ya da süreçte daha önce yapılması gereken/yapılması gereken bir şeyi yeniden yapmak, düzeltmek veya eklemek için sürecin başlangıcına birkaç kez gitmeyi gerektiren daha kaotik, sıra dışı bir şekilde yapılabilir.
Resim kaynağı: WebPageTest.org Test Sonucu (Film Şeridi Görünümü)
İşlerin teknik olabileceği yer burasıdır, ancak sitenizin "izi" daha verimli bir şekilde yönlendirmesine yardımcı olmak için elinizden geleni yapmanız önemlidir.
Önbelleğe alma, bir web sayfasının tarayıcıya yüklenmesini kolaylaştırmak için her web sitesinin sahip olması gereken bir kavramdır. Bir tarayıcının bir sayfanın kaynak kodunun tamamını işlemesi ve bunu kullanıcıya görsel olarak sunması zaten yeterince uzun sürüyor; bu nedenle kaynak kodunu sunucuya gitmeye hazır hale getirseniz iyi olur. Varsayılan olarak, önbelleğe alma olmadan durum böyle değildir.
Önbelleğe alma olmadan, tarayıcı sayfayı boyamayı beklerken web sitesinin CMS'si ve sunucusu web sayfasının kaynak kodunu oluşturmaya devam edebilir. Bu, tarayıcının duraklayıp sunucudan daha fazla kod gelmesini beklemesine neden olabilir. Önbelleğe alma ile bir sayfanın kaynak kodu sunucuda önceden derlenir, böylece tek seferde tarayıcıya tam olarak gönderilmeye hazır hale gelir. Bunu, birisi her istediğinde talep üzerine bir kopya çıkarmak yerine, halihazırda üretilmiş ve dağıtılmaya hazır bir belgenin çok sayıda kopyasına sahip bir fotokopi makinesi gibi düşünün.
Çeşitli türlerde ve düzeylerde önbelleğe alma işlemi,
h eklentileri, barındırma şirketiniz ve/veya bir CDN (İçerik Dağıtım Ağı) aracılığıyla. CDN'ler yalnızca önbellekleme 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şuyor. Web aslında bu anlamda bir “bulut” değil.)
Yarış arabası benzetmemize geri dönersek, önbelleğe alma ve CDN'yi kullanmak, yarış pistinde çok daha hızlı bir yolculuğa eşittir.
Bunlar verimli sayfa boyamanın temel yapı taşlarından ikisidir, ancak kullanılabilecek daha fazla teknik de vardır. WordPress'te aşağıdakiler bir eklenti veya eklentiler aracılığıyla uygulanabilir (yine WP Rocket ve Imagify, bunların çoğunu başarmak için özellikle iyi bir kombinasyondur):
Komut dosyalarının eşzamansız ve/veya ertelenmiş yüklenmesi. Bu, temelde aynı anda birden fazla şeyin yüklenmesini veya hemen ihtiyaç duyulmayan şeylerin yüklenmesini daha sonraya kadar beklemenin süslü bir yoludur.
Ön yükleme ve ön getirme. Temel olarak, kullanıcının bağlantılara tıklamasını beklemek yerine, bağlantılarla ilgili verileri önceden almak.
Tembel yükleme. Bu kavramın sayfa hızı amacıyla mevcut olması ironik bir terimdir, ancak varsayılan olarak çoğu tarayıcı, bir sayfadaki TÜM görselleri, hatta kullanıcı aşağı kaydırıncaya kadar görüş alanı dışında olan görselleri bile yükler. Tembel yüklemeyi uygulamak, tarayıcıya tembel olmasını ve kullanıcı gerçekten oraya kaydırıncaya kadar görüş alanı dışındaki görüntülerin yüklenmesini beklemesini söylemek anlamına gelir.
Görüntüleri yeni nesil formatlarda sunma. WebP gibi yeni görüntü formatları, tarayıcılar tarafından eski moda JPEG ve PNG formatlarına göre çok daha hızlı yüklenebilmektedir. Ancak henüz tüm tarayıcıların bu yeni biçimleri desteklemediğini unutmamak önemlidir; bu nedenle, yeni nesil sürümleri destekleyen tarayıcılara sunabilecek bir eklenti kullandığınızdan, ancak eski sürümleri desteklemeyen tarayıcılara sağladığı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 Etme
Son olarak, yeni Core Web Vital metriklerini (En Büyük İçerikli Boya, İlk Giriş Gecikmesi ve Kümülatif Düzen Değiştirme) optimize etmek, yarış pistinde çok daha verimli bir yolculuk da sağlayabilir.
Resim kaynağı
Bunlar oldukça teknik kavramlardır, ancak ne anlama geldiklerini anlamanız için burada kısa bir genel bakış sunalım:
En Büyük İçerikli Boya (LCP), sayfadaki en büyük öğenin boyanmasını ifade eder. Google'ın PageSpeed Insights aracı size hangi öğenin bir sayfanın LCP öğesi olarak kabul edildiğini söyleyecektir. Çoğu zaman bu bir ana resim veya büyük kaydırma alanıdır, ancak sayfadan sayfaya değişiklik gösterir; bu nedenle, sayfanızdaki LCP'yi tanımlamak için aracı çalıştırın ve ardından söz konusu öğenin daha hızlı yüklenmesini sağlamak için neler yapabileceğinizi düşünün.
sayfadaki en büyük öğenin boyanmasını ifade eder. Google'ın PageSpeed Insights aracı size hangi öğenin bir sayfanın LCP öğesi olarak kabul edildiğini söyleyecektir. Çoğu zaman bu bir ana resim veya büyük kaydırma alanıdır, ancak sayfadan sayfaya değişiklik gösterir; bu nedenle, sayfanızdaki LCP'yi tanımlamak için aracı çalıştırın ve ardından söz konusu öğ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. FID sorununa örnek olarak, tıklanabilir hale gelmeden önce kullanıcı tarafından görülebilen bir düğme gösterilebilir. Gecikme, tıklama işlevinin düğmenin kendisinden önemli ölçüde daha geç yüklenmesinden kaynaklanacaktır.
Kümülatif Düzen Kayması (CLS), basit bir kavrama atıfta bulunan üç büyük kelimeden oluşan bir dizidir. Telefonunuza bir web sayfası yüklerken bir şeye tıkladığınızda veya bir şey okuduğunuzda, üstüne veya altına başka bir şey yüklendiği için sayfanın yukarı veya aşağı atladığını biliyorsunuz. 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 uygundur
Lex ve kafa karıştırıcı, ancak daha iyi sıralamalara ulaşmak için önemli bir bileşen. Bir web sitesi sahibi olarak, isteseniz de istemeseniz de bu yarıştasınız; dolayısıyla web sitenizi bir golf arabası yerine bir yarış arabasına dönüştürmek için elinizden geleni yapsanız iyi olur!
