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

WordPress CSS Teslimatı Nasıl Kolayca Optimize Edilir (2 Yöntem)

Web sitemizin performansını artırmak için her zaman yeni yollar arıyoruz. Keşfettiğimiz en etkili stratejilerden biri WordPress CSS dosyalarımızın dağıtımını optimize etmek.

CSS dosyaları sitenizin görsel stilini ve biçimlendirmesini kontrol eder. Ancak, verimli bir şekilde sunulmazlarsa, sayfa yükleme sürelerinizi yavaşlatabilirler. Bu da kullanıcı deneyimini ve arama motoru sıralamalarını olumsuz etkiler.

Bu makalede, WordPress CSS dağıtımınızı optimize etmek için size iki basit ama güçlü yöntem göstereceğiz. Bu stratejileri uygulayarak ziyaretçileriniz için daha hızlı ve sorunsuz bir deneyim sağlayabilirsiniz.

How to Easily Optimize CSS Delivery in WordPress

WordPress CSS Dağıtımı WordPress Performansını Nasıl Etkiler?

CSS dosyaları WordPress web sitenizin görsel görünümünü tanımlamak için kullanılır. WordPress temanız bir CSS stil sayfası dosyası içerir ve bazı eklentileriniz de CSS stil sayfalarını kullanabilir.

CSS modern web siteleri için gereklidir, ancak CSS dosyalarının nasıl ayarlandıklarına bağlı olarak sitenizin hızını ve performansını yavaşlatması mümkündür.

Web sitesi hızındaki küçük bir gecikme bile kötü bir kullanıcı deneyimi yaratır ve arama sıralamalarınızı ve dönüşümlerinizi etkileyerek daha az trafik ve satışla sonuçlanabilir.

Strangeloop performance case study

CSS dosyalarının web sitenizi yavaşlatmasının bir yolu, sayfanın görüntülenebilmesi için önce yüklenmeleri gerekmesidir. Bu, ziyaretçilerinizin CSS dosyası yüklenene kadar boş bir sayfa göreceği anlamına gelir. Bu, render engelleyici CSS olarak bilinir.

CSS dosyalarının web sitenizi yavaşlatmasının bir diğer yaygın nedeni de mevcut sayfanın görünür kısmını görüntülemek için gerekenden daha fazla kod içermeleridir. Bu fazladan kullanılmayan CSS kodu, yükleme sürelerinin daha uzun olacağı anlamına gelir.

İyi haber şu ki, CSS kodunun iletilme şeklini optimize ederek WordPress sitenizin performansını artırabilirsiniz.

Bu, mevcut web sayfasının ilk bölümünü görüntülemek için gereken minimum CSS kodunu belirleyerek yapılır. Bu ‘kritik CSS’ olarak bilinir.

Bu kritik kod daha sonra ayrı stil sayfaları yerine sayfanın HTML’sine satır içi olarak eklenir, böylece kod önce CSS dosyasını yüklemeye gerek kalmadan işlenebilir.

CSS’nin geri kalanı, ziyaretçileriniz sayfanın içeriğini gördükten sonra yüklenebilir. Bu ‘ertelenmiş yükleme’ olarak bilinir.

Bununla birlikte, WordPress CSS dağıtımını optimize etmek için iki yönteme bir göz atalım ve sizin için en uygun olanı seçebilirsiniz:

Yöntem 1: WP Rocket ile WordPress CSS Teslimini Optimize Etme

WP Rocket piyasadaki en iyi WordPress önbellekleme eklentisidir. WordPress CSS dağıtımınızı optimize etmenin en basit yolunu sunar. Aslında, bir kutuyu işaretlemek kadar kolaydır.

WP Rocket premium bir performans eklentisidir, ancak en iyi yanı tüm özelliklerin en düşük planlarına dahil olmasıdır.

Yapmanız gereken ilk şey WP Rocket eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki adım adım kılavuzumuza bakın.

Etkinleştirildikten sonra, Ayarlar ” WP Rocket sayfasına gitmeniz ve ‘Dosya Optimizasyonu’ sekmesine geçmeniz gerekir.

WP Rocket File Optimization

Ardından, CSS dosyaları bölümüne ilerlemeniz gerekir.

Buraya geldiğinizde, ‘CSS dağıtımını optimize et’ seçeneğinin yanındaki kutuyu işaretlemeniz gerekir.

WP Rocket Optimize CSS Delivery

Bu özellik, ziyaretçilerinizin web sayfasının ilk gördüğü kısmını biçimlendirmek için gereken kritik CSS’yi akıllıca belirleyecektir. Sayfalarınız daha hızlı yüklenecek ve CSS’nin geri kalanı ziyaretçileriniz içeriğini gördükten sonra yüklenecektir.

Şimdi tek yapmanız gereken ‘Değişiklikleri Kaydet’ düğmesine tıklamak ve WP Rocket’in tüm yazılarınız ve sayfalarınız için gerekli CSS dosyasını oluşturmasını beklemek.

Ayrıca web sitenizin önbelleğini otomatik olarak temizler, böylece ziyaretçileriniz önbellekte saklanan optimize edilmemiş sürüm yerine sitenizin yeni optimize edilmiş sürümünü görürler.

WP Rocket’ın web sitenizin performansını artırmanıza yardımcı olabileceği pek çok başka yol vardır. Daha fazla bilgi edinmek için WP Rocket’in WordPress’e nasıl düzgün bir şekilde kurulacağı ve ayarlanacağı hakkındaki kılavuzumuza bakın.

Yöntem 2: Autoptimize ile WordPress CSS Teslimini Optimize Etme

Autoptimize, web sitenizin CSS ve JavaScript dosyalarının dağıtımını iyileştirmek için tasarlanmış ücretsiz bir eklentidir.

Autoptimize ücretsiz bir eklenti olsa da, WP Rocket kadar çok özelliğe sahip değildir ve kurulumu daha fazla zaman alır.

Örneğin, WP Rocket’in yapabildiği gibi kritik CSS’yi otomatik olarak tanımlayamaz. Bunun yerine, Autoptimize, ek bir maliyet olan ve yapılandırmak için ekstra zaman gerektiren premium bir üçüncü taraf hizmetinin yardımını gerektirir.

Ancak, kısıtlı bir bütçeniz varsa ve sitenizi hızlandırmak için WP Rocket’in diğer tüm özelliklerine ihtiyacınız yoksa iyi bir seçenek olabilir.

Yapmanız gereken ilk şey Autoptimize eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki 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. Burada CSS Seçenekleri bölümüne ilerlemeniz ve en üstteki ‘CSS Kodunu Optimize Et’ kutusunu işaretlemeniz gerekir.

Scroll Down to CSS Options

Bunu yaptıktan sonra, ‘CSS dosyalarını topla’ seçeneğinin işaretli olmadığından emin olmanız ve ardından ‘Oluşturmayı engelleyen CSS’yi ortadan kaldır’ seçeneğini işaretlemeniz gerekir.

Şimdi ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet ve Önbelleği Boşalt’ düğmesine tıklayabilirsiniz.

Ancak bir Critical CSS hesabına kaydolana kadar eklenti düzgün çalışmayacaktır. Bu, WordPress CSS dağıtımınızı optimize etmek için ihtiyaç duyduğu kritik CSS kodunu Autoptimize’a sağlayacak premium bir abonelik hizmetidir.

Bunu yapmak için, Autoptimize’ın ayarlarındaki Critical CSS sekmesine gidin. Burada Critical CSS’e kaydolmak için ihtiyacınız olan bilgileri bulacaksınız. Üçüncü paragraftaki kaydolma bağlantısına tıklayarak başlayabilirsiniz.

Sign Up for a Critical CSS Account

Critical CSS API anahtarınızı aldıktan sonra, ‘API anahtarınız’ metin kutusuna yapıştırabilmek için API Anahtarı bölümüne ilerleyin.

Bundan sonra, ‘Değişiklikleri Kaydet’ düğmesine tıkladığınızdan emin olun.

Paste Your Critical CSS API Key

Autoptimize artık kritik CSS’yi satır içi eklemek ve stil sayfalarının yüklenmesini sayfa oluşturulduktan sonraya ertelemek için ihtiyaç duyduğu tüm bilgilere sahiptir. Sonuç olarak, web siteniz daha hızlı bir yükleme hızına sahip olacaktır.

Umarız bu eğitim WordPress CSS dağıtımını nasıl optimize edeceğinizi öğrenmenize yardımcı olmuştur. WordPress’te belirli kullanıcı rolleri için CSS’nin nasıl uygulanacağına ilişkin kılavuzumuza ve en iyi WordPress kaydırıcı eklentileri uzman seçimimize de göz atmak 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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

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.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

Comments

  1. Congratulations, you have the opportunity to be the first commenter on this article.
    Have a question or suggestion? Please leave a comment to start the discussion.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.