Render Engelleme JS & amp;Site hızı için CSS
Web sitesinin estetiği önemli olsa da, yükleme içeriği ve hızı insanları tekrar geri getiriyor. WordPress, kullanıcılara hızlı bir şekilde kendi özel web sitelerini oluşturmak için bir eklenti araç kutusu ve gelişmiş tema sağlar. Ancak, tema ve eklenti, işlev görmesi için JavaScript (JS) ve Basamaklı Stil Sayfaları (CSS) gerektirir. WordPress, onu bir komut dosyası dosyası şeklinde otomatik olarak yapar. Genellikle daha az optimize edilirler. Böylece, web sitenizi yavaşça yavaşlatabilirler. Bu okuyucu için hayal kırıklığına uğrayabilir. Yani, bu kılavuzda, bu render engelleme komut dosyasını nasıl bulacağımızı ve sileceğimizi keşfedeceğiz ve WordPress web sitenizi yükleme hızını nasıl artıracağınızı göstereceğiz.
Oluşturmayı engelleyen JS ve CSS komut dosyası nedir ve neden bu kötü?
Web sayfanızı kuyruğundan ne kadar karmaşık hale getirirse, o kadar uzun süre oluşturmak için gereken süre daha uzun. Genellikle, web tarayıcıları web sayfalarını daha hızlı yüklemek için yerel önbellekteki komut dosyaları ve resimler gibi web sayfası kaynaklarını indirir. İstemci tarafındaki kullanıcılar, JavaScript’i devre dışı bırakarak, önbellek boyutunu artırarak ve adblockers kullanarak web sayfalarının oluşturma süresini hızlandırabilirken, bu ideal bir çözüm değildir. Sorumluluk bir web geliştiricisinde olmalıdır. Şikayetler alırsanız veya web sitenizin içeriğini oluştururken sorunları olduğunu biliyorsanız, düzeltmek için çok geç değildir. Hangi komut dosyasının durdurulacağına veya optimize edileceğine karar vermeden önce oluşturma engelleme komut dosyasını bulan ve geliştirerek web sitenizi nasıl optimize edersiniz, değerlendirmelisiniz. Web sitesinin veya web sayfanızın hızı. GTMetrix veya Google’ın PagesPeed Insights gibi çevrimiçi bir platform kullanabilirsiniz. Yapmanız gereken tek şey, test etmek istediğiniz web sitesinin veya web sayfasının web sitesine girmek ve bu araç onu yargılayacak ve başka bilgiler sağlayacaktır. Ayrıca, web sitenizi daha hızlı oluşturmak için kullanabileceğiniz bir denetim önerecektir. Örneğin, web sayfalarını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 gösterecektir.
Veya komut dosyası kullanım verilerinizi göstermek için Chrome Devtools Kapsamı sekmesini kullanabilirsiniz. Hangi komut dosyalarının daha az optimal olduğunu belirledikten sonra, düzeltmek için birkaç şey yapabilirsiniz. Bununla birlikte, bu adımlar başarılı bir şekilde uygulamak için küçük bir kodlama becerisi gerektirecektir. En azından fonksiyonel JavaScript programlama hakkında temel bir anlayışa ihtiyacınız var. Kodlama öğretici kursuna (veya bootcamp) katılmak da becerilerinizi geliştirmeye yardımcı olmak için iyi bir fikirdir. Ortalama olarak, kodlama bootcamp tamamlanması on beş haftaya kadar sürebilir ve bu uzun bir süre gibi görünse de, temel kod okuryazarlığının modern dünyada sahip olması gereken önemli bir beceri olduğunu düşündüğünüzde çok değerlidir. Ancak, oluşturma engelleme komut dosyasını geliştirmenin ve web sayfalarınızın hızını artırmanın beş yolu. Kafanın yüklenmesi sırasını optimize edin ( ) Web sayfaları ön güçlendirme öğeleri için kullanılır. Web sayfalarınızın temeli burada olmalı, bu nedenle beyaz ekran, web sayfalarınızı yüklediklerinde kullanıcıları karşılamıyor. Sabitlenmiş CSS iyi olsa da, JavaScript’in yerleştirilmesinden kaçınmalısınız. Kafayı optimize ettikten sonra, vücudu optimize etmeniz gerekir. Çoğu web tarayıcısı web sayfalarını yukarıdan aşağıya oluşturur. İlgi alanlarına ve karmaşıklıklarına göre senaryoya çağrı sipariş etmeniz gerekir. Son web sayfalarını zaman gerektiren karmaşık komut dosyalarıyla birlikte oluşturmak için önemli olmayan komut dosyasını aramalısınız. 2. Yeniden yazma ve boşluklar, yorumlar, virgül duraklamaları vb. Gibi gereksiz karakter kaldırma içeren kodu azaltmak için kodu azaltmak için kod. Bu, kodu daha özlü ve özlü hale getirir, bu da nihayetinde komut dosyasının boyutunu azaltır ve web sayfalarınızın yükleme süresini artırır. W3TC gibi eklentiler ve araçlar, temanızdaki JavaScript ve CSS’yi küçülten modüllere sahiptir. Veya, komut dosyası kodunu JavaScript Minifier gibi ücretsiz çevrimiçi araçlarla manuel olarak azaltabilirsiniz. Asma JavaScript yüklemesini kullanın ve web tarayıcısı eşzamansız tarayıcı kodu yukarıdan aşağıya okur. Komut dosyası etiketlerini bulduklarında, web sayfalarını yüklemeyi ve dosya komut dosyalarını okumayı bırakırlar. Bu yavaşlar.
Komut dosyasını bir web sayfasına paralel olarak yüklemek için Async özniteliğini kullanabilir ve kullanılabilir olduktan hemen sonra çalıştırabilirsiniz. Veya komut dosyasının ayrışmasını geciktirmek için DeFer özelliğini kullanabilirsiniz. Bu, bir web sayfasına sahip paralel bir komut dosyası içereceği, ancak yalnızca tarayıcı bir web sayfası taşıdığında yürüteceği anlamına gelir. Görsel öğeleri oluşturmak ve görüntülemek için kullanılan komut dosyasında ASHNC veya erteleme özniteliklerini kullanmamayı öneririz. Bu özniteliğe eşdeğer JavaScript anahtar kelimeleri eşzamanlı anahtar kelimelerdir ve bekler. Web sayfanızda HTML etiketlerini düzenlemeden JavaScript’inizi daha eşsiz yüklemek için kullanabilirsiniz.
4. Görsel JavaScript öğesini CSS3 ile değiştirin Geçmişte, CSS bugün olduğu gibi çok yönlü değildir. Örneğin, CSS 1.0 ve 2.0’ın temel kontrol ve kayar çubuk gibi UI araçları yoktur. Sonra CSS 3 gelir. Bu yeni renkler, gölge kutuları, opaklık vb. JavaScript, karmaşık kullanıcı arayüzü kontrolü eklemek için çok iyidir. Ancak, JavaScript kaynaklar için CSS’den daha ağırdır. Bu nedenle, JavaScript’i aşırı miktarlarda kullanmak web sitenizi yavaşça yavaşlatacaktır. Web sayfanızın önceki CSS sürümünün başarısız olduğu eksikliklerin üstesinden gelmek için JavaScript kullandığını görüyorsanız, bunu değiştirmeli ve tüm gereksiz JavaScript’i CSS ile değiştirmelisiniz – yapabilirseniz. Bu, web sayfalarının daha hızlı yüklenmesine izin verecektir. JS ve CSS hedeflerine ihtiyaç duymayan tüm komut dosyalarını ortadan kaldırın, işlevselliği web sayfalarına genişletmek ve HTML’nin yapamayacağı mantık eklemektir. Bununla birlikte, HTML 5.3, bazı CSS ve JS işlemlerinin gerekli olmasını sağlayacak yeni etiketlerle birlikte gelir. Doğal komut dosyaları yerine html kullanmak web sayfalarınızı daha hızlı yükler. Bu nedenle, web sitenizin hızını optimize etmenin en iyi yolu, daha az kullanılan tüm komut dosyalarını ortadan kaldırmaktır. Hangi komut dosyalarının gerçekten ihtiyacı olmadığını analiz etmelisiniz ve silmelisiniz. Bir kez daha, web sayfanızda en az kullanılan komut dosyasını bulmak ve daha sonra silmek için Chrome Devtools veya GTMetrix Kapsam sekmesini kullanabilirsiniz.
Tüm gereksiz işlevleri veya etiketleri sildikten sonra, benzer işlevleri birleştirebilirsiniz. Web sayfası kaynak kodunuzu nasıl ayarlayacağınızı zaten biliyorsanız, bu sizin için zor bir iş olmamalıdır. Ancak, web tasarımında deneyimsiz veya bilgili kullanıcıların endişelenmesine gerek yoktur. WordPress, web sitenizdeki komut dosyalarını tanımlamanızı ve çeşitli optimizasyon eklentilerini kullanarak bunları düzenlemenizi kolaylaştırır. Daha sonra tartışacağız. 6. WordPress sitenizi bir kez daha optimize etmek için bir eklenti kullanarak, WP web sitenizi optimize etmek için programlama bilgisine ihtiyacınız yoktur. Bazı deneyimler yardımcı olacaktır. Ancak, komut dosyalarını optimize etmeye yönelik çeşitli eklentiler vardır. Bazıları kodu en aza indirmek, yükleme sırasını değiştirmek ve daha az kullanılan komut dosyasını daha verimli kodlar ve komut dosyalarıyla değiştirmek için AI kullanır. Komut dosyalarını optimize etmek için en iyi eklentilerden bazıları şunları içerir: WP Rocket: Bu, web optimizasyonu için en popüler eklentilerden biridir. Hangi komut dosyalarının sorunlu olduğunu otomatik olarak tespit edebilir ve sizin için düzeltebilir. Hızlı önbellek, kusurlu, sıkıştırma ve minifikasyon için kullanabilirsiniz.
AutoPtimize: Bu, gereksiz komut dosyalarını geciktirebilir ve ortadan kaldırabilir, bir CSS satırını entegre edebilir ve komut dosyasını, HTML ve görüntüleri azaltabilir. Otomatik optimizasyon açık ateş ve gelişmiş seçeneklerle ayarlanabilir.
W3 Total Cache: Bu eklenti kullanmak için küçük bir iş gerektirir. Silmeden veya düzenlemeden önce komut dosyasını manuel olarak izlemeniz ve tanımlamanız gerekir. Çoğu durumda, bu eklenti WordPress paketinizle kullanılabilir. Async JavaScript: WordPress tarafından sunulan açık kaynaklı eklentiler. Bu, oluşturmayı engelleyen ve daha sonra erteleyen veya eşzamansız yükleyen JavaScript’i tespit etmenizi sağlar.
Öyleyse neden sadece eklentileri tavsiye etmiyoruz? Ne yazık ki, bu eklentilerin bazıları şarj edilecektir. Örneğin, AutoPtimize yılda 49 $ maliyeti. Maliyet mantıklı olsa da, barındırma ve uygulamalar ve diğer eklentiler için çok para ödemiş insanlar için ideal olmayabilir. Ancak, eklentiler kullanıp kullanmadığınıza veya komut dosyalarını manuel olarak bulup bulmayacağınıza bakılmaksızın, minifikasyon, eşzamansız yükleme ve yükleme sırası gibi kavramları anlamanız gerekir. Bu, komut dosyalarınızdan biri başarısız olursa herhangi bir yükleme problemini çözmenizi kolaylaştıracaktır.
