Site Hızını Artırın: Oluşturmayı engelleyen JS ve CSS'yi kaldırın

WordPress, seçtiğiniz eklentiler ve temalarla özel bir web sitesi oluşturmanıza olanak tanır. Ancak bu, sitenizde yükleme sürelerini ve performansını yavaşlatan çok sayıda komut dosyası olduğu anlamına gelebilir. Bu komut dosyalarının hepsinin hemen yüklenmesi gerekmez ve bazıları ziyaretçilerin içeriğinizi olabildiğince çabuk görmesini gerçekten engelleyebilir.

Bu yabancı dosyalara, oluşturmayı engelleyen JavaScript ve CSS denir. Bu yazıda, bu oluşturmayı engelleyen kaynakların ne olduğunu açıklayacağız ve ardından oluşturmayı engelleyen kaynakları WordPress sitenizden nasıl kaldıracağınızı göstereceğiz. Başlayalım!

Oluşturmayı Engelleyen JavaScript ve CSS Nedir?

Bir web sitesi tarayıcıya yüklendiğinde, sıradaki her komut dosyasına çağrı gönderir. Genellikle, web sitesi tarayıcıda görünür olmadan önce bu sıranın boş olması gerekir. Web sitenizin tamamen yüklenmesini engelleyebilecek komut dizileri, oluşturmayı engelleyen JavaScript ve CSS dosyalarıdır.

Komut dosyası kuyruğu çok uzun olduğunda, ziyaretçilerin sitenize erişmesi biraz zaman alabilir. Çoğu zaman, bu komut dosyalarının birçoğu web sitesini hemen görüntülemek için gerekli değildir ve site tamamen yüklenene kadar çalışmak için kolayca bekleyebilir.

Başka bir deyişle, bu tür komut dosyaları, görüntüleyenlerinizin acil ihtiyaçlarına gerçekten katkıda bulunmadan web sayfalarınızı yavaşlatır. Görüntüleyen kişinin hemen göreceği şeyi içermeyen herhangi bir komut dosyası (genellikle 'ekranın üst kısmı' öğeleri olarak adlandırılır), sayfanın geri kalanı yüklenene kadar ertelenmelidir.

Oluşturmayı Engelleyen JavaScript ve CSS Web Sayfaları İçin Neden Kötü?

Oluşturmayı engelleyen JavaScript ve CSS komut dosyaları, web sayfalarınızı yavaşlatır ve bu pek çok nedenden dolayı kötüdür. Site hızı, genel kullanılabilirlik ve Arama Motoru Optimizasyonu (SEO) dahil olmak üzere WordPress web sitenizin birçok hayati noktasında rol oynar. Siteniz yavaş yüklendiğinde, ziyaretçi kaybetme olasılığınız artar ve arama motoru sonuçlarında üst sıralarda yer alma olasılığınız azalır.

Tabii ki, site hızı ve performansı, oluşturmayı engelleyen kaynaklardan daha fazla etkilenir. Bununla birlikte, bu, yükleme sürelerinde önemli bir fark yaratabilecek bir faktördür. Bir web sayfasındaki her kaynağın bayt kapladığını ve bunun daha fazlasının daha uzun indirme süreleriyle sonuçlanabileceğini unutmayın. Sitenizde ne kadar az ve hafif komut dosyası varsa o kadar iyidir. Sonuçta, yavaş bir sitenin işinizi olumsuz etkilemesine izin vermek istemezsiniz.

Genel olarak, genel hızı artırmak için web sitenizin kodunun olabildiğince temiz ve minimum düzeyde olmasını sağlamak en iyisidir. Ancak, her zaman bir miktar artık kod olacaktır. Varsayılan olarak, tarayıcılar, oluşturmayı engelleyen komut dosyaları da dahil olmak üzere her şeyi aynı anda yüklemeye çalışır.

Bir görüntüleyen bir sayfaya ilk geldiğinde sitenizin doğru görünmesi ve kullanılabilir olması için gerekli komut dosyalarını yüklediğinden emin olmak size kalmıştır. Ancak o zaman komut dosyalarının geri kalanı yüklenmelidir.

Oluşturmayı Engelleyen JavaScript ve CSS Nasıl Ortadan Kaldırılır

Oluşturmayı engelleyen komut dosyalarını ortadan kaldırabilmeniz için, hangi komut dosyalarının sorunlara neden olduğunu belirlemeniz gerekir. Bunu yapmak için Google'ın PageSpeed ​​Insights'ını kullanmanızı öneririz. URL'nizi girmeniz yeterlidir; Google size tam olarak hangi komut dosyalarının sayfa performansınızı yavaşlattığını söyleyecektir:

Oluşturmayı engelleyen JavaScript ve CSS'yi ortadan kaldırın altındaki sonuçlarda görünen tüm komut dosyalarının bir listesini yapın. Bunları manuel olarak ele almaya veya bir eklenti kullanmaya çalışsanız da, aşağıdaki düzeltmeleri uygularken ekstra dikkat etmek isteyeceğiniz komut dosyaları bunlardır.

Sitenizdeki oluşturmayı engelleyen komut dosyalarının sayısını azaltmak için birkaç en iyi uygulamayı izlemeniz gerekir:

• JavaScript ve CSS'nizi "küçültün". Bu, koddaki tüm fazladan boşlukları ve gereksiz yorumları kaldırmak anlamına gelir.
• JavaScript ve CSS'nizi birleştirin. Bunu yapmak için birkaç farklı .js ve .css dosyası alıp bunları birleştirmek isteyeceksiniz. İdeal olarak, bu türden yalnızca birkaç dosyanız olacaktır.
• JavaScript'in yüklenmesini erteleyin. JavaScript dosyalarını, sayfadaki diğer her şey hazır olana kadar yüklenmek üzere beklemeye zorlamak yararlı olabilir. JavaScript'i ertelemenin güvenilir bir yolu, eşzamansız yükleme kullanmaktır.

Bu ipuçlarını WordPress'te elle gerçekleştirmek zor olabilir, çünkü öne bakan birçok eklenti kendi JavaScript ve CSS dosyalarıyla birlikte gelir. Bir eklenti, sitenizin ön ucuna kolayca beş veya altı komut dosyası ekleyebilir. Bu dosyalar oldukça hızlı bir şekilde toplanabilir!

Neyse ki WordPress, ön yüze bakan tüm komut dosyalarını kaydetmek için tek bir birleşik filtre kullanır. Bu, tam olarak ne arayacağınızı bilmeseniz bile, gelen tüm JavaScript veya CSS dosyalarını belirleme ve işleme fırsatına sahip olduğunuz anlamına gelir. Tabii ki, bunu sıfırdan başlamak yerine bir eklenti ile başarmak çok daha kolaydır.

Oluşturmayı Engelleyen JavaScript ve CSS'yi Azaltan Eklentiler

Oluşturmayı engelleyen JavaScript ve CSS'yi kaldırarak sitenizi optimize etmenize yardımcı olabilecek birkaç WordPress eklentisi vardır. Bu bölümde, dört popüler seçeneğe bakacağız.

1. WP Roketi

WP Rocket, CSS ve JavaScript'in küçültülmesi, resimlerin geç yüklenmesi, uzak JavaScript isteklerinin ertelenmesi ve daha fazlası gibi görevlerle site optimizasyonuna yardımcı olur. Optimizasyon eklentilerinin 'İsviçre Çakısı'.

Bu eklentiyi kullanmanın en büyük avantajlarından biri kolay kurulum sürecidir. Bununla birlikte, potansiyel bir dezavantaj, kullanıcı arayüzüdür. Eklenti, WordPress kontrol panelinizde alışık olabileceğinizden farklı bir deneyim yaratır. Bazı uzun süreli kullanıcılar bu arayüz değişikliğini beğenmeyebilir. Yine de, eklentinin gerçek işlevselliği birinci sınıf olmaya devam ediyor.

WordPress Eklenti Dizininde WP Rocket için alabileceğiniz birkaç ücretsiz ekstra var. Bununla birlikte, temel eklentinin kendisi, bir web sitesi ve bir yıllık destek için yılda 49 ABD Doları olarak fiyatlandırılır ve ek katmanlar daha fazla seçenek sunar.

2. Otomatik optimize et

Autoptimize, PageSpeed ​​Insights gibi öneri araçlarının getirdiği sorunları ele almak için özel olarak oluşturulmuştur. Eklentiyi web siteniz için yapılandırmanıza olanak tanıyan tüm ayarlar, WordPress panonuzdaki yeni bir menüde yer alacaktır.

Autoptimize, betikleri küçültme ve önbelleğe alma gibi tüm temel optimizasyon görevlerini kapsar. Eşsiz bir özellik de görüntüleri optimize edip WebP formatına dönüştürebilmesidir. Bu araç, mükemmel genel değerlendirmelere sahiptir, ancak yapılandırmasının biraz karmaşık olabileceğini aklınızda bulundurmak isteyeceksiniz.

Eklentinin kendisi ücretsiz olsa da, yapılandırmasına yardımcı olması için geliştiricilerden iki paketten birini satın alabilirsiniz. Yaklaşık 165 $ (149 €) fiyatlı özel bir yapılandırma planı var. Ayrıca yaklaşık 667 $ (599 €) karşılığında web sitenizin tamamen uygulamalı, profesyonel bir incelemesini ve uzman eklenti yapılandırmasını alabilirsiniz.

3. JCH Optimizasyonu

JCH Optimize, sayfa yükleme sürenizi iyileştirmeye yardımcı olacak bazı benzersiz araçlar da sunar. Örneğin, sayfalarınızı yüklemek için gereken HTTP isteklerini azaltabilir ve bu sayfaların boyutunu da düşürebilir. Bu, sunucu yükünün azalmasına ve bant genişliği gereksinimlerinin azalmasına neden olur.

JCH Optimize'ın bir başka benzersiz özelliği de Sprite Oluşturucu'sudur. Bu, arka plan resimlerini 'hareketli görüntüler'de birleştirir, bu nedenle onları bir tarayıcıya yüklemek için daha az HTTP isteği gerekir. Bununla birlikte, bu eklentinin dezavantajlarından biri, dik öğrenme eğrisi olabilir. Hatalardan kaçınmak için çoğu kullanıcının eklentiyi doğru şekilde yapılandırdığından emin olmak için destek belgelerine güvenmesi gerekir.

Bununla birlikte, eklentinin birçok beş yıldızlı incelemesi ve 10.000'den fazla aktif kurulumu var. Fiyat açısından, eklentinin ücretsiz bir sürümü mevcuttur. Bununla birlikte, Optimize Image API gibi desteğe ve gelişmiş özelliklere erişmek istiyorsanız, bir abonelik satın almanız gerekir. Bunlar, altı aylık destek ve API erişimi için 29 dolardan başlıyor.

4. Hız Arttırıcı Paket

Speed ​​Booster Pack, CSS ve JavaScript optimizasyonu, yavaş yükleme ve dağınıklığı giderme özelliği sunar. Optimocha'daki geliştiriciler, eklentiyi sürekli gelişen bir kod tabanıyla güncel tutar, böylece her zaman en son yöntemleri kullanacağınızı bilirsiniz. Darboğazları çözmek için çalışan yerleşik bir WooCommerce optimizasyon özelliği de vardır.

Speed ​​Booster Pack kullanmanın faydalarından biri, İçerik Dağıtım Ağı (CDN) entegrasyon özelliğine sahip olmasıdır. Bu, eklenti ile optimize ederken, seçtiğiniz CDN'yi WordPress'te kullanmayı kolaylaştırır. Bu eklentinin dezavantajı, düzgün şekilde yapılandırılması için izlemeniz gerekebilecek deneme yanılma sürecinde yatmaktadır.

Ücretsiz eklentiyle birlikte gitmek için bir hizmet seçeneği olduğunu da belirtmekte fayda var. Autoptimize'a çok benzeyen geliştiriciler, eklentiyi benzersiz web sitenize uyacak şekilde yapılandırmak için uygulamalı, profesyonel bir yaklaşım sağlamak için çeşitli seçenekler sunar.

WP Engine ile Sitenizin Hızını Artırın

Sitenizin hızını artırma yaklaşımınız ne olursa olsun, size yardımcı olmak için buradayız. Web sitenizi test etmek için bir Hız Aracımız ve optimize edilmiş bir deneyime giden yolda size yardımcı olacak en iyi geliştirici kaynaklarına sahibiz.
Aslında Dijital Deneyim Platformumuz (DXP), daha iyi bir WordPress web sitesi oluşturmaya başlamak için harika bir yerdir. Fiyatlandırma planlarımıza bugün göz atın!