Site Hızı için Oluşturmayı Engelleyen JS ve CSS Nasıl Kaldırılır

Bir web sitesinin estetiği önemli olsa da içeriği ve yükleme hızları insanların geri gelmesini sağlar. WordPress, kullanıcılara kendi özel web sitelerini hızlı bir şekilde oluşturmaları için gelişmiş bir eklenti ve tema araç kutusu sağlar.

Ancak, bu temalar ve eklentilerin çalışması için JavaScript (JS) ve Basamaklı Stil Sayfaları (CSS) gerekir. WordPress bunları otomatik olarak komut dosyaları biçiminde oluşturur. Genellikle kötü optimize edilmişlerdir. Bu nedenle, web sitenizi önemli ölçüde yavaşlatabilirler.

Bu okuyucular için sinir bozucu olabilir. Bu nedenle, bu kılavuzda, oluşturmayı engelleyen bu komut dosyalarını nasıl bulacağınızı ve kaldıracağınızı keşfedeceğiz ve size WordPress web sitenizin yükleme hızlarını nasıl artıracağınızı göstereceğiz.

Oluşturmayı Engelleyen JS ve CSS Komut Dosyaları Nelerdir ve Neden Kötüler?

İnternetteki çoğu web sayfası üç temel bileşenden oluşur: JavaScript, CSS ve Köprü Metni Biçimlendirme Dilleri. HTML, temel görevi görürken JavaScript ve CSS buna gömülüdür. Ancak bu günlerde, HTML belgesine harici komut dosyalarına yapılan çağrıları gömmek daha gelenekseldir.

Bu komut dosyaları, web tarayıcınızın web sayfasını oluşturmak için kullandığı bir kuyrukta tutulur. Bir web sayfasının kaynak koduna bakmadan hangi komut dosyalarını kullandığını görmenin en kolay yolu, onu (Ctrl + S) web tarayıcınızdan indirmektir. Web tarayıcısı, web sayfasının kullandığı komut dosyalarının, resimlerin ve diğer dosyaların tümünü (veya çoğunu) içeren bir klasörle birlikte HTML belgesini indirecektir.

Web sayfanızın kuyruktan çağırması gereken karmaşık komut dosyaları ne kadar karmaşıksa, oluşturulması o kadar uzun sürer. Genellikle web tarayıcıları, web sayfalarını daha hızlı yüklemek için komut dosyaları ve resimler gibi web sayfası kaynaklarını yerel bir önbelleğe indirir. İstemci tarafındaki kullanıcılar JavaScript'i devre dışı bırakarak, önbellek boyutunu artırarak ve AdBlocker'ları kullanarak web sayfası oluşturma sürelerini hızlandırabilse de, bu ideal bir çözüm değildir. Sorumluluk web geliştiricisinde olmalıdır.

Şikayetler alıyorsanız veya web sitenizin içeriğini oluştururken sorun yaşadığını fark ettiyseniz, düzeltmek için çok geç değil.

Oluşturmayı Engelleyen Komut Dosyalarını Bulup Düzelterek Web Sitenizi Nasıl Optimize Edebilirsiniz?

Hangi komut dosyalarının sonlandırılacağına veya optimize edileceğine karar vermeden önce web sitenizin veya web sayfanızın hızını değerlendirmelisiniz. GTmetrix veya Google'ın PageSpeed ​​Insights gibi çevrimiçi platformlarını kullanabilirsiniz. Tek yapmanız gereken, test etmek istediğiniz web sitesinin veya web sayfasının URL'sini girmektir; araç, onu derecelendirecek ve başka bilgiler sağlayacaktır.

Ayrıca web sitenizi daha hızlı hale getirmek için kullanabileceğiniz denetimler önereceklerdir. Örneğin, web sayfanızda daha az öğe kullanmanızı veya kullanılmayan CSS ve JavaScript'i azaltmanızı önereceklerdir. GTmetrix, hangi komut dosyalarının optimize edilmesi gerektiğini size gösterecek kadar ileri gidecek.

Alternatif olarak, komut dosyalarınızın kullanım verilerini size göstermek için Chrome DevTools'un Kapsam Sekmesini kullanabilirsiniz. Hangi komut dosyalarının yetersiz olduğunu belirledikten sonra, bunları düzeltmek için birkaç şey yapabilirsiniz. Ancak, bu adımları başarıyla uygulamak için oldukça fazla kodlama becerisi gerektirecektir. En azından işlevsel JavaScript programlama hakkında temel bir anlayışa ihtiyacınız olacak.

Bir kodlama eğitimi kursuna (veya eğitim kampına) katılmak da becerilerinizi daha da geliştirmenize yardımcı olmak için iyi bir fikirdir. Ortalama olarak, bir kodlama eğitim kampının tamamlanması on beş hafta kadar sürebilir ve bu kulağa uzun gibi gelse de, modern dünyada temel kod okuryazarlığının ne kadar önemli bir beceri olduğunu düşündüğünüzde buna değer. Yine de, oluşturmayı engelleyen komut dosyalarını düzeltmenin ve web sayfanızın hızını artırmanın beş yolu vardır.

1. Yükleme sırasını optimize edin

Web sayfasının baş bölümü (</head></head> ) öğeleri önceden yüklemek için kullanılır. Web sayfanızın temeli buraya gitmelidir, bu nedenle web sayfanızı yüklediğinde kullanıcıyı beyaz bir ekran karşılamaz. Gömülü CSS iyi olsa da, JavaScript'i buraya yerleştirmekten kaçınmalısınız.

Baş bölümünü optimize ettikten sonra gövdeyi optimize etmeniz gerekir. Çoğu web tarayıcısı, web sayfalarını yukarıdan aşağıya doğru işler. Komut dosyalarına yapılan çağrıları önemlerine ve karmaşıklıklarına göre sıralamanız gerekir. Web sayfasının görüntülenmesi için çok önemli olmayan komut dosyalarına ve zaman alan karmaşık komut dosyalarına çağrılar yapmalısınız.

2. Kodu küçültün

Kodun küçültülmesi, yeniden yazılmasını ve beyaz boşluklar, yorumlar, virgüller, satır sonları vb. gibi gereksiz karakterlerin silinmesini içerir. Bu, kodu daha özlü ve kompakt hale getirir, bu da sonuçta komut dosyasının boyutunu azaltır ve web sayfanızın yükleme sürelerini artırır.

W3TC gibi eklentiler ve araçlar, temalarınızdaki JavaScript ve CSS'yi küçülten modüllere sahiptir. Alternatif olarak, JavaScript Minifier gibi ücretsiz bir çevrimiçi araçla komut dosyası kodunuzu manuel olarak küçültebilirsiniz.

3. JavaScript'in ertelenmiş ve eşzamansız yüklenmesini kullanın

Web tarayıcıları kodu yukarıdan aşağıya okur. Bir komut dosyası etiketiyle karşılaştıklarında, web sayfasını yüklemeyi durdurur ve komut dosyasını okurlar. Bu, oluşturmayı yavaşlatır.

Komut dosyasını web sayfasıyla paralel olarak yüklemek ve kullanılabilir olur olmaz yürütmek için async niteliğini kullanabilirsiniz. Alternatif olarak, betiklerin ayrıştırılmasını ertelemek için defer niteliğini kullanabilirsiniz. Bu, komut dosyasını web sayfasına paralel olarak da yükleyeceği, ancak yalnızca tarayıcı web sayfasını ayrıştırdığında çalıştıracağı anlamına gelir.

Görsel öğeleri oluşturmak ve görüntülemek için kullanılan komut dosyalarında zaman uyumsuz veya erteleme özniteliklerini kullanmamanızı öneririz. Bu özniteliklerin JavaScript anahtar sözcüğü eşdeğerleri, zaman uyumsuz ve bekleyen anahtar sözcüklerdir. Web sayfanızdaki HTML etiketlerini düzenlemeden Javascript'lerinizi daha eşzamansız olarak yüklemek için bunları kullanabilirsiniz.

4. JavaScript Görsel Öğelerini CSS3 ile Değiştirin

Geçmişte, CSS bugün olduğu kadar çok yönlü değildi. Örneğin, CSS 1.0 ve 2.0, temel kontroller ve kaydırıcılar gibi UI araçlarından yoksundu.

Sonra CSS 3 geldi. Yeni renkler, kutu gölgeleri, opaklık vb. sundu. JavaScript, karmaşık kullanıcı arabirimi kontrolleri eklemek için harika. Ancak Javascript, kaynaklarda CSS'den daha ağırdır.

Bu nedenle, aşırı miktarda JavaScript kullanmak web sitenizi önemli ölçüde yavaşlatır. Web sayfanızın, CSS'nin önceki sürümlerinin düştüğü yerde boşluğu almak için JavaScript kullandığını fark ederseniz, bunu değiştirmeli ve tüm gereksiz JavaScript'leri mümkün olduğunca CSS ile değiştirmelisiniz. Bu, web sayfalarının daha hızlı yüklenmesini sağlayacaktır.

5. Gereksiz Tüm Komut Dosyalarını Ortadan Kaldırın

JS ve CSS'nin amacı, işlevselliği web sayfalarına genişletmek ve HTML'nin yapamayacağı yerlere mantık eklemektir. Ancak HTML 5.3, bazı CSS ve JS işlemlerini gereksiz kılacak yeni etiketlerle geldi. Komut dosyaları yerine HTML kullanmak, doğal olarak web sayfalarınızın daha hızlı yüklenmesini sağlar.

Bu nedenle, web sitenizin hızını optimize etmenin en iyi yolu, az kullanılan tüm komut dosyalarını ortadan kaldırmaktır. Hangi komut dosyalarının tamamen gereksiz olduğunu analiz etmeniz ve bunları kaldırmanız gerekir. Yine, web sayfanızda en az kullanılan komut dosyalarını bulmak ve ardından bunları kaldırmak için Chrome DevTools'un Kapsam Sekmesini veya GTmetrix'i kullanabilirsiniz.

Tüm gereksiz işlevleri veya etiketleri kaldırdıktan sonra, işlevleri benzer olan komut dosyalarını birleştirebilirsiniz. Web sayfanızın kaynak kodunda nasıl hareket edeceğinizi zaten biliyorsanız, bu sizin için zor bir iş olmamalıdır. Ancak, web tasarımı konusunda deneyimli veya bilgili olmayan kullanıcılar endişelenmemelidir. WordPress, web sitenizdeki komut dosyalarını tanımlamanızı ve bunları çeşitli optimizasyon eklentileri kullanarak düzenlemenizi kolaylaştırır. Sıradakileri ele alacağız.

6. WordPress Web Sitenizi Optimize Etmek için Eklentileri Kullanma

Yine, WP web sitenizi optimize etmek için çalışan bir programlama bilgisine ihtiyacınız yoktur. Her ne kadar biraz deneyim yardımcı olsa da. Yine de, komut dosyası optimizasyonuna yönelik bir dizi eklenti var. Bazıları, kodu küçültmek, yükleme sırasını değiştirmek ve yeterince kullanılmayan komut dosyalarını daha verimli kod ve komut dosyalarıyla değiştirmek için AI kullanır.

Komut dosyası optimizasyonu için en iyi eklentilerden bazıları şunlardır:

• WP Rocket : Bu, web optimizasyonu için en popüler eklentilerden biridir. Hangi komut dosyalarının sorunlu olduğunu otomatik olarak algılayabilir ve bunları sizin için düzeltebilir. Hızlı önbelleğe alma, erteleme, sıkıştırma ve küçültme için kullanabilirsiniz.
• Autoptimize : Bu, gerekli olmayan komut dosyalarını erteleyebilir ve ortadan kaldırabilir, satır içi CSS'yi entegre edebilir ve komut dosyalarını, HTML'yi ve görüntüleri küçültebilir. Autoptimize, açık bir API ve gelişmiş seçenekler aracılığıyla son derece özelleştirilebilir.
• W3 Total Cache : Bu eklentinin kullanımı biraz çalışma gerektiriyor. Komut dosyalarını kaldırmadan veya düzenlemeden önce manuel olarak izlemeniz ve tanımlamanız gerekir. Çoğu durumda, bu eklenti WordPress paketinizde zaten mevcuttur.
• Async Javascript : WordPress tarafından sunulan açık kaynaklı bir eklenti. Oluşturmayı engelleyen JavaScript'i algılamanıza ve ardından ertelemenize veya eşzamansız olarak yüklemenize olanak tanır.

Öyleyse neden ilk etapta eklentileri önermedik? Ne yazık ki, bu eklentilerin bazıları size mal olacak. Örneğin, Autoptimize'ın maliyeti yıllık 49 ABD dolarıdır. Makul bir ücret olsa da, barındırma ve diğer uygulamalar ve eklentiler için zaten büyük miktarda para ödeyen kişiler için ideal olmayabilir.

Bununla birlikte, eklentileri kullanıp kullanmadığınızdan veya komut dosyalarını manuel olarak bulmanızdan bağımsız olarak, küçültme, eşzamansız yükleme ve yükleme sırası gibi kavramları anlamanız gerekir. Komut dosyalarınızdan birinin başarısız olması durumunda yükleme sorunlarını gidermenizi kolaylaştıracaktır.