WordPress’te CSS nakliyesi nasıl optimize edilir
Eğer buradaysanız, Şans, bu bildirimi PageSpeed Insights Test Edin Google:
Oluşturmayı engelleyen tüm dosyaları ortadan kaldırmak zor olsa da, doğru araçlarla zor değildir. Bu kılavuzda, optimize edilmiş CSS teslimatı ile sitenizi hızlandırmanın üç yolunu göstereceğim. Burada toplam yeni başlayanlar ve WordPress geliştiricileri için seçenekler var. Yukarıdan başlayalım – WordPress sitenizdeki CSS nakliyesini optimize ederek tam olarak ne anlama geliyor? “CSS teslimatını optimize etmek” ile kastedilen nedir? Önce ne demek istediğimi tamamen netleştireyim.
CSS dosyaları web sayfalarını düzenlemek için kullanılır. Her WordPress teması style.css dosyaları içerir ve birkaç ek sayfa CSS (CSS) ilave stiliniz olabilir. Örneğin, yeni bir widget ekleyen bir eklentiniz varsa, widget’ı düzenlemek için başka bir stil sayfası yüklemesi gerekir. Siteniz oluşturulmadan önce tüm CSS dosyaları yüklenir. Bu, ziyaretçilerin boş beyaz ekranı o zamana kadar göreceği anlamına gelir. Şimdi bu bir şey … yüklenen CSS’nin çoğu, ziyaretçilerin ziyaret ettiği herhangi bir sayfa için gerekli değildir ve hemen görebilecekleri için daha az ihtiyaç duyulur. Örneğin, altbilgi için stil yüklerken neden bekletin? Belki görmeden en az birkaç saniye önce (eğer görmüş olsaydı).
CSS dosyalarımızı geciktirerek veya eşzamansız yükleyerek, stil sayfası yüklenmeden önce sitenin ziyaretçilerin tarayıcısında görünmesine izin verebiliriz. Bu kılavuzda, stil sayfanızı geciktirmek ve CSS nakliyenizi optimize etmek için üç farklı yaklaşımı paylaşacağım. Temayla yarışan verandayı ziyaret ederseniz, eylemde optimize edilen önemli oluşturma yolu, site yüklendiğinde tarayıcı sekmesindeki yükleme göstergesine dikkat edin. Site görünür ve görünür olduktan sonra, yükleme göstergesinin bir süre daha dönmeye devam ettiğini göreceksiniz. Bu, pratikte optimize edilmiş CSS nakliye ekranının bir örneğidir. Yüksek oranda optimize edilmiş kritik oluşturma yollarının örneklerini görmek istiyorsanız Amazon’u ziyaret edin. Tüm siteler aynı anda yüklenmez. Bunun yerine, birkaç saniye boyunca, dikkatlice optimize edilen oluşturma yolu sayesinde tüm sayfalarda çeşitli öğelerin göründüğünü göreceksiniz. 1. WP ROCKET ROCKET WP eklentisini burada rekabet temalarında kullanıyorum ve kritik oluşturma yollarını optimize etmek için diğer tüm çözümlerden önce tavsiye ediyorum.
Daha fazlasını görmek için buraya tıklayın
CSS dosyaları web sayfalarını düzenlemek için kullanılır. Her WordPress teması style.css dosyaları içerir ve birkaç ek sayfa CSS (CSS) ilave stiliniz olabilir. Örneğin, yeni bir widget ekleyen bir eklentiniz varsa, widget’ı düzenlemek için başka bir stil sayfası yüklemesi gerekir. Siteniz oluşturulmadan önce tüm CSS dosyaları yüklenir. Bu, ziyaretçilerin boş beyaz ekranı o zamana kadar göreceği anlamına gelir. Şimdi bu bir şey … yüklenen CSS’nin çoğu, ziyaretçilerin ziyaret ettiği herhangi bir sayfa için gerekli değildir ve hemen görebilecekleri için daha az ihtiyaç duyulur. Örneğin, altbilgi için stil yüklerken neden bekletin? Belki görmeden en az birkaç saniye önce (eğer görmüş olsaydı).
CSS dosyalarımızı geciktirerek veya eşzamansız yükleyerek, stil sayfası yüklenmeden önce sitenin ziyaretçilerin tarayıcısında görünmesine izin verebiliriz. Bu kılavuzda, stil sayfanızı geciktirmek ve CSS nakliyenizi optimize etmek için üç farklı yaklaşımı paylaşacağım. Temayla yarışan verandayı ziyaret ederseniz, eylemde optimize edilen önemli oluşturma yolu, site yüklendiğinde tarayıcı sekmesindeki yükleme göstergesine dikkat edin. Site görünür ve görünür olduktan sonra, yükleme göstergesinin bir süre daha dönmeye devam ettiğini göreceksiniz. Bu, pratikte optimize edilmiş CSS nakliye ekranının bir örneğidir. Yüksek oranda optimize edilmiş kritik oluşturma yollarının örneklerini görmek istiyorsanız Amazon’u ziyaret edin. Tüm siteler aynı anda yüklenmez. Bunun yerine, birkaç saniye boyunca, dikkatlice optimize edilen oluşturma yolu sayesinde tüm sayfalarda çeşitli öğelerin göründüğünü göreceksiniz. 1. WP ROCKET ROCKET WP eklentisini burada rekabet temalarında kullanıyorum ve kritik oluşturma yollarını optimize etmek için diğer tüm çözümlerden önce tavsiye ediyorum.
Daha fazlasını görmek için buraya tıklayın
CSS nakliyenizi WP roketiyle optimize etmek çok kolaydır. Dosya Optimizasyonu menüsünde, bu özelliği etkinleştirmek için bir onay kutusu vardır.
Kontrol edildikten sonra, WP Rocket, tüm stil sayfanızı otomatik olarak askıya alacaktır, böylece site ziyaretçinin tarayıcısında görünene kadar yüklenmez. Şimdi, tüm CSS askıya alınırsa, siteniz yüklenene kadar kötü görünecek ve WP roket geliştiricileri eklentileriyle zarif bir şekilde üstesinden geldi. Bu seçeneği etkinleştirdiğinizde, WP Rocket, sitenizin ziyaretçilerin sitenizin yüklendiğini gördüğü kısımlarını düzenlemek için gereken CSS’yi otomatik olarak bulur ve kod belgeye eklenir. Başka bir deyişle, siteniz tarayıcıda daha hızlı görünür ve ertelenmiş CSS bir veya iki saniye yüklenirken tamamen yüklenir gibi görünüyor. Görüşüme göre, bu, CSS nakliyesini WordPress ile optimize etmek için en iyi çözümdür. WP Rocket premium bir eklentidir, ancak daha hızlı bir yükleme süresi size sitenizden daha fazla gelir sağlayacaksa, kesinlikle siteniz için almayı düşüneceğim. Daha fazla bilgi edinmek isterseniz okuyabileceğiniz WP roketine çok daha ayrıntılı bir bakışım var. Değilse, sitelerini buradan kontrol edebilirsiniz. 2. Otomatik Optimizasyon Önerdiğim ikinci yaklaşım, otomatiktimize eklentidir.
Kontrol edildikten sonra, WP Rocket, tüm stil sayfanızı otomatik olarak askıya alacaktır, böylece site ziyaretçinin tarayıcısında görünene kadar yüklenmez. Şimdi, tüm CSS askıya alınırsa, siteniz yüklenene kadar kötü görünecek ve WP roket geliştiricileri eklentileriyle zarif bir şekilde üstesinden geldi. Bu seçeneği etkinleştirdiğinizde, WP Rocket, sitenizin ziyaretçilerin sitenizin yüklendiğini gördüğü kısımlarını düzenlemek için gereken CSS’yi otomatik olarak bulur ve kod belgeye eklenir. Başka bir deyişle, siteniz tarayıcıda daha hızlı görünür ve ertelenmiş CSS bir veya iki saniye yüklenirken tamamen yüklenir gibi görünüyor. Görüşüme göre, bu, CSS nakliyesini WordPress ile optimize etmek için en iyi çözümdür. WP Rocket premium bir eklentidir, ancak daha hızlı bir yükleme süresi size sitenizden daha fazla gelir sağlayacaksa, kesinlikle siteniz için almayı düşüneceğim. Daha fazla bilgi edinmek isterseniz okuyabileceğiniz WP roketine çok daha ayrıntılı bir bakışım var. Değilse, sitelerini buradan kontrol edebilirsiniz. 2. Otomatik Optimizasyon Önerdiğim ikinci yaklaşım, otomatiktimize eklentidir.
Bu özellik -Rich performans eklentisi, CSS teslimatını optimize etmek için çeşitli yaklaşımlar sağlar. En basit seçenek tüm CSS’yi hizalamaktır. Bu, stil sayfanızda bulunan tüm CSS’yi alır ve stil sayfası yüklenmemesi için doğrudan sayfa belgesine ekler.
Bu seçeneği bulmak için, üstteki Gelişmiş Ayarlar düğmesini tıklamanız gerekir.
Bu seçeneği bulmak için, üstteki Gelişmiş Ayarlar düğmesini tıklamanız gerekir.
Daha sonra tüm CSS’yi hizalama seçeneğini göreceksiniz. Bu seçenek performansı artırabilse de, sayfa belgelerine çok fazla CSS eklenirse, aslında sitenizi yavaşlatabilir. Bu denemeye değer olabilir. Değilse, düzgün bir yaklaşım, satır içi seçenekleri etkinleştirmek ve CSS’yi ertelemektir. Bu, tüm stil sayfasını geciktirir ve yalnızca önemli CSS ile sıralanır. Ancak, WP roketi gibi sizin için otomatik olarak önemli CSS bulamaz.
Peki, sitenizi nasıl önemli bir CSS elde edersiniz? Deneyimli WP geliştiricileri için bile, bu bir tür baş yarışçı olabilir. Kendim bu aracın güvenilirliğini test etmemiş olmama rağmen, bu ücretsiz kritik CSS üreticisi iyi bir yaklaşım olacaktır. Sitenizin URL’sini girin ve gerçekten sığmanız gereken CSS’yi geri yükleyecektir. Ardından, kodu AutoPtimizize’de Kritik CSS kutusuna kopyalayabilir ve ekleyebilirsiniz.
Peki, sitenizi nasıl önemli bir CSS elde edersiniz? Deneyimli WP geliştiricileri için bile, bu bir tür baş yarışçı olabilir. Kendim bu aracın güvenilirliğini test etmemiş olmama rağmen, bu ücretsiz kritik CSS üreticisi iyi bir yaklaşım olacaktır. Sitenizin URL’sini girin ve gerçekten sığmanız gereken CSS’yi geri yükleyecektir. Ardından, kodu AutoPtimizize’de Kritik CSS kutusuna kopyalayabilir ve ekleyebilirsiniz.
Bu yaklaşımı kullanırsanız, sitenizde farklı sayfalar için ek CSS eklemeniz gerekebilir ve tutarlı bir stil sağlamak için CSS temanızı çok iyi bilmeniz gerekebilir.
Başka bir yaklaşım, AutoPtimize Critalcss.com Güçlendirme adlı bir eklentidir. Bu oldukça ilginç, ancak bu ek eklenti, Criticalcs.com hizmetlerini kullanarak sitenizi otomatik olarak önemli bir CSS üretmenizi sağlayacaktır. Bu seçeneği kullanmak için ücretli bir hesap için CrictalCSS’ye kayıt olmalısınız. 3. Bu son seçeneği hızlandırın WordPress geliştiricileri tarafından çok hızlı ve uygulanması kolaydır. Speed Up, önemsiz stil sayfasını geciktirmenizi sağlayan hafif bir eklentidir.
Bu, CSS nakliyenizi tam olarak optimize etmese de, bu yardımcı olacaktır. Temanızın bir sayfa stil eklediğini ve daha sonra eklenti tarafından eklenen beş stil daha olduğunu söylüyorsunuz. Siteyi göstermeden önce yüklenecek sadece önemli bir tema stili sayfası varsa, diğer beşini erteleyebilirsiniz. Speed Up, istediğiniz stil sayfasını geciktirmek için Function.php dosyasına çocuk temasına (veya eklenti) ekleyebileceğiniz basit bir filtre sağlar. İhtiyacınız olan tek şey, her bir kuvvet tabakasının yüklenmesidir. Sitenizdeki listelenen tüm stillerin işini almak için burada bazı basit işlevler bulabilirsiniz. Bir kez daha, bu geliştiriciler için hızlı ve kolay olacak, ancak kodu yazmazsanız bu çözümü tavsiye etmeyeceğim.
Bu, CSS nakliyenizi tam olarak optimize etmese de, bu yardımcı olacaktır. Temanızın bir sayfa stil eklediğini ve daha sonra eklenti tarafından eklenen beş stil daha olduğunu söylüyorsunuz. Siteyi göstermeden önce yüklenecek sadece önemli bir tema stili sayfası varsa, diğer beşini erteleyebilirsiniz. Speed Up, istediğiniz stil sayfasını geciktirmek için Function.php dosyasına çocuk temasına (veya eklenti) ekleyebileceğiniz basit bir filtre sağlar. İhtiyacınız olan tek şey, her bir kuvvet tabakasının yüklenmesidir. Sitenizdeki listelenen tüm stillerin işini almak için burada bazı basit işlevler bulabilirsiniz. Bir kez daha, bu geliştiriciler için hızlı ve kolay olacak, ancak kodu yazmazsanız bu çözümü tavsiye etmeyeceğim.
Sonuç Umarım bu yazıdaki WordPress performansının optimizasyonu hakkında bir veya iki şey öğrenirsiniz. Yukarıdaki üç çözümün her biri iyi çalışabilirken, WP roket eklentisine son çığlık atmam gerekiyor. WordPress temalarının bir blog yazarı hem de geliştiricisi olarak, onunla çalışmak için çok kolay ve bir güçlük değilim. Sitenizi hızlandırmak için daha fazla ipucu istiyorsanız, hızlı yükleme süresi için rekabetçi temalara dayanan WP makinemin görüntülerini veya incelemelerini optimize etme konusundaki bu kılavuzu beğenebilirsiniz.