Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress’te CSS / JavaScript Dosyaları Nasıl Küçültülür (3 Yol)

Kimse yavaş bir web sitesi istemez. Yavaş yükleme süreleri ziyaretçileri hayal kırıklığına uğratır ve arama sıralamalarına zarar verir.

WordPress performans optimizasyonu uzmanları olarak, CSS ve JavaScript dosyalarını küçültmenin daha hızlı, daha verimli bir web sitesi oluşturmaya yardımcı olabileceğini gördük.

Bu kılavuzda, performansı ve hızı artırmak, kullanıcı deneyimini ve arama motoru görünürlüğünü artırmak için WordPress’teki CSS ve JavaScript dosyalarını nasıl kolayca küçülteceğinizi göstereceğiz.

Easily minify CSS and JavaScript files in WordPress

Minifikasyon Nedir ve Ne Zaman İhtiyaç Duyarsınız?

‘Minify’ terimi, WordPress web sitenizin dosya boyutlarını küçülten bir yöntemi tanımlamak için kullanılır. Bunu, kaynak koddaki beyaz boşlukları, satırları ve gereksiz karakterleri kaldırarak yapar.

İşte normal CSS koduna bir örnek:

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

Kod küçültüldükten sonra şu şekilde görünecektir:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}
h1{font-size:32px;margin-bottom:10px}

Genellikle, yalnızca kullanıcının tarayıcılarına gönderilen dosyaların küçültülmesi önerilir. Buna HTML, CSS ve JavaScript dosyaları dahildir.

PHP dosyalarını da küçültebilirsiniz, ancak bu kullanıcılarınız için sayfa yükleme hızını artırmayacaktır. Bunun nedeni PHP ‘nin sunucu taraflı bir programlama dili olması, yani ziyaretçinin web tarayıcısına herhangi bir şey gönderilmeden önce sunucularda çalışmasıdır.

Dosyaları küçültmenin avantajı, kompakt dosyaların daha hızlı yüklenmesi nedeniyle WordPress hızının ve performansının iyileştirilmesidir.

Web sitenizin performansını optimize etmek için yardıma mı ihtiyacınız var? O zaman neden uygun fiyatlı WPBeginner Profesyonel Hizmetlerimizi kullanarak bir uzman tutmuyorsunuz? Site Hızı Optimizasyon Hizmetimiz 699 $ ‘dan başlar ve küçültme, tembel yükleme, önbellek yapılandırması ve daha fazlasını içerir.

Ancak bazı uzmanlar performans artışının çoğu web sitesi için çok küçük olduğuna ve zahmete değmeyeceğine inanmaktadır. Minifikasyon çoğu WordPress sitesinde yalnızca birkaç kilobaytlık veriyi kaldırır. Web için görüntüleri optimize ederek sayfa yükleme süresini daha fazla azaltabilirsiniz.

Google PageSpeed Insights veya GTMetrix aracında 100/100 puan elde etmeye çalışıyorsanız, CSS ve JavaScript’i küçültmek puanınızı önemli ölçüde artıracaktır.

Bunu söyledikten sonra, WordPress sitenizde CSS/JavaScript’i nasıl kolayca küçültebileceğinize bir göz atalım. Aralarından seçim yapabileceğiniz 3 farklı seçeneğin üzerinden geçeceğiz:

Hazır mısınız? En çok önerilen yöntemimizle başlayalım.

Yöntem 1. WP Rocket Kullanarak WordPress’te CSS/JavaScript’i Küçültün

Bu yöntem daha kolaydır ve tüm kullanıcılar için önerilir. Hangi WordPress hosting ‘i kullandığınızdan bağımsız olarak çalışır.

Öncelikle WP Rocket eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

WP Rocket piyasadaki en iyi WordPress önbellekleme eklentisidir. WordPress’e kolayca önbellekleme eklemenize ve web sitesi hızını ve sayfa yükleme sürelerini önemli ölçüde iyileştirmenize olanak tanır.

Daha fazla ayrıntı için WordPress’te WP Rocket ‘in nasıl kurulacağı ve ayarlanacağı hakkındaki eğitimimize bakın.

Etkinleştirmenin ardından, Ayarlar ” WP Rocket sayfasını ziyaret etmeniz ve ‘Dosya Optimizasyonu’ sekmesine geçmeniz gerekir.

Minify CSS files in WP Rocket

Buradan, CSS dosyalarını küçült seçeneğini işaretlemeniz gerekir.

WP Rocket daha sonra size bunun sitenizdeki bazı şeyleri bozabileceğine dair bir uyarı gösterecektir. Devam edin ve ‘CSS Minify’ı Etkinleştir’ düğmesine tıklayın. Web sitenizde herhangi bir soruna neden olursa bu seçeneği her zaman devre dışı bırakabilirsiniz.

Activate CSS minify

Ardından, aşağıdaki JavaScript Dosyaları bölümüne ilerlemeniz gerekir.

Burada, ‘JavaScript dosyalarını küçült’ seçeneğinin yanındaki kutuyu işaretlemeniz yeterlidir.

WP Rocket minify JavaScript files

Yine, bunun sitenizdeki bazı şeyleri bozabileceğine dair bir uyarı göreceksiniz. Devam edin ve ‘JavaScript’i Küçült’ü Etkinleştir’ düğmesine tıklayın.

Bundan sonra, ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.

WP Rocket şimdi CSS ve JavaScript dosyalarınızı küçültmeye başlayacaktır. Bir sonraki web sitesi ziyaretçisi için küçültülmüş CSS ve JavaScript’i kullanmaya başladığından emin olmak için eklenti ayarlarından önbelleğinizi temizleyebilirsiniz.

Yöntem 2. SiteGround Kullanarak WordPress’te CSS/JavaScript’i Küçültün

WordPress barındırma sağlayıcınız olarak SiteGround kullanıyorsanız, SiteGround Optimizer’ı kullanarak CSS dosyalarını küçültebilirsiniz.

SiteGround Optimizer, kendi platformunda çalışan bir performans optimizasyon eklentisidir. Sitenizin yükleme sürelerini iyileştirmek için Ultrafast PHP ile iyi çalışır.

SiteGround Optimizer eklentisini WordPress sitenize yüklemeniz ve etkinleştirmeniz yeterlidir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Bundan sonra, WordPress yönetici kenar çubuğunuzdaki SG Optimizer menüsüne tıklamanız gerekir.

SG Optimizer

Bu sizi SG Optimizer ayarlarına götürecektir.

Buradan ‘Diğer Optimizasyonlar’ altındaki ‘Ön Uca Git’ düğmesine tıklamanız gerekir.

SiteGround frontend optimization

Bir sonraki ekranda, CSS ön ucunu yönetebileceksiniz.

‘CSS dosyalarını küçült’ seçeneğinin yanındaki geçişi açmanız gerekir.

Minify CSS in SiteGround

Ardından, JavaScript sekmesine geçmeniz ve ‘JavaScript Dosyalarını Küçült’ seçeneğinin yanındaki geçişi açmanız gerekir.

Hepsi bu kadar! Artık WordPress önbelleğinizi boşaltabilir ve CSS ve JS dosyalarının küçültülmüş sürümlerini yüklemek için web sitenizi ziyaret edebilirsiniz.

Yöntem 3. Autoptimize kullanarak CSS/JavaScript’i küçültün

Bu yöntem SiteGround’da olmayan ve WP Rocket kullanmayan kullanıcılar için önerilir.

Öncelikle Autoptimize eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından, eklenti ayarlarını yapılandırmak için Ayarlar ” Otomatik Optimize Et sayfasını ziyaret etmeniz gerekir.

Buradan, öncelikle JavaScript Seçenekleri altındaki ‘JavaScript Kodunu Optimize Et’ seçeneğini işaretlemeniz gerekir.

Autoptimize JavaScript options

Bundan sonra, CSS Seçeneklerine doğru aşağı kaydırmanız gerekir.

Oraya gittiğinizde, ‘CSS kodunu optimize et’ seçeneğinin yanındaki kutuyu işaretlemelisiniz.

Autoptimize CSS code

Ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.

Ardından, küçültülmüş dosyalarınızı kullanmaya başlamak için Önbelleği Boşalt düğmesine tıklayabilirsiniz. Eklenti, WordPress’te render engelleyici JavaScript ve CSS’yi düzeltmek için de kullanılabilir.

Umarız bu makale WordPress sitenizdeki CSS ve JavaScript’i küçültmenize yardımcı olmuştur. WordPress’te Core Web Vitals’ı optimize etme kılavuzumuzu ve en iyi sürükle-bırak WordPress sayfa oluşturucuları uzman seçimimizi de görmek isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

27 yorumBir Cevap Bırakın

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dayo Olobayo

    Thanks for sharing this with me. I will try out the WP Rocket plugin and see if it helps with minifying the files.

  3. Mrteesurez

    Based on the code example you gave, the two are the same, do what are we minifying, but I can only see one with little space, does removing space is what is termed as minifiying ?
    This post is helpful as it related to site speed but some themes come with minifiying code, do I still need to do it manually ? thanks.

    • WPBeginner Support

      Removing the extra spaces is minifying the code. If your site’s code is already minified then it is not required, it is mainly for themes or other tools that may not be minified.

      Yönetici

  4. Ali Asgar Attari

    Will using Autoptimize change my font size and line spacing and other CSS ?
    I have added additional CSS codes on my WordPress site. These include Line spacing for bullet points, line spacing for paragraphs, letter spacing for paragraphs.
    Will all these CSS settings be removed ?

    • WPBeginner Support

      The settings and changes you’ve made should not be removed when you minify the files.

      Yönetici

  5. Sami Khan

    This plugin is no more available in the WordPress plugins panel. Also, it is not updated for the last 6 years.

    • WPBeginner Support

      Thank you for letting us know, we will be sure to look into updating this article :)

      Yönetici

  6. Adnan

    What if I am not happy with results, can I undo with a click of a button and return to non-minify state?

    • WPBeginner Support

      If you used the plugin then you would need to remove the plugin to stop it from minifying and clear any caching on your site.

      Yönetici

  7. Echo

    It would be nice to minify the admin area as well. Anyone ever do that?

    • WPBeginner Support

      We do not have a guide on that at the moment.

      Yönetici

  8. Justin

    This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

    • WPBeginner Support

      Thank you for letting us know, we’ll be sure to take a look at this.

      Yönetici

  9. Oskar

    I tried to find it for my site but I couldn’t find it?

  10. Adri Oosterwijk

    I’m looking for an outstanding Minify plugin. Reading this post I was willing to install Better Wordpress Minify. Over at the Wordpress repo I noticed that this plugin wasn’t updated in three years. I also noticed that there was not much going on on the support page.

    I’m sure you can understand my hesitation to install this plugin.
    Question is…. can I do it safely with the latest Wordpress and php version or do you recommend another plugin at this moment.

    HTH

    Adri

    • Felipe

      I’m using Autoptimize for most of my websites and it’s going very well.
      It has options for minify HTML, CSS and JS files.

  11. Dave

    This plugin hasn’t been tested with the latest 3 major releases of WordPress!

  12. Shaker

    if you are using W3 Total Cache plugin, many of the WordPress users use this plugin to increase web PageSpeed. You might be aware that this plugin offers a feature to Minify CSS, JavaScript and HTML files. I would recommend this, because it serve the purpose and you don’t need to use additional plugin for Minification.

  13. Sophie

    hello there,

    Once I checked the minify option from one of my cache plugin whose name I don’t know now, but it destroyed my theme. So I am in worry dost the plugin that you have suggested will do the same or it won’t destroy my theme when I install it? I have themify ultra theme.

    thanks,

    sophie.

  14. Rashmi Korlekar

    I agree with JEREMY

  15. Beth

    Thank you for your article. is there another plug in you might recommend? Better Wordpress Minify has not been updated in 2 years. Thank you

  16. santy

    informative and useful appreciating for your effort

  17. Steve Eilertsen

    Your posts are always both useful and appreciated. Many thanks.

  18. Jeremy

    Hello,

    I enjoyed the article, but I have a suggestion. I noticed with a lot of the WP Beginner articles that they feature a plugin based solution. I think that’s great, but at times it’s nice for advanced users to see some behind the scenes stuff.

    There are a few articles that you have that show the plugin way and then a manual (for advanced WordPress users) way. I like those articles because it’s geared toward the novice and advanced WP user or developer.

    As time permits, could you please consider updating the article to feature a how to minify for advanced users/developers?

    Thanks!

    • Hamza Bhatti

      I agree with you JERMY. But as from the website name i.e wpbeginner.com Here the word Beginner is used, which means it is not Pros.

    • Branden

      Lol read the website domain you’re on. It’s WP beginner, not WP Advanced

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.