WordPress performansının% 70’e kadar nasıl hızlandırılması [Vaka çalışması]
Bu sefer size WordPress’teki web sitenizin hızını nasıl artıracağınız veya artıracağınız konusunda bazı basit teknikler göstermek istiyorum. Blogumun hızını birkaç gün önce test ettim, hızın korkunç olduğunu fark ettim. Google Page Hızı bana 6 verir. Web sitesinin hızının arama motorlarında popüler bir web sitesi oluşturmak için çok önemli olduğunu bilmelisiniz. Açıkçası Google, açıkça sezgisel olanlara dayanarak giderek daha fazla hareket ediyor: Kötü performans gösteren web siteleri kötü kullanıcı deneyimleri üretiyor ve kötü kullanıcı deneyimlerine sahip siteler arama sonuçlarında daha az promosyon almayı hak ediyor.
Web sitemizi Google sayfası hızıyla test etmeye başlayalım: Şimdilik bu blog için bir GooglePage Hız Raporu:
Görüntüleri optimize et
Üst yarı içerikteki nöbeti engelleyen JavaScript ve CSS’yi ortadan kaldırın
CSS
Önbellek tarayıcısından yararlanın
Küçük javascript
Bu blogu yavaşlatan sorunları çözmek için çalışmaya başladım.
Görüntüleri optimize et
Web sitesinin hızıyla ilgili temel sorun, görüntünün boyutundan gelir.
Web sitesinin yavaş olup olmadığını kontrol etmek için ilk şey, görüntünün boyutunu kontrol etmelisiniz.
Tarayıcınızdaki öğe kontrol aracını açmayı deneyin ve görüntüyü yüklemenin ne kadar sürdüğünü görün.
1.5 MB’lık bir resim yüklerseniz, web sitesinin yüklemeden önce bu resmi indirmesi gerekir. Web siteniz her yüklendiğinde indirmek için 10 resminiz varsa şimdi hesaplayın. 15MB herhangi bir zamanda indirilecek … bu, eklentiler ve araçlar aracılığıyla görüntü dosyası boyutlarını azaltmak için görüntüleri optimize ederek kastediyorum.
Önce EWWW Image Optimizer adlı bir eklenti yükledim
WordPress’teki görüntüler için dosya boyutlarını azaltın NextGen, Grand Flagallery ve diğerleri kayıpsız/kayıplı yöntem ve görüntü biçimi dönüşümünü kullanarak Bu eklenti iyi çalışıyor ve resim dosyası boyutumu azaltmaya çalışıyor. Ewww, bu işi yapmak zaman alıyor, bu yüzden gerçekten sevmiyorum.
Ayrıca, bu eklentinin temamızla çok uyumlu olmadığını düşünüyorum, bu yüzden bu eklentiyi sildim.
Sonra web sitelerimize ve temalarımıza sorunsuz görünen başka bir WP Smushit eklentisi yüklemeye karar verdim. Bu yüzden alıcılarımıza görüntülerini sıkıştırmak için bu eklentiyi kullanmalarını öneririm.
Şimdi bu videoyu sizinle paylaşmak istiyorum, bu eklentiyi nasıl yapılandırabileceğinizi görmek istiyorum: Eklenti yapılandırmasından sonra görüntünün% 10 -% 20 azaldığını görüyorum. Ancak, Google PagePeed testi, bloguma sadece birkaç puan verilen bir eklenti verilen çok fazla değişmedi. Sonra kendi resminizi sıkıştırmaya başlıyorum, mükemmel bir şey istiyorsanız, manuel olarak yapmanız gerekiyor. Bu yüzden bir görüntü aldım ve yeni dosyayı kaydettikten sonra Adobe Photoshop ile boyutunu değiştirdim. Dosyanın çok büyük olmadığını gördüm. Dosya boyutunu azaltmanın tek yolu, dosyaları şimdi birkaç araçla sıkıştırmaktır. Çok fazla çevrimiçi kompresörü test ettim, ancak sevdiğim tek şey CompressNowsaya’nın CompressNow olarak değiştirilen yeni görüntüler yüklemesi ve bu araç bunları birkaç küçük görüntü dosyasına (yaklaşık 10-70kb) sıkıştırıyor. DOĞRU! Web sitesini yeni resimlerle test edelim. Şimdi, sadece 6’ya sahip olduğumuzu varsayarsanız, bu iyi bir sonuçtur. Görüntü optimizasyonu ile 42 puan elde ettik. Deneyimlerim, herhangi bir web sitesini hızlandırmak için en önemli parametrenin bir medya dosyası olduğunu gösteriyor. Bu dosyalar indirmek için çok zaman gerektirir. Aşağıda bu makaleyi Google’dan nasıl optimize edeceğinizi okuyabilirsiniz: https://deelopers.google.com/speed/docs/insgins/optimizeimages JavaScript ve CSS’yi, google sayfası hızı tarafından verilen ikinci öneri oluşturmayı engelleyen JavaScript’i ve oluşturmayı engelleyen CSS’yi ortadan kaldırmak için ortadan kaldırın. Sonra bu sorunu okumaya başladım ve tüm JS ve CSS dosyalarımı altbilgiye çağırmam gerektiğini buldum. Biraz HTML şablonunuz varsa, sorunsuz bir şekilde yapabilirsiniz, WordPress temaları gibi diğer durumlarda bu daha karmaşıktır, çünkü bazı komut dosyalarını ve başlıkları çağırmanız gerekir. Yapabileceğim tek şey, blog sayfasında çağrılan ancak kullanılmayan bazı JavaScript ve CSS’yi silmektir. Bu blog, farklı ancak bu durumda birkaç JavaScript ve CSS dosyasını kullanan speküler duyarlı çok amaçlı iş temasında çalışır. , Eğer sadece bir blog olarak kullanırsam. Öyleyse bu dosyaların bazılarını silin çünkü başka özellikleri kullanmayacağım. Örneğim speküler ama diğer temalarla aynı şey. WordPress teması, functions.php dosyaları aracılığıyla JavaScript ve CSS dosyalarını çağırır. Bu dosyalar, kayıtlı olduktan sonra WP_ENQUEUE_STYLE, wp_enqueue_script tarafından çağrılır, ancak bu bizim çıkarlarımız değil. Spekülerdeki kuvveti içeren işlevler şunlardır:
Codellless_register_global_styles () {global $ cl_redata;wp_enqueue_style (‘stil’, get_stylesheet_uri ());wp_enqueue_style (‘bootstrap duyarlı’);#wp_enqueue_style (‘jQuery.fancybox’);#wp_enqueue_style (‘vektör-icons’);wp_enqueue_style (‘font-aawesome’);wp_enqueue_style (‘linecon’);#wp_enqueue_style (‘Steadysets’);# wp_enqueue_style (‘hoverex’);#wp_enqueue_style (‘JQuery.easy-Pie-Chart’);#wp_enqueue_style (‘iGangerous.swiper’);#if (redux_post_meta (‘cl_redata’, (int) codeles_get_post_id (), ‘fullscreen_post_style’) || $ cl_redata [‘fullscreen_section_active’]) # wp_enqueue_style (‘fullscreen_post_cs_cs_cs_cs_cs;} Bu satırlardan bazılarını daha önce gördüğünüz gibi, kullanmadığım vektör simgeleri veya jQuery.easy-pie-chart gibi bazı stilleri devre dışı bırakmak için “#” koydum.Bu dosyalar basit bloglarda kullanılmaz, ancak örneğin bir işletme web sitesi oluşturmanız gerekir.
Şimdi bazı JavaScript’i silelim: Codeless_register_global_scripts () {global $ cl_redata; wp_enqueue_script (‘bootstrap.min’); #wp_enqueue_script (‘jQuery-sease-1-1’); wp_enqueue_script (‘jQuery-sease-1-3’); wp_enqueue_script (‘jQuery.mobilemenu’); #wp_enqueue_script (‘izotop’); if ($ cl_redata [‘nicescroll’]) wp_enqueue_script (‘smoothScroll’); #wp_enqueue_script (‘jQuery.flexslider-min’); #wp_enqueue_script (‘JQuery.Fancybox’); #wp_enqueue_script (‘JQuery.Fancybox-Media’); # wp_enqueue_script (‘jQuery.Caroufredsel-6.1.0 paketlenmiş’); #wp_enqueue_script (‘jQuery.hoverEx’); #wp_enqueue_script (‘mediaElementPlayer’); #wp_enqueue_script (‘araç ipucu’); #wp_enqueue_script (‘jQuery.parallax’); wp_enqueue_script (‘ana’); wp_enqueue_script (‘yorum-açık’); wp_enqueue_script (‘yer tutucu’); #wp_enqueue_script (‘geri dönüş’); wp_enqueue_script (‘waypoints.min’); #wp_enqueue_script (‘iGangerous.swiper’); wp_enqueue_script (‘JQuery.Apear’); # wp_enqueue_script (‘modernizr’); #wp_enqueue_script (‘JQuery.Countto’); wp_enqueue_script (‘animasyonlar’); #wp_enqueue_script (‘arka plan-check.min’); #wp_enqueue_script (‘jQuery.fullPage’); #wp_enqueue_script (‘skrollr’); #wp_enqueue_script (‘Select2’); #wp_enqueue_script (‘jquery.slicknav.min’); #wp_enqueue_script (‘classie’); #wp_enqueue_script (‘mixitup’); # wp_enqueue_script (‘duvar’); #wp_enqueue_script (‘JQuery.OnePage’); wp_enqueue_script (‘Imageneveled’); #wp_enqueue_script (‘jQuery.infinitescroll’);
if (redux_post_meta (‘cl_redata’, (int) codeless_get_post_id (), ‘fullscreen_post_style’) || $ cl_redata [‘fullscreen_section_active’]) wp_enqueue_script (‘fullscreen_post’); } Şimdi, bu dosyalar tekrar yüklenmeyecek ve bu da yükleme süresini azaltacaktır. Speküler kullanan herkese öneriyorum – tema veya duyarlı çok yönlü bir iş kulesi | İş tabanlı çok yönlü WP teması, yukarıda yaptığım gibi JavaScript ve CSS dosyalarını devre dışı bırakmak için blog amaçları içindir. Sonuçlar: 100’den inanılmaz 60 puan ilk testten 54 puan elde ettim. Çok gururlu ama tam olarak keyif almıyor. İlk başta kolay görünüyor ama şimdi daha fazla puan almak ve web sitemi daha hızlı yapmak daha zor. Bu sorunu çözmek için bu tavsiyeyi vermek için Google Tarayıcı önbelleğinden yararlanın: https://gtmetrix.com/leavert browser-caching.html de yapabilirsiniz. Dosyanızı htaccess ile manuel olarak önbelleğe alabilirsiniz, ancak toplam önbellek kullandığım gibi bir WordPress teması kullanıyorsanız. Temamızla tamamen uyumlu olan bu eklentiyi yükledikten sonra, eklenti ayarlarında Gözat Önbellek sekmesini yapılandırmaya gidiyorum.
Basit bir yapılandırmadan sonra, aşağıdaki resimde olduğu gibi kendi yapılandırmamı kullanabilirsiniz, görebileceğiniz gibi “süresi dolmuş başlığı ayarlayın” seçimini “önbellek denetim başlığını ayarlayın”.
Tüm ayarları tıklıyorum ve ayrıca yeni talimatlarla yazılmış .htaccess dosyasını da kontrol ediyorum. Eklenti iyi çalışıyor gibi görünüyor, ancak yeni testten sonra herhangi bir gelişme görmedim. Bu garip, bu yüzden Apache mod_expires modülünde bir sorun olduğunu düşünüyorum. Şimdi kabuğumu açıyorum ve devre dışı bırakılan bu modülü kontrol ediyorum. Bu yüzden OS Debian’dan “A2Enmod Mod_Expires” komutuyla etkinleştirdim. Ortak bir platformda yayınlıyorsanız, yönetici sunucusundan bu modülü etkinleştirmesini isteyin.20 Küçük işletmeler için en iyi web barındırma (inceleme 2021)
Bu çok önemli! Şimdi site testinden sonra 7 puana ulaşıyorum. CSS azalır, JavaScript’i en aza indirir Bu kural, PageSpeed Insights, kaynaklarınızdan birinin boyutunun minifikasyon yoluyla azaltılabileceğini tespit ettiğinde geçerlidir. Yukarıdaki Google sayfası hız açıklaması, şimdi toplam W3 opsiyon önbelleğiyle kaynakları küçültmem gerekiyor. Minify sekmesini açtım ve oynamaya başladım ve test ettim. En iyi yapılandırmam:
