Sayfa hızı, SEO çalışmanız için önemli bir husustur, ancak çok teknik olma eğiliminde olan karmaşık bir konudur. Sitenizin sayfa hızı hakkında anlaşılması gereken en önemli şeyler nelerdir ve iyileştirmeye nasıl başlayabilirsiniz? Bu haftaki cuma günkü baskısında Britney Muller, başlamak için bilmeniz gerekenleri gözden geçiriyor.
Yeni bir sekmede yüksek çözünürlüklü sürümü açmak için yukarıdaki beyaz tahta resmine tıklayın!
Video Transkripsiyonu
Hey, Moz hayranları. Cuma günü Beyaz Tahta başka bir baskısına hoş geldiniz. Bugün sayfa hızındaki her şeyi gözden geçiriyoruz ve işinizi yaparken düşündüğünüz ve üzerinde çalışmanızın neden bu kadar önemli olduğunun altını çiziyoruz.
En temel düzeyde, bir web sayfasının nasıl yüklendiğini kısaca açıklayacağım. Bu şekilde, başımızı bu neden önemli olduğunu etrafına sarabiliriz.
Bir web sayfası nasıl yüklenir?
Bir kullanıcı bir tarayıcıya gider, web sitenize koyar ve bir DNS isteği vardır. Bu, etki alanı adı sağlayıcınıza, belki de GoDaddy'ye, bu da sunucunuza dosyalarınızın bulunduğu yere işaret eder ve bu da ilginç hale geldiği yerdir. Böylece DOM tüm HTML’nizi, CSS’nizi ve JavaScript’inizi yüklemeye başlar. Ancak bu, nadiren bir web sayfasını oluşturmak veya yüklemek için gereken tüm komut dosyalarını veya gerekli kodu çeker.
Genelde, DOM'nin her şeyin gerçekleşmesi için sunucunuzdan ek kaynaklar istemesi gerekir ve bu, işlerin sitenizi gerçekten yavaşlatmaya başladığı yerdir. Bu tür bir arkaplan bilgisine sahip olmak, bu sorunlardan bazılarını tetiklememize yardımcı olacaktır.
Sitenizi yavaşlatan sorunlar
En yaygın suçlulardan bazıları nelerdir?
- Her şeyden önce görüntüler. Büyük görüntüler, yavaş yüklenen web sayfalarının en büyük suçlularıdır.
- Barındırma sorunlara neden olabilir.
- Eklentiler, uygulamalar ve widget'lar, temelde herhangi bir üçüncü taraf komut dosyasının yanı sıra yükleme süresini de yavaşlatabilir.
- Temanız ve bunun dışındaki büyük dosyalar da işleri gerçekten yavaşlatabilir.
- Yönlendirmeler, bir web sayfasına ulaşmak için gereken atlama sayıları işleri yavaşlatacaktır.
- Sonra bir saniyede gireceğimiz JavaScript.
Fakat bütün bu şeyler bir suçlu olabilir. Bu yüzden bazı kaynaklara, bazı metriklere ve bunların ne anlama geldiğine bakacağız ve sonra bugün sayfa hızınızı artırabilmeniz için bazı yöntemler nelerdir?
Sayfa hızı araçları ve kaynakları
Burada listelediğim birincil kaynaklar Google araçları ve Google'ın önerileri. Bence bunlar hakkında asıl ilginç olan şey, sayfaların hızlanıncaya kadar kaygılarının ne olduğunu görmemiz ve gerçekten kullanıcıya doğru geçişi görmeye başlamamız. Yine de bunu düşünmeliyiz. Ancak, her şeyden önce, bu sitenize gelen insanları nasıl etkiler ve ikinci olarak da Google’ın daha yüksek kalite olarak algılamasının ikili avantajını nasıl elde ederiz?
Google’ın iki ila üç saniye arasında herhangi bir yere yüklenecek bir web sitesi önerdiğini biliyoruz. Ne kadar hızlı olursa o kadar iyi. Ama bu aralığın olduğu yer. Ayrıca, bununla ilgili rekabetçi bir görüş almanızı şiddetle tavsiye ederim. Rakiplerinizi bu araçların bazılarına yerleştirin ve hız hedeflerinizi endüstrideki rekabet gücüyle kıyaslayın. Bence bu işe karışmanın güzel bir yolu.
Chrome Kullanıcı Deneyimi Raporu
Bu, Chrome gerçek kullanıcı metrikleridir. Ne yazık ki, yalnızca daha büyük, popüler web siteleri için kullanılabilir, ancak bundan gerçekten iyi veriler elde edersiniz. BigQuery'de barındırılıyor, bu yüzden bazı temel SQL bilgisine ihtiyaç var.
fener
Favorilerimden biri olan Deniz Feneri, Chrome Dev Araçları'nda bulunmaktadır. Bir web sayfasındaysanız ve Öğeyi İncele'yi tıklattıysanız ve Chrome Geliştirici Araçları'nı açıp Denetimin yazdığı en sağdaki sekmede açılırsanız, doğrudan tarayıcınızda bir Deniz Feneri raporu çalıştırabilirsiniz.
Sevdiğim şey, size yapabileceğiniz çok spesifik örnekler ve düzeltmeler veriyor. Bilmenin eğlenceli bir gerçeği, otomatik olarak simüle edilmiş hızlı 3G'de olacağı ve mobil kullanıcılara 3G'de odaklandıklarını fark edecekleri. Bunu hızlı 3G uygulamasına geçirmeyi seviyorum, çünkü Lighthouse bu yükü gerçek olarak çalıştırıyor. Biraz daha uzun sürüyor, ancak biraz daha doğru gibi görünüyor. Bilmek güzel.
Sayfa Hızı Görüşleri
Page Speed Insights gerçekten ilginç. Artık Chrome Kullanıcı Deneyimi Raporunu eklediler. Ancak bu büyük sitelerden biri değilseniz, gerçek sayfa hızınızı ölçmeyeceksiniz bile. Sitenizin nasıl yapılandırıldığına bakacak ve buna göre geri bildirimde bulunacak ve puanlandıracak. Sadece farkında olmak için iyi bir şey. Hala iyi değer sağlar.
Mobil web sitenizin hızını ve performansını test edin
Bunun adının ne olduğunu bilmiyorum. Bunu yaparsanız, lütfen aşağıya yorum yapın. Ancak testmysite.thinkwithgoogle.com adresinde bulunur . Bu gerçekten harika çünkü sitenizin mobil hızını test ediyor. Aşağı kaydırırsanız, işletmeniz veya web siteniz için doğrudan YG'ye bağlar. Sitenizin bu kadar yavaş olmasından dolayı Google’ın, gerçek dünya metriklerinden yararlandığını, kaybettiğiniz kişilerin yüzdesine bağlı olduğunu görüyoruz. Hepimizi uçağa sokmanın ve bu gelişmelerden bazıları için mücadele etmenin mükemmel bir yolu.
Pingdom ve GTmetrix , Google'a ait olmayan veya Google'a ait olmayan araçlardır, ancak aynı zamanda süper yararlıdır.
Site hızı ölçümleri
Peki metriklerin bazıları nelerdir?
İlk boya nedir?
İlk boya, ekrandaki ilk boş olmayan boyadır. Sadece ilk piksel değişikliği olabilir. Bu ilk değişiklik ilk boya olarak kabul edilir.
İlk çekişmeli boya nedir?
İlk içerikli boya, ilk içerik göründüğü zamandır. Bu, navigasyonun veya arama çubuğunun bir parçası veya her ne olabilirse olabilir. - İlk çekişmeli boya.
İlk anlamlı boya nedir?
İlk anlamlı boya, birincil içeriğin göründüğü zamandır. Bu, "Ah, evet, bu sayfaya bunun için geldim işte" şeklinde bir tepki aldığınızda, bu ilk anlamlı boyadır.
Etkileşimli olma zamanı nedir?
İnteraktif hale gelme zamanı, görsel olarak kullanışlı ve ilgi çekici olan zamandır. Böylece hepimiz bir web sayfasına gittik ve anlaşılıyor gibi görünüyor, ancak henüz tam olarak kullanamıyoruz. Bu metriğin girdiği yer. Peki kullanıcı için ne zaman kullanılabilir? Yine, bu ölçümlerin bile kullanıcı merkezli olduğunu görün. Gerçekten çok temiz.
DOM içeriği yüklendi
Yüklenen DOM içeriği, HTML tamamen yüklenip ayrıştırıldığında gerçekleşir. Bu yüzden, bazılarının göz önünde tutması ve genel olarak farkında olması için gerçekten iyi olanlar.
Sayfa hızınızı artırmanın yolları
HTTP / 2
HTTP / 2 kesinlikle işleri hızlandırabilir. Ne ölçüde bir araştırma yapmalı ve test etmelisin.
Önceden bağla, önceden getir, ön yükle
Preconnect, prefetch ve preload, bir siteyi hızlandırmak için gerçekten ilginç ve önemli. Bunu SERP'lerinde Google’ın yaptığını görüyoruz. Bir öğeyi incelerseniz, Google’ın bazı URL’leri önceden seçtiğini görebilirsiniz, böylece bu sonuçlardan bazılarını tıklamanız sizin için daha hızlı olur. Benzer şekilde sitenizde de yapabilirsiniz. Bu işlemi yüklemek ve hızlandırmak için yardımcı olur.
Önbelleğe almayı etkinleştirin ve bir içerik dağıtım ağı kullanın (CDN)
Önbellekleme çok, çok önemlidir. Kesinlikle araştırmanızı yapın ve doğru kurulduğundan emin olun. CDN'ler ile aynı, bir siteyi hızlandırmak çok değerli, ancak CDN'nizin doğru şekilde kurulduğundan emin olmak istiyorsunuz.
Resimleri sıkıştır
Bugün sitenizi hızlandırmanın en kolay ve muhtemelen en hızlı yolu gerçekten bu görüntüleri sıkıştırmak. Yapması çok kolay bir şey. Sıkıştırmanız için her türlü ücretsiz araç bulunmaktadır. Optimizillabirdir. Bilgisayarınızda, Web için Kaydet'te ücretsiz araçlar kullanabilir ve düzgün şekilde sıkıştırabilirsiniz.
Kaynakları küçült
Ayrıca kaynakları küçültebilirsiniz. Bu nedenle , geliştirmelerle veya sitede çalışan başkalarıyla bu daha teknik sohbetlerden bazılarını yapabilmeniz için minyatürleştirmenin , paketlemenin ve sıkıştırmanın ne yaptığının farkında olmak gerçekten iyidir .
Yani bu, sayfa hızına yüksek düzeyde bir bakış açısıdır. Ele alması gereken bir ton daha var, ancak yorum bölümündeki girişinizi, sorularınızı ve yorumlarınızı duymak isterim.
Cuma günü Beyaz Tahtanın bu baskısına göz attığın için çok teşekkür ederim ve yakında tekrar görüşürüz. Çok teşekkürler. Görüşürüz
0 Yorumlar