WordPress Optimizasyon
- Bir Caching eklentisi kullan
- WordPress kodunu küçültün ve birleştirin
- Gzip Sıkıştırmayı Etkinleştir
- Resimleri optimize edin
- Tembel yükleme özelliğini etkinleştir
- İçerik Dağıtım Ağı kullanın
- Ana sayfanızdaki Alıntıları kullan
- Sayfa başına yorumları sınırla
- Veritabanını temizle
- Geri pingleri ve geri izlemeleri kapatma
İleri düzey kullanıcılar için WordPress Hız optimizasyonu adımları
- Aktarım bağlantıları için Kalıcı’yı etkinleştir
- İçeriğinizin sıcak bağlantısını devre dışı bırak
- Statik içerik için Expires üstbilgisini ayarla
- WordPress hızını geliştirmek için temel optimizasyonlar
- Barındırma
- DNS Sağlayıcısı
- Temalar
- Eklentiler
Nereden başlamalıyız?
Başlamak için mevcut site hızınızın bir ölçütünü almak iyidir. Bunu yapmak için, Pingdom Website Speedtest Tool’u kullanabilirsiniz.
WordPress hız testi aracı
Hız testinizi yaptınız mı? Yükleme süreniz nedir? Sürekli olarak 2 saniyeden az ise, bu adil, ancak yine de optimize edilebilir. 2 saniyeden uzunsa, endişelenmelisiniz.
Sayfa yükleme hızı web sitenizi nasıl etkiler?
Yavaş yükleme sitesi site trafiğinizi ve gelirinizi olumsuz yönde etkileyecektir. Trafik en az 2 nedenden etkilenir:
- Arama Motorları yavaş sitelere düşük sıralama verir – 2010 yılında, arama devi Google, site hızını bir sıralama faktörü olarak düşünmeye başlayacağını duyurdu. Bu, SEO’nuz ne kadar iyi olursa olsun ve sunduğunuz ürün ve kaynakların ne kadar iyi olursa olsun, siteniz yavaş yükleniyorsa, Google’dan daha az trafik alırsınız ve aynı şey Bing ve diğer arama motorları için de geçerlidir.
- Kullanıcılar yavaş yükleme web sitelerini sevmezler – Google Arama’da bir sonuca tıkladıktan sonra, sayfanın sonraki birkaç saniye için açılmayacağını fark ettiniz, ne yaptınız? Akamai ve Gomez tarafından yürütülen yakın tarihli bir anket, internet kullanıcılarının yaklaşık yarısının bir sayfanın 2 saniyeden daha kısa sürede yüklenmesini beklediğini ortaya koyuyor. Bundan daha fazlası var ve geri düğmesine basarlar ve başka bir sonuca tıklarlar.
Bir e-Ticaret web sitesiniz varsa, WordPress hızınız hakkında iki kez endişelenmeniz gerekir. Yukarıda belirtilen aynı ankette, çevrimiçi alışveriş yapanların % 79’u, performans sorunları varsa bir siteden alışveriş yapmaya geri dönmeyeceklerini, % 44’ü de bir arkadaşınıza bir sitede alışveriş yapmanın kötü bir deneyimiyle karşılaştıklarını söyleyeceğini söylemiştir.
Tasarımda biraz arka plana sahip bir ön uç geliştirici olarak, “tasarım” ın “ işlevsellik” den ayrı bir şey olarak anlaşıldığını görmek beni rahatsız ediyor .
Oluşturduğumuz siteler için resimler, videolar, grafikler, yazı tipleri, animasyonlar ve kaydırma efektleri gerekli olabilir. Yine de, bu şeylerin tarayıcının performansı üzerindeki etkilerini göz ardı etmemeliyiz. Temel amacımız, kullanıcı cihazlarından veya ağ özelliklerinden bağımsız olarak hızlı ve verimli deneyimler sunmaktır.
Seçimlerimizle temkinli olmazsak şişkin kodlar, ağır görüntüler, engelleme stilleri ve komut dosyaları ile sonuçlanabilir. Bu, tarayıcının, özellikle mobil cihazdaysa, sitenin ziyaretçilerine en iyi deneyimleri sunmasını engelleyebilir.
Mobil kullanıcıların% 53’ü yüklenecek 3 saniyeden uzun süren siteleri terk ediyor
[Kaynak: Google DoubleClick blog]
Modern Front End geliştirme sürecinde, bunları Tasarımın önemli parçaları olarak düşünmeliyiz:
- DOM ve varlıkların boyutu (görseller / grafikler)
- CSS Karmaşıklığı
- Kaydırma pürüzsüzlüğü ve Animasyon FPS
- Etkileşimli zaman, görsel ilerleme hızı, kullanıcı girişi yanıt süresi
- Ayrıştırma zamanı, Yürütme süresi ve JavaScript’in yığın boyutu
Bir mobil web sayfasının 3G bağlantısına yüklenmesi gereken ortalama süre 19 saniyedir [Kaynak: Google DoubleClick blog]
Neyse ki, performans sorunlarını tanımlayan ve onlara hitap eden araçlar var.
Chrome’un Lighthouse Denetimi
Deniz Feneri , web sayfalarının kalitesini ölçmek için kapsamlı bir test seti sağlayan açık kaynaklı bir araçtır. Performans, Erişilebilirlik, SEO, En İyi Uygulamalar ve İlerici Web Uygulaması (PWA) geliştirme konusunda size ipuçları verecektir.
Deniz Fenerini kullanmak için sağ tıklayın ve herhangi bir web sayfasındaki “Teftiş” i seçin. DevTools panelinizdeki “Denetimler” sekmesini görmelisiniz (Chrome 60 ve üstü).
Görüntülere odaklanalım
Görüntülerin optimize edilmesi çoğu zaman en büyük performans iyileştirmelerini sağlar.
Görüntüler hala web’deki yavaşlığın bir numaralı sebebidir
Görüntüler büyük miktarda internet bant genişliğine sahipler çünkü çoğu zaman büyük dosya boyutlarına sahipler. [Addy Osmani, Software Engineer Google ]
Deniz feneri, ekran çözünürlüğüne bağlı olarak optimize edilebilen ve boyutlandırılabilen görüntüleri tanımlayacaktır. Ayrıca, ekran dışında kalan görüntüleri (katlamanın altında) tanımlar ve tembel yüklenebilir.
Görüntülerin siteye nasıl eklendiğini her zaman kontrol etmiyoruz. İçerik yaratıcıları tarafından bir CMS, örneğin Drupal aracılığıyla yüklenebilir. Önceliğimiz, uygun iş akışlarını kurmak, böylece görüntülerin uygun boyutta olmasını sağlamak, uygun çözünürlükleri kullanmak ve tarayıcıya sunulmadan önce gereksiz meta verileri kaybetmektir.
Görüntü Optimizasyonu Araçlarını ve Süreçlerini Kullanma
Resimleri manuel optimize etmek kullanabileceğimiz ImageOptim ve SVGOMG vektörler için.
Daha kolay hale getirmek için, bir Imagemin’i içeren bu optimizasyon süreçlerini, Gulp veya Webpack aracılığıyla inşa sürecimize dahil edebiliriz .
Düzgün görüntüleri boyutlandırma
Kullanım duyarlı görüntüleri ile
CDN kullanma
Bir CDN gibi Cloudinary kullanarak (ücretsiz bir kademe vardır), Imgix veya Akamai. Temel olarak görüntü optimizasyon sürecini bu hizmetlere devredeceksiniz.
Lazy Load Kullanmak
Ekrandan çekilen görüntüler, örn. Ekranın alt kısmında bulunan görüntüler veya görünümde olmayan karusel görüntüleri, sayfa yükleme hızını ve etkileşime girme süresini geliştirmek için tembel olarak yüklenmelidir.
Mobil sayfaların% 70’i ekranın üst kısmındaki görsel içeriğin ekranda görünmesi için yaklaşık 7 saniyedir. [Kaynak: Google ile düşün]
Bir IntersectionObserver yardımıyla, DOM’daki bir görüntünün görünür görünüm alanına girip sadece gerçekte görülebilen görüntüleri yüklediğini akıllıca belirleyebiliriz. : Kolayca bu amaçla dahil edilebilir kütüphaneler vardır lazysizes , lozad.js , Blazy , yall.js .
Alternatif görüntü formatları
WebP , Google’dan daha düşük dosya boyutları sunmayı amaçlayan yeni bir resim biçimidir. WebP’nin sıkıştırması, JPEG ve PNG’den% 25–34 daha küçük olabilir. Tarayıcı desteği bu noktada yaklaşık% 74 seviyesindedir. Animasyonlu GIF kullanıyorsanız, bunları bir videonun<H.264/MPEG-4>% 80’ini veya daha fazlasını bir GIF’nin dosya boyutunda kaldırabilecekleri birvideoolaraksunmayı düşünebilirsiniz.
Web’deki görseller hakkında derinlemesine bir inceleme ve diğer birçok pratik ipucu için Addy Osmani tarafından sunulan Essential Image Optimization e-Kitabına bakın
Deniz Feneri, web sitenizi yavaşlatabilecek sorunları belirlemenize yardımcı olur ve bunları nasıl ele alacağınızla ilgili pratik ipuçları verir. Görüntülerin optimize edilmesi daha hızlı, daha temiz ve daha performanslı bir web sağlar. Performansı artırın ve tasarımı geliştireceksiniz.
Google Lighthouse Scoru Yükseltmek
- İlk anlamlı “boya” yı geliştirin (kullanıcı arayüzü oluşturma)
- Algısal hız endeksini geliştirin
- Dizinler için bir manifesto dosyası ekle
- HTTPS ekle ve ona yönlendir
- Çevrimdışı özellik için hizmet çalışanları ekleyin
- JavaScript’li kullanıcıların kapalıyken, JavaScript’in etkin olduğu kullanıcılarla aynı bilgileri aldıklarından emin olun.
Bu optimizasyonların her birinin neyi gerektirdiğini daha ayrıntılı bir şekilde ele alacağız.
İlk anlamlı boya
İlk anlamlı boya, web geliştiricilerinin her zaman izlediği, ancak hafif bir dokunuşla karşılaştığı bir şey. Her zaman bir kullanıcının sayfada bazı içerikleri görmesinin ne kadar sürdüğünü biliyorduk (ilk resim). İlk anlamlıboya, kullanıcının sadece bir nav çubuk yerine birincil içeriği görmesinin ne kadar sürdüğünü soruyor.
İlginçtir ki, bu, çoğumuzun performansla başa çıktığı şekilde çözülebilir: Uygulamanın mümkün olduğunca az veri göndermesini sağlayarak.
Örneğin, bir yorumcu sitemi incelediğinde. 1200 piksel genişliğinde görüntü boyutları istediğimi fark ettiler! Bunu keşfettikleri için memnun oldum çünkü sitemin yüklenme süresini kısaltmak için ilk adımdı. CSS’nin 500px’den daha geniş görüntüleri göstermemesine rağmen, bu görüntüler kullanıcının yüklenmesi için çok zaman aldı.
500px gibi küçük resimler isteyerek, bu resim isteklerinin boyutunu yarıya indirebildim.
İlk anlamlı boyamı azaltmanın bir başka yolu Webpack paketimle ilgili daha akıllıca davranmaktı. Webpack kullanıyorsanız, üretim için yapabileceğiniz birçok optimizasyona baktığınızdan emin olun . Yapabileceğiniz en büyük şey, bağımlılıklarınız hakkında akıllı olmak.
Paketinizi kontrol edin ve olmadan yapabileceğiniz üçüncü taraf kodlarının bulunup bulunmadığını belirleyin. Kendi paket incelememden sonra, gerçekten Moment.js’ye ihtiyacım olmadığını anladım. Bu kütüphane içinde çok fazla değer katarken, onu paketimden 60kb traverten bir bağımlılık olarak kaldırarak.
Düğüm uygulamanızın yükünün azaltılmasının en hızlı yolu, gönderilen her şeyin sıkıştırıldığından emin olmaktır. Check out node.js sıkıştırma ortakatmanı . Ekspres’i kullanıyorsanız, yalnızca bu ara katman yazılımını kullanmanız gerekir; Bu katman yazılımını uygulama yükü boyutlarını yarıdan fazla azalttığını gördüm!
Google sayfa hız bilgileri artık analiz motoru olarak Deniz Fenerini kullanıyor
Bu google ile artık tüm araçlarda denetimi standart hale getirdi.
Chrome tarayıcısından Chrome Kullanıcı Deneyimi Raporu (CrUX) aracılığıyla bilgi toplayan aynı deniz feneri veri motoru. Bu, sayfa hızındaki analizlerin, Chrome UX raporları ve deniz fenerinden elde edilen bir web sitesi ve mobil uygulama için daha iyi bir teşhis sağlayabileceği anlamına gelir.
Sayfa hızı bilgileri artık SEO denetimi için bir dizi bilgi sunuyor
Laboratuvar verileri
Saha veri
teşhis
fırsatları
Hem trafiğiniz hem de kazancınız söz konusu olduğunda, sitenizin hızlı bir şekilde yıldırım olmasını sağlamak için gerekli adımları atmanız gerekir.
VEYA BİZ SİZİN YERİNİZE, SİTENİZİ ROKET HIZINA KAVUŞTURALIM..
BUNUN İÇİN HİZMET PAKETİMİZİ HEMEN SATIN ALIN 🙂