Vaka Çalışması: WP Smush ve Hummingbird ile Divi

Herkes daha hızlı bir web sitesi ister. Google, arama sonuçlarında sıralama için birincil ölçütlerden biri olarak yükleme hızını kullandığında, web siteniz ne kadar hızlı olursa o kadar iyidir. Aynı zamanda sadece daha iyi bir kullanıcı deneyimi sağlar. Ancak, sitenizin bu kadar hızlı çalıştığından emin olmak çok fazla iş olabilir. WPMU DEV sayesinde, performans optimizasyon eklentileri WP Smush ve Hummingbird sayesinde web sitenizi daha hızlı hale getirmek düşündüğünüzden daha az çaba ve zaman alabilir. Bu makalede, paylaşılan barındırmada bir Divi portföy sitesini ele aldığımızda ve bu eklentilerin optimizasyon güçlerini eklediğimizde neler olduğunu göstereceğiz.

WPMU DEV ile Başlarken

Bilmeniz gereken ilk şey, bu eklentilerin WPMU DEV'in sunduğu premium paketin parçası olduğudur. Üye olan herkes bunlara erişebilir. Bunlar, bu vaka çalışması için kullandığımız versiyonlardır. WordPress.org eklenti deposundan premium özelliklere erişimi olmayan ücretsiz sürümleri de indirebilirsiniz. Smush'ın ücretsiz sürümü burada ve Hummingbird burada.

Üyelik sayfanıza erişmek için WPMU DEV'in Üye Merkezine gitmeniz gerekir. Üye değilseniz, kendi sitenize nasıl yardımcı olabileceklerini görmek için bu eklentileri (ve diğer avantajları) denemek için her zaman 7 günlük ücretsiz deneme sürümüne kaydolabilirsiniz.

Web Sitesi Ekle düğmesini tıkladığınızda, sitenizin URL'sini girmeniz ve WordPress yönetici kullanıcı adı/şifresi ile bağlamanız yeterlidir. Bunu yaptığınızda siteniz WPMU DEV Hub'dadır. WPMU DEV Hub eklentisi şimdi kendisini sitenize yükledi ve etkinleştirdi.

Yeni menü öğesi WPMU DEV , şimdi gösterge tablonuzun üst kısmında görünür. Premium eklentilerinin her birini bu sayfadan yönetebilirsiniz. WP Smush ve Hummingbird'ü kurmak ve etkinleştirmek için Eklenti Ekle 'ye basmanız yeterlidir. Hangi noktada bunları tüm WPMU DEV'in Pro eklentileri listesinden seçebilirsiniz.

Eklentiler şimdi WPMU DEV panosunda görünecek.

Herhangi bir ayarı değiştirmek için, bunları kenar çubuğunda (Divi bağlantısının hemen üstünde) bulabilir veya hemen oraya götürülecek İngiliz anahtarı simgelerine tıklayabilirsiniz.

Divi ile WP Smush ve Hummingbird Pro

Bu test için yalnızca Divi temasını çalıştıran yepyeni bir web sitesi kurduk. Barındırma açısından site, SiteGround GrowBig barındırma planında kurulmuştur. Karşılaştırma sayfası, sunucu istatistiklerini aşağıdaki gibi listeler:

• Eşzamanlı Sunucu İşlemleri: 20
• Tek IP'den Eşzamanlı Bağlantılar: 15
• CPU Saniyesi / Program ve Komut Dosyası Yürütme: 2000/saat, 20000/gün, 600000/ay
• Günlük Ortalama İşlem Yürütme Süresi: 2 saniye
• Paylaşılan Hizmet CPU Kullanımı: 10 saniyeden uzun bir süre için %20'den fazla değil
• İşlem Başına Sunucu Belleği: 768 MB
• Düğümler: 300.000
• Minimum Cron İş Aralığı: 30 dakika
• Veritabanı sorguları: sunucu kaynaklarının en fazla %10'u

Ayrıca Divi düzen paketlerimizden birinden görüntü ağırlıklı bir portföy sayfası kullanıyoruz. WP Smush Pro veya Hummingbird Pro'yu kurmadan ve etkinleştirmeden önce düzen paketi için görüntüleri ve içeriği içe aktaran Makyaj Sanatçısı Portföyü düzenini yükledik.

WP Smush ve Hummingbird'den Önce

Siteyi yükledik, eklentileri WPMU DEV Hub aracılığıyla kurduk ve yerleşim paketini Divi Builder içinden içe aktardık. İlk performans testleri böyle görünüyor.

Pingdom Araçları

GTMetrix

Bu sonuçlarla, WP Smush ve Hummingbird Pro'nun görüntü sıkıştırma, kod küçültme, CDN ve önbelleğe alma özelliklerine ihtiyacımız olduğunu kesinlikle görebiliriz. Öyleyse, onları kurduğumuzda ne olacağını görelim.

Hummingbird Pro'yu Kurma

Hummingbird ayarlarına ilk girdiğinizde, modal aracılığıyla Hızlı Kuruluma gidebilirsiniz. Bu işleme Performans Testini Çalıştır butonuna tıklayarak başlamanızı öneririz. Bunları kendiniz çalıştırdıysanız, yukarıdan testlere sahip olsanız bile, bu, siteye ve eklentiye göre kişiselleştirilmiştir ve neleri yapılandıracağınız konusunda size yönergeler verebilir.

Eklentinin testi çalıştırması (eğer öyleyse) bir veya iki dakikadan fazla sürmemeli ve sizi Hummingbird kontrol panelinize yönlendirecektir. Burası ayrıca performans raporunuzun görüntülendiği yerdir.

Bu, kabaca diğer testlerin bize verdiği bilgilerle aynıdır, bu nedenle işlerin tutarlı olduğunu biliyoruz. Her eklenti için farklı ayarlar arasında rahatça ilerleyebilir ve elimizden geldiğince çoğunu düzeltebiliriz.

Önbellek eklentisi olmayan hiçbir web sitesi olmamalıdır. Ve Hummingbird Pro harika bir tanesidir. (Hepsi bu kadar değil, bu da harika.) Hummingbird Pro – Önbelleğe Alma'ya gidin ve işleri başlatmak için Etkinleştir düğmesini tıklayın.

Ardından, önbelleğe alınmasını istediğiniz şey için geçiş yaptığınız tipik Önbelleğe Alma sayfasında olacaksınız. Burada ayarlamak istediğimiz tek şey Ön Yükleme Önbelleğe Almayı Etkinleştir , çünkü bu, her şeyi önceden önbelleğe alınmış halde tutacak ve bir ziyaretçinin sitenize ulaşmasını beklemeyecektir.

Ardından, kenar çubuğunda Varlık Optimizasyonu'na tıklayın. Bir sonraki sayfada, başlamak için Etkinleştir düğmesine basın. Ayrıca zaman zaman ekranınızın üst kısmında aşağıdaki gibi bir bildirim alabilirsiniz. Böyle bir durumda, ön yükleme yaparken ve diğer ayarlamaların neden olduğu sorunları giderecek olan düğmeyle önbelleğinizi temizlemenizi öneririz.

Bir kez basıldığında, çok önemli bir seçim yapacaksınız: medya varlıklarınız için WMPU DEV CDN'yi kullanmak istiyor musunuz? Kullanmanızı öneririz. Ancak, Cloudflare veya başka bir CDN (hatta Jetpack görüntü CDN'si) kullanıyorsanız, aynı anda yalnızca bir tane etkin olması en iyisidir.

Hummingbird Pro, CDN'yi kullanmayı seçerek, sitenizde WPMU DEV sunucularına taşıyabileceği tüm varlıkları arayacaktır. Bu yeni bir test sitesi, yani sadece 18 tane var. Sizinki muhtemelen bu örnekten önemli ölçüde daha büyük olacaktır.

Daha sonra, hangi varlıkların sıkıştırma için uygun olduğunu ve hangilerinin otomatik olarak sıkıştırıldığını göreceksiniz. Sıkıştırılması mümkün olan dosyaları sıkıştırmayı seçtik.

Ardından, Gelişmiş Araçlar'a tıklayın ve Sorgu Dizelerini Varlıklarımdan Kaldır ve Varsayılan Emoji JS ve CSS Dosyalarını Kaldır'ı etkinleştirin. Bunlar, muhtemelen hiç kullanmadığınız bir şey için sayfanıza birçok ekstra istek ekler.

Bu ayarları kaydedin ve etkinleştirin, Hummingbird Pro optimizasyon kurulumu için bu kadar. Ancak, önerdiğimiz Çalışma Süresi İzleme'yi de açabilirsiniz.

Çalışma Süresi'ne tıklayın ve ardından Etkinleştir düğmesine basın. Bu, performansı hiç etkilemez. Ancak, sitenizde bir şeylerin yanlış olduğunu bilmek de aynı derecede önemlidir.

WP Smush Pro'yu Kurma

WP kontrol paneli menünüzde Smush Pro öğesine ilk tıkladığınızda bir modal göreceksiniz. Smush Pro, bir görüntü optimizasyonu ve sıkıştırma eklentisidir. Bu nedenle, işleri yoluna koymak oldukça basittir. Bu nedenle, Kurulumu Başlat'a basmanın ve mümkün olan en kısa sürede topun yuvarlanmasını sağlamanın en iyisi olduğunu düşünüyoruz.

İlk olarak, Yeni Yüklemeleri Otomatik Olarak Optimize Et ' i etkinleştirmek istiyorsunuz. Bu seçenek, görüntüleri manuel olarak (veya toplu olarak) sıkıştırmanız gerekmediği anlamına gelir. Eklenti otomatik olarak yapar.

Bundan sonra, muhtemelen Gelişmiş Çok Geçişli Kayıplı Sıkıştırmayı Etkinleştir'i açmak istersiniz. Tüm siteler görüntüleri için kayıplı sıkıştırma istemez, ancak sıradan siteler için bu seçenek uygundur.

Sıradaki, resimlerinizden EXIF ​​verilerini çıkardığınızdan emin olmak. Temel olarak bu, görüntünün nereden ve ne zaman geldiğini söyleyen bilgidir. SEO verileri değil. Yani buna ihtiyacın yok. Görüntü Meta Verilerimi Çıkar'ı açın ve İleri'ye tıklayın.

Son olarak, tam boyutlu resimlerinizle ilgili bir karar vermemiz gerekiyor. Onların da sıkıştırılmasını mı yoksa sadece değişken boyutları mı istiyorsunuz? yaparsın diyoruz. Bu nedenle, Tam Boyutlu Resimlerimi Sıkıştır'ı etkinleştirin ve bazı resimleri ezmeye hazır olun.

Şimdi, bu kurulum sadece şuydu: kurulum. Aslında hiçbir şeyi sıkıştırmadın. Henüz hiçbir görüntü ezilmedi. Bir sonraki ekranda kaç tane medya dosyasını ezebileceğinizi ve dosya boyutunda ne kadar tasarruf edeceğinizi göreceksiniz.

Bulk Smush Now'a bastığınızda eklenti çalışmaya başlıyor. Bu işlem sırasında pencereyi açık tutmalısınız, bu nedenle sıkıştırılacak çok sayıda görüntünüz varsa, şimdi gidip bir sandviç veya bir fincan kahve yapma zamanıdır. Ya da her ikisi de.

Geri döndüğünüzde (umarız) size her şeyin ezildiğini ve toplamda tasarruf edildiğini söyleyen bir mesaj göreceksiniz.

Tek sayfalık portföy demo sitemiz olan bizim için 2,9mb ile verilerin %23'ünü kurtardık. Bu tek bir sayfa için çok fazla. Kaydırmaya devam ederseniz, kurulum sihirbazında ayarladığınız tüm seçenekleri ve Ayarları göreceksiniz. Ancak, genel olarak devre dışı bırakmak istediğinizi vurgulamak istediğimiz bir seçenek var.

Muhtemelen WP Smush Pro'nun Tam Boyutlu Resimlerimi Yeniden Boyutlandırmasına izin vermek istemezsiniz. Bu, daha önce etkinleştirdiğimiz sıkıştırmadan farklıdır. Bu, görüntü çözünürlüğünü ayarlar. Yukarıdaki resimde görebileceğiniz gibi, WordPress 5.3 sürümünden itibaren bunu otomatik olarak yapmaktadır. Varsayılandan daha büyük (ancak yüklediğinizden daha küçük) resimlere ihtiyacınız varsa, bunu etkinleştirin. Değilse, geri alın.

Aynısı PNG'leri JPEG'lere Otomatik Dönüştür (Kayıplı) için de geçerlidir . Bununla muhtemelen biraz yerden tasarruf edecek olsanız da, mevcut bir sitedeki görüntüleri kırma şansı inanılmaz derecede yüksektir. Bunu yalnızca kristal netliğinde görüntülerden veya URL yolunun değiştirilmesinden endişe duymuyorsanız etkinleştirin.

Diğer Smush Pro Seçenekleri

Tembel Yükleme , WP Smush Pro için varsayılan olarak etkindir. üzerinde tutmanızı öneririz. Yine, başka bir kaynaktan Tembel Yükleme kullanıyorsanız, yalnızca 1'i kullanmak istersiniz. Bu nedenle, nereden gelmesini istediğinizi seçin ve diğerlerini devre dışı bırakın.

WPMU DEV CDN , aynı zamanda WP Smush Pro'nun gücünün önemli bir özelliğidir. Varsayılan olarak, etkin değil. Bu, Hummingbird CDN deposundan ayrıdır, dolayısıyla bunu da etkinleştirmek isteyeceksiniz. Bunu yaptığınızda, Smush Pro panosuna gidin ve ardından ekranın solundaki menüden CDN'yi seçin (veya daha küçük bir görünüm alanındaysanız açılır menü).

Devre dışı bırakılmış seçenekler sayfası alacaksınız ve CDN'nin henüz aktif olmadığını belirten bir uyarı göreceksiniz . Aşağıda ayarlarınızı yapılandırın ve Etkinleştir'i tıklayın . Arka plan resimlerinin sunulmasını istediğimiz için tüm seçenekleri etkinleştirdik, büyük boyutlu olabilecek resimlerin kapsayıcılarına uygun hale getirilmesini istiyoruz, REST API'sinden geçmek işleri biraz kolaylaştırabilir ve en önemlisi, WebP dönüştürmeyi etkinleştirmek, ezilmiş görüntüleri bile çok daha küçük hale getirebilir. (WebP formatı hakkında bilginiz yoksa buradan okuyun.)

Ekranın alt kısmındaki Kaydet ve Etkinleştir'e tıkladığınızda, CDN'nin etkinleştirildiğine veya 30 dakika içinde etkinleştirileceğine dair bir mesaj alacaksınız. İkisini de yaşadık.

Ve sonra…hiçbir şey. Sen bittin! Kuruluma başlama açısından. Sitenizin olabildiğince optimize olması için hem Hummingbird Pro hem de WP Smush Pro'yu yapılandırmayı başardınız.

Bununla birlikte, kapıdan ne kadar optimize olduğumuzu görelim.

WP Smush ve Hummingbird'den sonra

Yapılan bu değişikliklerle hem Pingdom Tools'a hem de GTMetrix'e geri döndük.

Pingdom Araçları

Pingdom ile bu eklentileri kurarak ve etkinleştirerek önemli artışlar gördük. İlk yükleme süresini 935 milisaniyede 1 saniyenin altına düşürdük ve sayfanın toplam boyutu 1 mb'nin hemen altında neredeyse 1/3 oranında küçüldü.

GTMetrix

GTMetrix kullanarak, Pingdom ile benzer sonuçlar gördük.

0,7 saniyede yükleme süresinde 3,0'dan 2,3'e kadar kesin bir düşüş gördük. Ve sıkıştırma ve önbelleğe alma sayesinde toplam sayfa boyutu 1,57 mb (2,64 mb'den 1,07 mb'ye) düştü. Yine, yaklaşık bir saniyelik yükleme süresine ve sayfa boyutunda %40'lık bir azalmaya bakıyoruz.

Çözüm

Sonuç olarak, gördüğümüz sonuçlardan inanılmaz derecede mutluyuz. Eklentileri yüklemek ve etkinleştirmek kolay ve anlaşılırdır ve yükleme sürelerinden saniyelerin düştüğünü ve sayfa boyutunun neredeyse yarıya düştüğünü görüyoruz . Bu, özellikle 1 saniyenin altında bir portföy web sitesi yükleyebildiğinizde, kullanıcıların bir eklentiden beklediği performans türüdür. WPMU DEV'e kaydolmadıysanız, kesinlikle onlara bir şans vermelisiniz (ücretsiz deneme, hatırladınız mı?) ve Divi kullanıcısı değilseniz, bundan daha iyi bir zaman olamaz. Gördüğünüz gibi Smush, Hummingbird ve Divi kesinlikle en iyi arkadaşlar olabilir.

Sitenizi hızlandırmak için WP Smush ve Hummingbird için hangi ipuçlarınız ve püf noktalarınız var?

WPMU DEV tarafından makale özellikli resim