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 CSS Teslimatı Nasıl Kolayca Optimize Edilir (2 Yöntem)

Web sitelerimizin performansını artırmak için her zaman en iyi yolları arıyoruz. WordPress CSS dosyalarımızın dağıtımını optimize etmenin web sitelerimizin hızını ve performansını kesinlikle artırdığını gördük.

CSS dosyaları sitenizin görsel biçimlendirmesinden ve stilinden sorumludur, ancak verimli bir şekilde sunulmazlarsa sayfa yükleme sürelerinizi yavaşlatabilirler. Bu da hem kullanıcı deneyimini hem de arama motoru sıralamalarını olumsuz etkileyecektir.

Bu makalede, ziyaretçileriniz için daha hızlı ve sorunsuz bir deneyim sağlamak amacıyla WordPress CSS dağıtımınızı optimize etmek için iki basit ama etkili yöntem göstereceğiz.

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 eklentidir, 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. Ayrıca bir WordPress web sitesi oluşturmanın gerçekte ne kadara mal olduğuna dair nihai kılavuzumuzu ve en iyi yönetilen WordPress barındırma şirketleri uzman seçimimizi 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

Yorumlar

  1. Tebrikler, bu makaleye ilk yorum yapan kişi olma fırsatını yakaladınız.
    Bir sorunuz veya öneriniz mi var? Lütfen tartışmayı başlatmak için bir yorum bırakın.

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.