Bu bir sır değil: günümüzün web kullanıcılarının hıza ihtiyacı var. İnternet ve hücresel bağlantıların giderek daha hızlı hale gelmesiyle, kullanıcılar sitelerin hızlı bir şekilde yüklenmesini bekler ve bu sayfaları hızlı bir şekilde sunmak için ellerinden geleni yapmak bir geliştiricinin işidir. Peki sitenizi nasıl hızlı bir şekilde parlatırsınız? İşte WordPress ile oluştururken özellikle yapmanız gerekenler.

İlk şey ilk: Sitenizin hızını test edin

Performans iki ana kategoriye ayrılabilir: ön uç ve arka uç. Arka ucun sunucuyla ve verilerin bir sayfada nasıl doldurulduğuyla ilgili herhangi bir şey olduğunu düşünüyorum (temanızdaki PHP kodunuz "arka uç"tur). Ön uç, tüm varlıklarınızdan (CSS, JavaScript, resimler vb.) ve işaretlemeden oluşur. Bir web tarayıcısının okuduğu ve yorumladığı her şey “ön uç”tur. Performans açısından bu ayrımı yapmamın nedeni, neyi optimize ettiğinizi ve daha da önemlisi, en çok nerede optimize etmeniz gerektiğini bilmenin iyi olmasıdır.

Sitenizin hızını test etmek için WebPagetest ve Google PageSpeed ​​Insights kombinasyonunu kullanmanızı öneririm. WebPagetest bize bir sitenin yüklenmesi için geçen gerçek süre (saniye cinsinden) hakkında iyi bir fikir verir ve sitenin yavaş yüklenmesine neden olanın arka uç mu yoksa ön uç mu olduğunu bilmek için size bazı iyi ölçümler verir. PageSpeed ​​Insights, sitenizin tarayıcı tarafından nasıl oluşturulduğuna ve ön uçta neleri iyileştirebileceğinize bakmak için en iyisidir.

Bu makalenin tamamen özelleştirilmiş WordPress sitelerine odaklandığını unutmayın. Hacimli bir tema ve 19 üçüncü taraf eklentisi kullanan bir sitede hız testleri yapıyorsanız (eklentiler hem ön hem de arka ucu yavaşlatabilir), boş bir sayfa açarak ve eklentileri bulmak için yavaş yavaş etkinleştirerek başlayın. bu işleri yavaşlatıyor.

Ön uç performansı

WordPress temanızın erişilebilirliğini şu anda nasıl iyileştirebilirsiniz?

Tatildeyken bile interneti kullanmadığım bir gün bile yok. İlişki kurabileceğiniz çılgın bir tahmin yapacağım. Gittikçe daha fazla, internet bir oyun oynuyor ...

Fastly'nin baş performans sorumlusu Steve Souders'a göre performansın altın kuralı, bir sayfanın toplam yükleme süresinin %80-90'ının ön uçtan oluşmasıdır (80/20 kuralı). Arka ucun %10-20'si hayati derecede önemlidir, ancak paranın satın alabileceği en hızlı barındırma hizmetini kullanıyor olsanız bile, kullanıcıların bunu algılamasını sağlamak için ön ucu optimize etmeden siteniz yine de tam potansiyeline ulaşamaz. hızlı yükleniyor. Ön uç optimizasyonu söz konusu olduğunda algı önemlidir. Bir kullanıcı, bir sitenin yüklenmesinin saniye cinsinden ne kadar sürdüğünü umursamaz. Gerçekten umursadıkları tek şey, onunla ne kadar hızlı etkileşime girebilecekleri ve içeriği görebilecekleri veya gecikmeden eylemler gerçekleştirebilecekleri. Gerçek yükleme süresi hakkında endişelenmemelisiniz (yapmalısınız), ancak aşağıdaki teknikleri izleyerek, sitenizin mümkün olduğunca çabuk kullanılabilir bir durumda olduğundan emin olabilirsiniz, ardından tam bir sayfa yüklemesi ile hızlı bir şekilde sitenizin kullanılabilir durumda olmasını sağlayabilirsiniz. tüm varlıklar.

CSS

Tarayıcıya teslim edilmeden önce CSS'nizle yapılacak en önemli şey, onu sıkıştırmak ve kullanılmayan seçicileri kaldırmaktır. Tema geliştirirken iyi bir geliştirme iş akışı elde etmek, özellikle Sass gibi bir ön işlemci kullanıyorsanız, bu süreci önemsiz hale getirir. Geliştirme sırasında sizin için komutları yürüten bir JavaScript görev çalıştırıcısı olan Grunt'u kullanıyorum. Grunt için grunt-contrib-sass adında, tüm Sass dosyalarınızı tek bir dosyada derleyen (yani, Sass kısmi dosyalarını kullanıyorsanız) küçülten ve sıkıştıran bir eklenti var. Bunun üzerine grunt-contrib-watch eklentisini ekleyin ve bir dosyayı her kaydettiğinizde Sass görevini çalıştıracaktır. Kolay! En yeni ve en iyi CSS metodolojisini kullanmıyorsanız uykunuzu kaybetmeyin, ancak yinelemeleri ve çok büyük dosya boyutlarını önlemek için CSS yazarken bir tür standardı takip etmeye çalışın.

Stil sayfanız kullanıma hazır olduğunda, onu yüklemenin en kolay (ve açık ara standart) yolu, onu <head> ; içinde referans göstermektir. Bu şekilde, tarayıcı, DOM'nin geri kalanı yüklenmeden önce onu yükler ve ayrıştırır. Ancak, "kritik" stillerin <head> içinde satır içine alındığı ve ardından tam stil sayfasının JavaScript kullanılarak eşzamansız olarak yüklendiği yeni bir teknik var. Bu tekniği yalnızca bir siteyi bir saniyeden kısa sürede yüklemeye (veya yüklemeyi algılamaya) kesinlikle çalıştığımda kullanıyorum, ancak bakmak ve iş akışınıza uyup uymadığını görmek harika bir şey. Filament Grubunun bu tekniğin kullanımıyla ilgili çok kapsamlı bir makalesi var.

JavaScript

WordPress'in MySQL'i nasıl kullandığını anlama

Genel olarak konuşursak, WordPress iki bölüme ayrılabilir: bir WordPress sitesinin görünümünü ve hissini oluşturan mantık ve şablonlar, tüm içeriği depolayan MySQL veritabanı ve i...

JavaScript'i optimize etmenin altın kuralı(lar) basittir: mümkün olduğunca az JavaScript dosyası sunun ve küçültün ve birleştirin. Üçüncü taraf WordPress eklentileri, belgenizi küçültülmemiş engelleme JavaScript dosyalarıyla şişirerek zararlı olabilir, bu nedenle eklentileri seçerken dikkatli olmak önemlidir. İdeal olarak, TÜM JavaScript dosyalarını tek bir dosyada birleştirirsiniz ve ardından hepsini küçültürsünüz. Tüm dosyalarınızı tek bir dosyada birleştirmenin mümkün olmadığı durumlarda, JavaScript dosyalarını eşzamansız olarak veya sayfanın geri kalanı yüklendikten sonra yüklemek için kullanılabilen "async" ve "defer" adlı HTML öznitelikleri vardır.

Günümüzde JavaScript'e başvurmak için en yaygın yer, belgenizin alt kısmında, kapanış etiketinden hemen öncedir. Ancak, JavaScript'i yüklemek için daha gelişmiş teknikler vardır. Yine, Filament Group bu konuda tonlarca araştırma yaptı ve süper hızlı bir sayfa yükleme süresi hedefliyorsanız kullanabileceğiniz birkaç açık kaynak projesine sahip (bu arada, Filament Group'a hiçbir şekilde bağlı değilim; Sadece eşyalarının harika olduğunu düşünüyorum). En iyi yaklaşım, <head> içindeki küçük bir işlevi satır içine alarak komut dosyalarını dinamik olarak yüklemek gibi görünüyor; bu daha sonra sayfanın geri kalanını engellemeden komut dosyası etiketleri ekler. Daha fazla bilgi için loadJS betiğine bakın.

Görüntüler

Görüntüler genellikle bir sayfadaki en büyük dosyalardır ve sayfa yükleme süresindeki en büyük gecikmeden sorumludur. Görüntülerle ilgili iyi olan şey, CSS ve JavaScript'in aksine, çoğu tarayıcının bunları eşzamansız olarak yüklemesidir. Bu, en azından bir sayfanın algılanan performansına yardımcı olur, ancak yine de A) mümkün olduğunca az resim sunduğunuzdan ve B) bu resimlerin mümkün olduğunca sıkıştırıldığından emin olmak istersiniz.

Görüntülerde mümkün olduğunca fazla fazlalığı sıkıştırmak için sıkıştırma araçları gereklidir. ImageOptim, Grunt gibi görev yürütücülerle kullanım için OptiPNG ve jpegtran ile birlikte bunu iyi yapan harika bir Mac uygulamasıdır.

yazı tipleri

Web yazı tipleri bu günlerde çok yaygın. Google Web Yazı Tiplerini neredeyse her projede kullanıyorum, ancak son zamanlara kadar, sadece <head> içinde bunlara atıfta bulunarak aldığım performansın farkına varmadım. Performans artışı küçük, ancak bu sitelerin hızlı bir şekilde parıldamasını sağlamakla ilgili bir makale, bu nedenle her şey önemlidir! Web yazı tiplerini kullanarak en iyi performansı elde etmek için Google ve Typekit tarafından ortaklaşa geliştirilen Web Yazı Tipi Yükleyicisini kullanmanızı öneririm. Hem Google Web Yazı Tipleri gibi üçüncü taraflardan yazı tiplerinizin yüklenmesini yöneten hem de eşzamansız olarak yüklenmesine izin veren açık kaynaklı bir komut dosyasıdır (henüz bu kelimeden bıktınız mı?).

Beklendiği gibi, Web Font Loader'ı projenize entegre etmek için bazı yapılandırmalar gerekiyor, bu yüzden nasıl kurulacağına ilişkin ayrıntılar için GitHub'daki projeye göz atın.