Web Sitesi Performansı ve Sağlık İzleme: İpuçları ve En İyi Uygulamalar

Bir web sitesi veya e-ticaret projesi kurmak ve yürütmek harikadır - ancak, siteniz çalışır duruma geldiğinde işiniz bitmiş olmaktan çok uzaktır.

Uygun sağlık ve performans izleme olmadan, web siteniz sonuçlara maruz kalacaktır - bu, yalnızca yavaş yükleme hızından çok daha büyük olabilir.

Dikkatimizi, dünyadaki tüm web sitelerinin olması gerektiği gibi çalıştığı varsayımsal, ideal bir senaryoya çevirelim. Hızla artan kullanıcı memnuniyetinin yanı sıra daha iyi bir çevreye de katkıda bulunacağımızı biliyor muydunuz?

Kötü performans gösteren web siteleri, yalnızca onları oluşturan veya kullanan herkesi etkilemekle kalmaz, aynı zamanda daha büyük bir karbon ayak izi bırakırlar.

Web Sitesi Karbon Hesaplayıcısına göre, web sitelerinin bir karbon ayak izi vardır ve ortalama bir web sitesi sayfası, görüntüleme başına 0,5 gram karbondioksit yayar. Bu sadece medyan.

Kirletici web sitelerini de dikkate alan ortalamaya bakıldığında, bu sayı 0,9 grama kadar çıkıyor.

Küresel ölçekteki sorunların yanı sıra, sağlıksız, yetersiz performans gösteren bir web sitesi size zaman, para ve gelir kaybına neden olacaktır. Web sitesi sağlığı bizimkine benzer: ihmal etmesi kolay ve iyileştirmesi zordur.

İşlem süresinden tasarruf etmenize yardımcı olacak uygun izleme uygulamalarını yürütmek için web sitesi sağlığını oluşturan ana bileşenlerin farkında olmanız gerekir.

Hızlı ve kolay web sitesi oluşturucuların ortaya çıkmasıyla, web siteleri hazırlamak herkes için erişilebilir hale geldi. Tek yapmanız gereken kaydolmak, bir alan adı seçmek, şablonunuzu seçmek ve işte bu! Saniyeler içinde bir web siteniz var.

Ancak, birçok web sitesi sahibi, web sitesi oluşturmanın yalnızca ilk adım olduğu gerçeğini reddediyor. Uygun performans bakımı ve sağlık izleme de çok önemlidir.

Ve bu notta, bazı temel web sitesi sağlık ve performans göstergelerine bakalım: bunlar nedir, nasıl izlenir ve nasıl iyileştirmeler yapılır.

Yüksek Bir Web Sitesi Sağlık Puanı İçin İzlenecek Yönler

Temel Web Verileri

Yazardan görüntü, Ekim 2022

Google Sayfa Hızı Analizleri

Performans testi yaparken göz önünde bulundurmanız gereken ilk ölçütler, Önemli Web Verilerinizdir. Bu performans göstergeleri, web sitesi kullanıcı deneyiminizin kalitesini anlamanıza yardımcı olarak hız, kararlılık ve yanıt verme becerisini gösterir.

Birkaç araç, Önemli Web Verilerinizi takip eder, ancak birçok web sitesi sahibi basit bir araca yönelir: Google PageSpeed ​​Insights.

URL'nizi araca girdikten sonra, Önemli Web Verileri testinizi geçip geçmediğinizi ve dikkat etmeniz gereken diğer hususları gösteren bir rapor sunulacaktır. İşte göreceğiniz üç temel metrik:

En Büyük İçerikli Boya (LCP)

2,5 saniye veya daha kısa bir skor hedefleyin.

Puanınız 2,5 saniyenin üzerindeyse, bu şuna işaret edebilir: sunucunuz gecikiyor, kaynak yükleme süreleri eşit değil, çok sayıda oluşturmayı engelleyen JavaScript ve CSS'niz var veya istemci tarafında yavaş oluşturma var.

İlk Giriş Gecikmesi (FID)

100 milisaniye veya daha az bir puan hedefleyin.

Puanınız bu süreyi aşarsa, üçüncü taraf kod etkisini azaltmanız, JavaScript yürütme süresini azaltmanız, ana iş parçacığı çalışmasını en aza indirmeniz, aktarım boyutlarını küçük tutmanız ve istek sayılarını düşük tutmanız gerekebilir.

Kümülatif Düzen Kaydırma (CLS)

0,1 veya daha düşük bir puan hedefleyin.

Puanınız bunu aşarsa, görsel ve video içeriğinize boyut nitelikleri ekleyerek (veya CSS en boy oranı kutuları ile yer ayırarak) rastgele düzen kaymalarını önleyebilirsiniz. İçeriğinizle örtüşmekten kaçının ve geçişlerinizi canlandırırken dikkatli olun.

Sayfa Hızı Engelleyiciler

Web sitenizin yüklenme hızını birkaç faktör etkileyebilir. Ancak, bir zaman bütçeniz varsa ve öncelikle ana suçlulara odaklanmak istiyorsanız, aşağıdaki faktörlere çok dikkat edin:

• Kullanılmayan JavaScript ve CSS Kodu.
• JavaScript ve CSS Kodunu engelleyen Render.
• Minyatürleştirilmemiş JavaScript ve CSS Kodu.
• Büyük resim dosyası boyutları (daha fazlası aşağıda).
• Çok fazla yönlendirme zinciri.

JavaScript ve CSS dosyalarının yükünü iyileştirmek için bunları önceden yüklemeyi düşünün.

Başka bir seçenek de, HTTP sunucusu yanıtında tarayıcıya "sunucu düşünme süresinden" yararlanarak hangi kaynakları indirmeye başlaması gerektiğini söyleyen ve böylece sayfa yüklemesini hızlandıran erken ipuçlarını etkinleştirmek olabilir.

Web sitenizi test etmek için:

1. https://pagespeed.web.dev/ adresine gidin
2. Taramak istediğiniz sayfanın URL'sini girin.

İlk önce ana sayfanızı seçmenizi tavsiye ederim.

Bir diğer kullanışlı araç da WebPageTest.org'dur ve bu da Önemli Web Verilerinizi ve web sitenizin performansını ve sağlığını önemli ölçüde iyileştirmenize yardımcı olabilecek diğer ölçümleri gösterir. Ayrıca, ücretsiz!

Sitede gösterilen arama kutusuna bir sayfa URL'si yapıştırmanız yeterlidir; varsayılan konumdan tam bir test gerçekleştirecektir.

Ayrıca bir kullanıcı olarak kaydolabilir ve web sitenizi farklı ülkeler, cihazlar ve tarayıcılardan test etmek için bir konum listesinden seçim yapabilirsiniz.

WebPageTest, web sitenizin performans açısından tam olarak nerede olduğunu ve dört ana bölümden oluşan bir Performans Özeti aracılığıyla web sitenizi neyin yavaşlatabileceğini gösterecektir: Fırsatlar ve Deneyler, Gözlemlenen Metrikler, Gerçek Kullanıcı Ölçümleri ve Bireysel Çalışmalar.

Yazardan görüntü, Ekim 2022

UCRAFT'ta, web sitemizin performansı söz konusu olduğunda ne üzerinde çalışmamız gerektiğini net bir şekilde anlamak için PageSpeed ​​Insights, Chrome Geliştirme Araçları, WebPageTest ve diğerleri gibi araçların bir kombinasyonunu kullanıyoruz - özellikle SaaS endüstrisi olduğundan beri. zaten çok rekabetçi.

Tasarım ögeleri

Yazardan ekran görüntüsü, Ekim 2022

Web sitesi performansı ve sağlık izleme hakkında düşündüğümüzde, bunları genellikle teknoloji ekibine bırakırız.

Peki ya size web sitenizi nasıl tasarladığınızı ve seçtiğiniz öğelerin performansınızı artırabileceğini veya bozabileceğini söylesem?

Bu doğru - tasarım ekibini dahil etmenin zamanı geldi.

Görüntü Optimizasyonu

Resimler harikadır, ancak uygun şekilde boyutlandırılmazlarsa web sitenizi yavaşlatabilirler. Resimlerinizi yeniden boyutlandırdığınızdan emin olun ve tamamı gösterilmeyecekleri zaman dev dosyalar yüklemekten kaçının.

Benzer şekilde, resimlerinizi sıkıştırın ve daha ağır JPEG veya PNG dosyalarını seçmek yerine WebP, JPEG 2000 ve JPEG XR gibi farklı dosya türlerini deneyin.

Görüntülerin hepsini bir kerede yüklemek yerine, kullanıcı görüntülediğinde yüklenmesini sağlamak için yerel tembel yüklemeyi uygulamayı düşünün.

Chrome, Safari ve Firefox dahil hemen hemen tüm tarayıcılar, <img> veya <iframe> üzerinde load=”lazy” özniteliğini destekler; bu özellik, tarayıcıya, kullanıcı onlara yaklaştığında bunları yüklemesini söyler.

Sayfanızın LCP puanını düşüreceğinden, ekranın üst kısmındaki resimleri tembelce yüklemediğinizden emin olun ve Google, LCP'yi iyileştirmek için ekranın üst kısmındaki resimlerde fetchpriority=”high” özniteliğinin kullanılmasını önerir.

Bu özelliği kullanırsanız, görüntüleri önceden yüklemenize gerek yoktur. Ekranın üst kısmındaki resimlere "fetchpriority" özniteliğini önceden yüklemeli veya ayarlamalısınız.

Ayrıca, ekran boyutuna göre uygun boyutta görüntüleri yüklemek için "srcset" özniteliğinin yanıt verme özelliğinden yararlanın ve küçük ekranlara fazladan büyük görüntüler yüklemekten kaçının. Bu, LCP puanını iyileştirmeye büyük ölçüde yardımcı olacaktır.

Yazı Tipleri

Abartılı özel yazı tiplerini 20/20 vizyonu olmayan kullanıcılar için okumak genellikle zordur, ancak web sitenizi önemli ölçüde yavaşlatabilirler.

Web için daha güvenli yazı tipleri için harici olarak barındırılan yazı tiplerini değiştirin ve Google'ın CDN'sinde barındırıldıkları sürece Google yazı tiplerini deneyin.

Ayrıca, bu yazı tipi özelliği yazı tipi dosya boyutlarını önemli ölçüde azaltabileceğinden, web sitenizin genel estetiğine değişken yazı tiplerini dahil etmeyi düşünün.

Yazı tiplerinizi önceden yüklediğinizden emin olun.

Animasyonlar/Ek Özellikler

Bunu söylemeye gerek yok: Animasyonlar, videolar, özel efektler, kaydırıcılar veya diğer süslü öğelerle aşırıya kaçmayın.

Arada sırada bazı etkileşimli öğeler eklemek güzel, ancak web sitenizi çok fazla hareketli "şey" ile doyurmak hem kullanıcılar hem de sunucularınız için sinir bozucu olabilir.

Sayfanın yeniden boyanmasına neden oldukları ve ana iş parçacığı çalışmasını artıracağı için birleştirilmemiş animasyonlar kullanmayın ve web sayfası yüklendiğinde görsel olarak kararsız görünebilir.

Mobil Optimizasyon için PWA Çözümü

Neden tüm mobil uyumlu rotayı izleyip mobil sitenizi Aşamalı Web Uygulamasına (PWA) dönüştürmüyorsunuz?

PWA'lar hizmet çalışanları ile oluşturulduğundan, önbelleğe alınmış içeriği daha hızlı yüklerler. Sadece bu da değil, PWA'lar, performans ve UX için harika olan yerel mobil uygulamalara benzer.

Ek Teknik Performans Metrikleri

çalışma süresi

Çalışma süresi, web sitenizin ne kadar iyi çalıştığını gösterir.

Web siteniz sık sık çöküyor veya çöküyorsa, kullanıcı deneyiminize, Google sıralamalarına ve dolayısıyla gelirinize zarar verir.

Mümkünse, %99,999 çalışma süresine sahip olmayı hedefleyin ve web sitenizi farklı konumlardan test edin.

Çalışma süresi izleme araçları:

• Durum Pastası.
• Pingdom.
• Daha İyi Çalışma Süresi.
• Çalışma SüresiRobot.

Veritabanı Performansı

Temel bilgileri kontrol ettiyseniz ve web siteniz hala yavaş yanıt veriyorsa, bunun nedeni zayıf veritabanı performansı olabilir.

Bunu, sorgularınızın yanıt süresini izleyerek ve en çok zaman alan veritabanı sorgularını belirleyerek kontrol edebilirsiniz.

Bunu yaptıktan sonra, optimize edin! Darboğazları kolayca belirlemenize ve doğru verilere dayalı çözümler bulmanıza yardımcı olması için Blackfire.io gibi araçları kullanabilirsiniz.

Web Sunucusunun Donanımı

Disk alanınız günlük dosyaları, resimler, videolar ve veritabanı girişleriyle doluysa web siteniz gecikebilir. Özellikle güncellemeleri veya tasarım değişikliklerini uyguladıktan sonra, merkezi işlem birimi (CPU) yükünüzü düzenli olarak izlediğinizden emin olun.

New Relic gibi araçlar, verimli izleme ve hata ayıklama yoluyla tüm yığınınızı geliştirmenize yardımcı olabilir.

Arama Görünürlüğü

Yukarıda tartışılan metriklerin çoğu, arama görünürlüğü üzerinde zaten önemli bir etkiye sahiptir.

Bu nedenle, web sitenizin sayfalarını Google PageSpeed ​​Insights aracılığıyla çalıştırdığınızda ve optimize ettiğinizde, SEO'nuz için de önemli şeyler yapmış olursunuz.

Ayrıca Semrush veya Sitechecker.pro, Screaming Frog, DeepCrawl gibi web sitesi tarama araçlarını veya ihtiyaçlarınıza en uygun diğer araçları da seçebilirsiniz.

Web sitesi tarayıcıları, aşağıdakiler gibi her tür sorunu bulmanıza yardımcı olur:

• Bozuk bağlantılar.
• Kırık görüntüler.
• Temel web hayati metriklerini izleyin.
• Yönlendirme zincirleri.
• Yapılandırılmış veri hataları.
• Dizine eklenmemiş sayfalar.
• Eksik başlıklar ve meta açıklamalar.
• Karışık içerik.

Aşağıdaki noktalar söz konusu olduğunda hazır olduğunuzdan emin olun:

• XML site haritası – Site haritanızın doğru biçimlendirildiğinden emin olun ve herhangi bir güncelleme yapmanın gerekli olup olmadığını kontrol edin ve site haritanızı Google Arama Konsolu aracılığıyla yeniden gönderin.
• Robots.txt – Tarama trafiğini daha iyi yönetmek için web sayfalarınız için (HTML, PDF veya arama motorlarının okuyabileceği diğer medya dışı biçimler) bir robots.txt dosyası kullandığınızdan emin olun, özellikle de sunucunuzun bunalmış olabileceğinden şüpheleniyorsanız Google tarayıcısından gelen istekler.

Web Sitesi Güvenliği ve Önbelleğe Alma

SSL Sertifikanızı Alın!

Sağlıklı bir web sitesi, güvenli bir web sitesidir.

Web siteniz mükemmel bir zamanda yüklense ve 100/100 puan alsa bile, https:// ile başlamazsa, kullanıcıların (veya arama motorlarının) sitenize güvenmelerinin hiçbir yolu yoktur.

SSL sertifikası, esasen, sunucunuzda şifrelenmiş bir bağlantı oluşturan ve kullanıcı verilerinin güvende kalmasını garanti eden bir koddur.

SSL sertifikası almak özellikle zor bir süreç değildir, ancak manuel olarak yapıldığında uzun sürebilir.

Ancak, BlueHost gibi köklü bir barındırma sağlayıcısı kullanıyorsanız, çoğu zaman sağlayıcınız alan adınız için ücretsiz bir SSL verebilir.

CDN Kullanmayı Düşünün

İçerik dağıtım ağları (CDN'ler), hızlı internet içeriği sunmak için uyum içinde çalışan dağıtılmış sunuculardır.

Başka bir deyişle, CDN, içeriğini coğrafi konumdan bağımsız olarak kullanıcılara yakın sunucularda tutarak web sitenizin performansını hızlandıran bir araçtır. Bu aynı zamanda önbelleğe alma olarak da bilinir.

Küresel bir varlığınız varsa, bir CDN şarttır! Sayfa yükleme hızınızı artıracak, bant genişliği maliyetlerinizi azaltacak, trafiğinizi dağıtacak (sitenizin çökme olasılığını azaltacak) ve DDoS azaltma gibi özellikler aracılığıyla güvenliği artıracaktır.

Sektördeki en iyi oyuncular arasında Cloudflare, Amazon Cloudfront ve Google Cloud CDN bulunur. Bununla birlikte, başka birçok seçenek vardır, bu nedenle araştırmanızı yapın ve web siteniz ve iş gereksinimleriniz için en iyi CDN'yi seçin.

Web Uygulaması Güvenlik Duvarı Kur

Bir Web Uygulaması Güvenlik Duvarı (WAF), şüpheli HTTP trafiğini filtreleyerek web uygulamalarını korur. Uygulamaların aşağıdaki gibi saldırılardan korunmasını amaçlar:

• Siteler arası sahtecilik.
• Siteler arası komut dosyası çalıştırma (XSS).
• Dosya dahil etme.
• SQL enjeksiyonu.

Aşağıda en popüler ve güvenilir web uygulaması güvenlik duvarlarının bir listesi bulunmaktadır:

• Cloudflare WAF.
• GoDaddy Güvenlik Duvarı.
• Microsoft Azure.

Veya WordPress kullanıyorsanız, aşağıdaki gibi eklentiler yüklemeyi düşünebilirsiniz:

• WordÇit.
• Sucuri.
• Hepsi Bir Arada Güvenlik (AIOS).

Karar

Bu bir paket! Anlayabileceğiniz gibi, web sitesi performansı ve sağlığı çeşitli yönlere bağlıdır.

Web siteniz gecikiyorsa, ilk mantıklı adım Temel Web Verilerinizi kontrol etmek ve neleri iyileştirebileceğinizi görmektir. Ayrıca diğer teknik metriklere de göz atabilir ve bunları geliştirebilirsiniz.

SEO, web sitenizin sağlığı için de hayati öneme sahiptir, bu nedenle neleri iyileştirebileceğinizi görmek için arama görünürlüğünüzü, bağlantılarınızı ve potansiyel yük engelleyicilerinizi kontrol edin.

Ayrıca SSL sertifikanızı ve önbelleğe almayı da unutmayın.

Web sitesi tasarımınız, özellikle siz veya tasarımcılarınız ağır tasarım öğeleri kullanmayı seviyorsanız, yükleme hızınızı ve performansınızı da etkileyebilir.

Resimlerinizi optimize etmeyi, ağır yazı tiplerinden kaçınmayı ve animasyonları ölçülü kullanmayı unutmayın.

Daha fazla kaynak:

• Site Performansınızı Artırmak İçin Chrome UX Raporu Nasıl Kullanılır?
• Google Görüntülü Reklam Ağı Performansını Güçlendirmek İçin 6 İpucu
• Gelişmiş Teknik SEO: Eksiksiz Bir Kılavuz

Öne Çıkan Görsel: JulsIst/Shutterstock