Oluşturmayı Önleyen Javascript ve CSS Kodlarını Kaldırın

WPCİNWordpress Hızlandırma17 Yorum

Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın. Sanırım bu uyarıyı hemen hemen herkes biliyordur. WordPress sitenizi Google PageSpeed üzerinde test ettiyseniz JS ve CSS dosyalarınızı üst bölümden kaldırmanızı ister. Bu makalede, Google PageSpeed ​​puanınızı artırmak için oluşturmayı engelleyen JavaScript’leri ve CSS’leri nasıl kolayca kaldırabileceğimizi anlatacağız.

“analytics.js” için “tarayıcı önbellekleme özelliğinden yararlanın” uyarısına çözüm için PageSpeed Analytics.js Sorunu Çözümü adlı makaleyi inceleyebilirsiniz.

Oluşturmayı Önleyen Javascript ve CSS Kodları Hatası Neden Olur?

Oluşturmayı Önleyen Javascript ve Css Kodlarını Kaldırın

Oluşturmayı Önleyen Javascript ve Css Kodlarını Kaldırın

Her WordPress sitesinde, web sitenizin header kısmına JavaScript ve CSS dosyaları ekleyen bir tema ve eklentileri bulunur. Bu komut dosyaları, sitenizin sayfa yükleme süresini artırabilir ve sayfanın oluşturulmasını da engelleyebilir.

Bir tarayıcı, kalan HTML’yi sayfaya yüklemeden önce bu komut dosyalarını ve CSS’yi yüklemelidir. Bu, siteye giren ziyaretçilerin sayfayı görmek için birkaç milisaniye daha beklemesi gerekeceği anlamına gelir.

Google PageSpeed ​​skorunu 100’e çıkarmaya çalışan web sitesi sahipleri, bu puanı elde etmek için bu sorunu düzeltmelidir.

Google Pagespeed nedir?

Google PageSpeed ​​Insights, sitesi sahiplerinin web sitelerini optimize etmesine ve test etmesine yardımcı olmak için Google tarafından oluşturulan online bir araçtır. Bu araç, web sitenizi hız için Google’ın yönergelerine uygun olarak test eder ve sitenizin sayfa yükleme süresini artırmak için öneriler sunar.

Sitenizin geçtiği kural sayısına göre bir puan gösterir. Bakalım bizim puanımız kaçmış:

WPCin Google PageSpeed Skoru

WPCin Google PageSpeed Skoru

Mobil ve masaüstü hız skorumuz 99 çıktı. Burada eklemek istediğim bir durum var. Her test edişinizde bir kaç puan farklı sonuçlar çıkabilir. Bu sizin sunucu yanıt hızınız ile doğru orantılır. Örneğin, paylaşımlı bir hosting kullanıyorsanız ilk testinizde sunucu 250ms de cevap verir, bir başka testinizde 500ms de cevap verebilir.

Gerçekten Google PageSpeed ​​Puanını 100 yapmaya gerek var mı?

Bize göre illa %100 yapma zorunluluğu diye birşey yok. Eğer yapabiliyorsanız yapın ama bunu yaparken sitenize zarar veriyor, sitenizin düzenini bozuyorsanız yaptığınız değişiklikleri hemen geri alın.

Google PageSpeed ​​bilgilerinin amacı, web sitenizin hızını ve performansını artırmak için yönergeler sağlamaktır. Bu kurallara sıkı sıkıya uymanız gerekli değildir.

Hız, Google’ın web sitenizi nasıl derecelendireceğini belirlemesine yardımcı olan birçok SEO faktörlerinden yalnızca biridir. Hızın çok önemli olmasının nedeni, sitenizdeki kullanıcı deneyimini geliştirmesidir. Arama motorları tarafından hızlı index almanızı sağladığını da eklemek lazım.

Daha iyi bir kullanıcı deneyimi, yalnızca hızdan daha fazlasını gerektirir. Ayrıca yararlı bilgiler, daha iyi kullanıcı arabirimi ve ilgi çekici içerik, metin, resim ve videolar sunmanız gerekir.

Amacınız mükemmel bir kullanıcı deneyimi sunan hızlı bir web sitesi oluşturmak olmalıdır.

Bunu söyleyerek, oluşturmayı önleyen JavaScript ve CSS kodlarını WordPress’de düzeltmek için neler yapabileceğinize bir göz atalım.

1. W3 Total Cache ile Oluşturmayı Engelleyen Javascript’leri ve CSS’leri Kaldırma

Bu yöntem WordPress sitesinde halihazırda W3 Total Cache eklentisi kullanan kullanıcılar için önerilir.

Eğer kurulu değil ise önce, W3 Total Cache eklentisini kurmanız ve etkinleştirmeniz gerekecektir.

Sonra Performance » General Settings sayfasını ziyaret etmeniz ve Minify bölümüne gelmeniz gerekir.

W3 Total Cache Minify Ayarları

W3 Total Cache Minify Ayarları

Öncelikle, Minify seçeneğinin yanındaki ‘Enable‘ (Etkinleştir) seçeneğini işaretlemeniz ve ardından minify mode seçeneği için ‘Manual‘ (El ile) seçeneğini seçmeniz gerekir.

Ayarlarınızı kaydetmek için Save All Settings düğmesine tıklayın.

Şimdi oluşturmayı engelleyen js ve css dosyalarının url bağlantılarını öğrenmemiz lazım. Google PageSpeed ​​Insights aracından engelleme oluşturan tüm komut dosyalarının ve stil sayfalarının URL’lerini alabilirsiniz.

Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın‘ yazan önerilere göre ‘Nasıl düzeltileceğini göster‘ seçeneğini tıklayın.

Google PageSpeed JS ve CSS Düzeltme Uyarısı

Google PageSpeed JS ve CSS Düzeltme Uyarısı

Gördüğünüz gibi JS ve CSS kodlarını düzeltmemizi istiyor. Öncelikle JS dosyasının bağlantısını kopyalayın.

Şimdi WordPress admin alanınızda W3 Total Cache gidin ve Performance » Minify sayfasına gidin gidin .

Öncelikle küçültülmesini istediğiniz JavaScript dosyalarını eklemeniz gerekir. JS bölümüne gidin ve ardından ‘Operations in areas‘ altında, <head> bölümü için ‘Non-blacking using “async”‘ seçeneğini ayarlayın.

W3 Total Cache Javascript Ayarları

W3 Total Cache Javascript Ayarları

Ardından ‘Add a script‘ düğmesini tıklamanız ve Google PageSpeed ​​aracından kopyaladığınız komut dosyası URL’lerini eklemeni  gerekir.

İşiniz bittiğinde, CSS bölümüne gidin ve ‘Add a style sheet‘ düğmesini tıklayın. Şimdi Google PageSpeed ​​aracından kopyaladığınız stil sayfası URL’lerini eklemeye başlayın.

W3 Total Cache Minify CSS Ayarları

W3 Total Cache Minify CSS Ayarları

Şimdi ayarlarınızı kaydetmek için ‘Save All Settings & Purge Caches‘ düğmesini tıklayın.

Google PageSpeed ​​aracını ziyaret edin ve web sitenizi tekrar test edin. Hepsi bu kadar. Eğer sitenizde bir bozulma meydana geldiyse veya çalışmayan bir eklentiniz var ise işlemleri geri alın. Bu işlemleri tek tek, manuel olarak ve deneme-yanılma yöntemiyle yapmanız sizin faydanıza olacaktır.

2. Autoptimize ile Oluşturmayı Önleyen Javascript ve CSS Kodlarını Düzeltmek

Bu yöntem çok basittir. Yapmanız gereken ilk şey Autoptimize eklentisini yükleyip etkinleştirmek.

Etkinleştirme sonrasında, eklenti ayarlarını yapılandırmak için Ayarlar » Autoptimize sekmesini ziyaret etmeniz ve Gelişmiş Ayarları tıklamanız gerekiyor. Merak etmeyin eklenti dili Türkçe olduğu için işinizi kolayca yapabilirsiniz.

Şimdi Autoptimize ayarları nasıl nasıl olmalı bir bakalım. Öncelikle ayarları nasıl yapmanız gerektiğine dair fotoğrafı koyuyoruz. Daha sonra ayarlar hakkında detaylı açıklama yapacağız.

Autoptimize Eklenti Ayarları

Autoptimize Eklenti Ayarları

Not: Eğer yukarıda ki ayarları yaptığınızda sitenizde bir bozulma oluyorsa derhal seçenekleri kapatın. Oluşabilecek sorunlardan biz sorumlu değiliz. Daha öncesinde mutlaka yedek alın! (Biraz gözünü korkutalım.) Aşağıda bilmeniz gereken seçenekleri açıklayacağız.

JavaScript kodunu optimize et: JS dosyalarınızı sıkıştırır.

Satıriçi JS kodlarını toparla: Body içerisinde ki JS kodlarını toparlar.

Autoptimize’dan hariç tutulacak script’ler: WordPress’in temel js dosyalarını hariç tutar. Optimize edilmesini istemediğiniz dosyaları buraya ekleyebilirsiniz.

“Try-catch” sarma özelliğini ekle: Açıklamada belirttiği gibi, bir JavaScript hatası yüzünden script’leriniz bozuluyorsa, bunu etkinleştirin.

CSS kodunu optimize et: CSS dosyalarını sıkıştırır.

Satır içi CSS’i toparla: Satıriçi CSS kodlarını tek bir yerde toparlamasını istiyorsanız bunu işaretleyin.

CSS’i “inline” olarak düzenle ve ertele (defer): Bu seçenek “görünür içeriğe öncelik verin” uyarısı alanlar için geçerli. Yani tüm CSS yüklemek yerine ilk olarak sayfanın üst alanı için aktif kullanılan CSS kodlarını yüklemenizi sağlar. Bu kutucuğu işaretlediğiniz de açılan bölüme “Critical CSS” dediğimiz kodları eklemelisiniz. Eğer kendinizden emin iseniz Critical CSS oluşturma sitesine gidin ve oluşturduğunuz kodları buraya ekleyin. Çoğu kullanıcı bunu yapamayacağı için bu seçeneği işaretlemiyorum. Eğer bu konuda yardım almak isterseniz bizimle iletişim kurabilirsiniz. Ama bu işlemi yapmak için başka bir araç olarak ve benimde tavsiye ettiğim, WP Rocket eklentisi de kullanabilirsiniz.

Ayarları bu şekilde yaptıktan sonra Değişiklikleri Kaydet ve Önbelleği Temizle butonuna tıklayın. Şimdi sitenizi ziyaret edin eğer bir bozulma varsa seçenekleri devredışı bırakın. Eğer bir sıkıntı yok ise Google Pagespeed ile test yapın. Site açılışınız hızlanmış olacaktır.

3. Manuel Olarak JS ve CSS Dosyalarını Footer’a Taşımak

Javascript vs CSS kodlarını footer.php taşımanız site açılış hızınızda önemli bir artışa sebep olacaktır. Ayrıca “oluşturmayı engelleyen javascriptleri ve cssleri kaldırın” uyarısını da almazsınız.

Fakat WordPress’in alt yapısını oluşturan bu dosyaları footer.php taşımanız web sitenizin düzeninde bozulmalara, eklentilerin çalışmamasına sebep olabilir. Bu yüzden bu işlemi yaparken 2. yöntemi uygulamanızı tavsiye ediyoruz. Bu yöntem istediğiniz JS’leri taşımanızı sağlar. Böylece sitenizin açılışında bozulmalara sebep olacak durumları engellemiş olursunuz.

1. Yöntem: Bütün JS’leri Footer.php Taşımak

Javascript kodlarınızı websitenizin alt bölümüne yani footer.php taşımak için kullanacağımız bir kod dizilimi mevcut. Bazı eklentilerinizin ya da temanızın bazı fonksiyonlarının çalışmayabileceğini unutmayınız.

Aşağıda ki kodu temanızın functions.php dosyasına ekleyin:

Eğer temanızda bir bozulma, eklentilerinizde bir sorun ortaya çıkar ise lütfen işlemleri geri alın.

2. Yöntem: Sizin Belirlediğiniz JS’leri ve CSS’leri Footer.php Taşıma

Bu yöntemi uygulayarak, deneme yanılma yöntemiyle, tek tek belirlediğiniz kodları ekleyin.

Böylelikle WordPress sitenizin işlevinde bir bozulma olduğunda, hangi kodun buna sebep olduğunu anlar, o kodun her zaman header.php içerisinde bulunması gerektiğini anlamış olursunuz.

Burada wp_enqueue_script ve wp_enqueue_style fonksiyonunu kullanacağız. İlk kodumuz JS dosyalarını footer’a taşımak için kullanacağız.

JS dosyaları için örnek verelim:(Kodu temanızın functions.php dosyasına eklemelisiniz.)

Peki CSS dosyaları için nasıl kullanabiliriz:(Kodu temanızın functions.php dosyasına eklemelisiniz.)

JS ve CSS dosyalarını birlikte kullanalım:(Kodu temanızın functions.php dosyasına eklemelisiniz.)

Belirli bir eklentiye ait CSS dosyasını footer’a taşıyın (örnektir):

Eklentiye ait kısa adını, web sitenizin kaynak kodlarına(view-source:siteadresi.com) baktığınızda görebilirsiniz.

Buraya Dikkat !!!

Eklentilerin ve WordPress temalarının JavaScript ve CSS’yi nasıl kullandığına bağlı olarak, tüm oluşturmayı önleyen JavaScript ve CSS sorunlarını tamamen çözmek oldukça zor olabilir.

Lütfen web siteniz de herhangi bir sorun ya da hata ile karşılaşırsanız ayarlarınızı geri almayı unutmayın.

Yukarıdaki araçlar yardımcı olabilse de, eklentileriniz düzgün çalışması için farklı önceliğe sahip belirli komut dosyaları gerektirebilir. Bu durumda, yukarıdaki çözümler eklentilerinizi bozabilir veya beklenmedik şekilde davranabilirler.

Google, görünür içeriğinin üst kısmında CSS yayınlamayı optimize etme gibi bazı sorunları size gösterebilir. Autoptimize, temanızın yukarıdaki alanını görüntülemek için gerekli olan satır içi CSS’yi manuel olarak ekleyerek bunu düzeltmenizi sağlar. Zaten yukarıda nasıl yapılacağını anlattık.

İlginizi Çekecek Benzer Yazılar

WordPress Defer Parsing of JavaScript Çözümü GTmetrix üzerinden sitenizin hız testini yaptıktan sonra "Defer parsing of JavaScript" hatası almış olabilirsiniz. Bunun nedeni sayfanızın yüklü mikta...
Contact Form 7 İletişim Eklentisini Hızlandırma En çok kullanılan ücretsiz iletişim formu eklentilerinden biridir Contact Form 7. Bu makaleyi yazdığımız tarihte, 66 milyondan fazla dosya indirilmiş ...
En iyi Ücretsiz CDN Hizmeti Cloudflare Kurulumu Dünyada ücretsiz CDN hizmeti veren firma sayısı çok az. Peki cdn servisi ne işe yarar? Şöyle düşünün, siz Türkiye'den Avrupa'ya bir malzeme gönderiyor...
WordPress Optimizasyonu ve Bakımı Nasıl Yapılır? Bir blog oluşturduktan sonra, kullanıcılar aradığı herhangi bir şey olmadıkça çoğu kez optimize etmezler. Düzenli olarak Wordpress bakımı yaparak, sit...
17 Yorum “Oluşturmayı Önleyen JavaScript ve CSS Kodlarını Kaldırma”
  1. Sondaki 1. ve 2. Yöntemde oluşturduğun kod dizimi dosyasını nereden oluşturuyorsun nereye ekliyorsunuz? Herkesin anlayabileceği dilde yazsanız.

    1. Merhaba Aytaç

      Yukarıda verdiğimiz kodları kopyalayıp herhangi bir metin editörüne yapıştırın. Ardından kendi js ve css dosyalarınıza göre düzenledikten sonra, kodu temanızın functions.php dosyasına eklemelisiniz. Bu işlemleri yaparken lütfen yedek almayı ihmal etmeyin.
      Eğer yeterli bilgi birikimine sahip değilseniz lütfen önbellekleme eklentisi kullanın.

  2. Gayet uzun, açıklayıcı ve kaliteli bir yazı olmuş. Elinize sağlık. Denemelere başlıyorum, umuyorum ki hatasız bir serüven olsun 🙂
    İyi çalışmalar dilerim.

  3. 3. Manuel Olarak JS ve CSS Dosyalarını Footer’a Taşımak işleminde 1. yöntemi uyguladığımda site hızım mobil ve masaüstü 98 98 oldu muhteşem. Fakat 2 sorunla karşılaştım. İlk olarak siteye girdiğimde adsense reklamlarım kocaman ve yamuk çıkmaya başladı. İkinci olarak kategori menüsündeki renkler değişti işlemi geri aldım düzeldi. 3. Manuel Olarak JS ve CSS Dosyalarını Footer’a Taşımak işleminin 2. yöntemini anlatmışsınız ama onu nasıl yapabileceğimi anlayamadım. Örnek olarak siz kendi sitenizdeki bu işlemleri yapıyormuş gibi kodları verebilir misiniz. Koddaki ‘ornek-js-dosyasi yerine neler yazacağımı kestiremedim çünkü.

    1. Merhaba Mehmet.

      Birinci yöntemde bütün js ve css dosyalarını taşıdığı için temanızda bozulma olması normal. Bu yüzden ikinci yöntemi, yani sizin belirlediklerdiklerini footer’a taşımanız daha iyi olur. Fakat ben bu yöntemi de tavsiye etmiyorum. Bu sefer tema görüntünüz önce bozuk çıkacak sonra düzelecektir.

      Örnek verelim, uygun yerlere kendi taşımak istediğiniz js dosyasını ekleyin.

      function tasiyoruz() {
      wp_enqueue_script( ‘js-dosyasi-kisa-adi’, get_template_directory_uri() . ‘/js/js-dosyasi-kisa-adi.js’, array( ‘jquery’ ), ‘varsa versiyon numarasi 2.1 gibi yoksa boş bırakın’, true );
      wp_enqueue_script(‘js-dosyasi-kisa-adi’);
      }
      add_action(‘ wp_enqueue_scripts’, ‘tasiyoruz’ );

      VEYA css için

      function fontlari-tasiyoruz() {
      wp_register_style (‘googlefonts’, ‘http://fonts.googleapis.com/css?family=Open+sans’, array(),’2′,’all’);
      wp_enqueue_style( ‘googlefonts’);
      }
      add_action(‘ wp_enqueue_scripts’, ‘fontlari-tasiyoruz’ );

  4. Hocam merhaba, ben bir tane js iki tane css sorunu lıyorum pagespedd’den. Bunları hem autoptimize ile hemde w3 total cache ile açıkladığınız gibi uyguladım ancak aynı hataları almaya devam ediyorum ne yapabilirm?

    1. Merhaba Olcay bey,

      Verdiğimiz yöntemler ile yaptığınız değişiklikler mutlaka olacaktır. Yaptığınız işlemleri kontrol etmenizi veya profesyonel bir kullanıcıdan yardım almanızı öneririm. Eklenti ile başarılı olamadıysanız, manuel yöntemleri uygulamayı deneyin.
      Unutmayın, bu işlemler temanızın bozulmasına veya yüklenirken görüntü bozukluğu oluşmasına neden olabilir.

      İyi çalışmalar.

  5. selamlar ben wp fastest cache kullanıyorum ve halen bazı css ve javascritpler üst kısımda. bunun için fastest cache ile uyumlu çalışabilecek ve css ile javascripleri aşağıya taşıyabilecek bir eklenti biliyor musunuz?

    1. Merhaba Mahmut.
      https://tr.wordpress.org/plugins/scripts-to-footerphp/ eklentisi işinize yarayacaktır. Ama W3 Total Cache zaten bu işlemi yapmanıza imkan veriyor. Fastest cacheyi kaldırıp W3’ü yükleyebilirsiniz. Veya Fastest cache’nin premium paketini satın alabilirsiniz.

    1. Merhaba Gizem.

      Yasak koymadık. Kodların üzerine mouse ile geldiğinizde üstte gri renkte bir bar çıkacaktır. En soldaki “Copy” botonuna tıklayın. Tüm kodlar seçili hale gelecektir. Artı kodları kopyalayabilirsiniz.

  6. Selamlar,

    ben wordpress wp fastest cache eklentisi kullanıyorum. üstüne bir de sizin dediğiniz autooptimize eklentisini kurdum. yaptığım ayarlar şu şekilde:

    JavaScript Kodunu Optimize Et?
    Satıriçi JS kodlarını toparla?
    “Try-catch” sarma özelliğini ekle?
    CSS Kodunu Optimize Et?
    Satıriçi CSS’i toparla?
    Tüm CSS’i “inline” olarak düzenle?
    son olarak ekstra bölümünden Google Yazıtipleri’ni kaldır ayarını yaptım. bu işlemlerin sonucunda çok güzel hız değerleri elde ettim. temada mobil ve masaüstü olarak gözle görünür bir bozukluk göremedim. sizce bu ayarlar ile wp fastest cache ayarları çakışmışmıdır emin olmak adına size sormak istedim.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir