Gutenberg ile Pagespeed puanınızı 100’e çıkarın

Yavaş sayfa oluşturucularıyla çalışan bir tema ve onlarca eklenti ile WordPress’in hantal bir içerik yönetim sistemi olduğunu düşünüyor olabilirsiniz. Peki size sitenizin aynı tasarımıyla Gutenberg kullanarak Pagespeed skorunuzu 100’e çıkarabileceğinizi söylesem. Kulağa harika geliyor değil mi? 

Yavaş bir WordPress sitesine sahip kullanıcılar web sitelerini optimize ettirmek ve Pagespeed, GTmetrix gibi performans ölçüm araçlarındaki skorlarını yükselttirmek için uzmanlara tonlarca para ödüyorlar. Onca uğraş ve harcanan para sonucunda web sitelerini kullanıcı dostu hale getirmiş oluyorlar. Aslında WordPress yavaş bir sistem değil, aksine 2018 yılında tanıtılan blok düzenleyici eklentisi Gutenberg ile harika işler başarabilen hızlı bir sistem.

Gutenberg nedir?

Zaten halihazırda gündelik WordPress kullanıcısıysanız Gutenberg adını en az bir kez duymuş olmalısınız. Yine de kısaca açıklamak gerekirse WordPress 5.0 sürümünden sonra 54 dilde WordPress’in içerisinde varsayılan olarak sunulan Gutenberg, WordPress’in Gutenberg Takımı tarafından geliştirilen bir blok düzenlenleyicisidir. 

Objektif olmak gerekirse yazının başından beri öve öve bitiremediğim bu eklentiye WordPress kullanıcıları tarafından ortalama beş üzerinden iki yıldız verildiğini de paylaşmam gerekiyor. Bunun başlıca sebeplerinden aslında en çok öne çıkanı WordPress’in yıllardır kullandığı klasik düzenleyicisini yeni WordPress güncellemesiyle birlikte bir anda Gutenberg’e dönüştürmesi ve kullanıcıların afallaması oldu. Sonuçta alışkanlıklar her zaman en iyisidir ve yeni bir şeye alışmak ciddi bir adaptasyon süreci gerektirir. 

Öyle de oldu. WordPress ekibi kullanıcılardan gelen tepkiler ışığında klasik düzenleyiciyi geri getirebilecek eklentiyi piyasaya sürdü ve bu eklentinin 2024 yılına kadar desteklenmesi ön görülüyor. Tabii ki bu süre geri bildirimler doğrultusunda uzayabilir de. 

İşin özü Gutenberg geliştirilmekte olan yerleşik bir blok editörü ve minimum optimizasyonla Pagespeed puanınızı 100’e kadar çıkarabilecek tek anahtar. 

Gutenberg ve klasik düzenleyici karşılaştırması

Bu aslında hiç de adil olmayan bir karşılaştırma. Sonuç olarak Gutenberg, içinde onlarca blok barındıran ve bir o kadar da özelleştirme seçeneği sunan bir blok düzenleyici. Klasik düzenleyici ise daha çok blog yazıları ve standart sayfalar için geliştirilen basit bir metin editörü. Klasik düzenleyici desteklenmeye devam ettiği sürece yazı yazma hevesinizi hangisi daha iyi karşılıyorsa yazım aşamasında o editörü kullanabilirsiniz. Çünkü Gutenberg’in bir diğer özelliği de harika bir yazı editörü bulundurması. 

Ancak bu makalemizin amacı sitenizi Gutenberg temelli bir siteye dönüştürmek olduğu ve Gutenberg bile hala onlarca tonlarca düzenlemesine ihtiyaç duyuyorken bu düzenlemeleri klasik editör ile yapmak mümkün değil. Dolayısıyla Gutenberg’e alışmaya çalışmak iyi bir fikir olabilir. 

Gutenberg ve diğer sayfa oluşturucular karşılaştırması

Gelelim yazının en can alıcı kısmına. Bu başlığı aslında Gutenberg ve A sayfa oluşturucusu karşılaştırması gibi birçok madde halinde incelemek mümkün olsa da Gutenberg tek bir özelliğiyle hepsini alt ettiği için bir başlık altında incelemeyi uygun gördüm. 

Biraz daha genel bahsetmek gerekirse piyasada WordPress için geliştirilen birçok popüler sayfa oluşturucusu bulunuyor. Bunlar WordPress eklenti marketinden indirilebildiği gibi satın aldığınız temaların içerisinde de sitenize yüklenebiliyor ve bu temalar bahsettiğim hantal sayfa oluşturucularıyla çalıştığı için sayfa oluşturucularını kaldırmanız sitenizi kullanılamaz hale getirebilir. Bundan kurtulmanın en basit yolu mevcut temanızı Gutenberg’e dönüştürmek veya Gutenberg temelli çalışan bir temaya geçiş yapmak üzere ondan kurtulmak olacaktır. 

Burada üçüncü taraf sayfa oluşturucularıyla çalışan web sitenizin asla optimize olmayacağından ve her zaman yavaş çalışacağından bahsetmiyorum. Sadece bu büyük sabır ve bütçe gerektiren bir uğraş. Yine de son kullanıcı olarak Gutenberg’i mi diğer sayfa oluşturucuları mı kullanacağınız sizin tercihiniz olacaktır. Diğer yandan Gutenberg ile aynı görünüm ve özellikleri elde edebileceğiniz gibi sadece işini güzel yapan basit bir cache eklentisi kullanarak hız skorlarınızı kolaylıkla 100’e kadar çıkarabilirsiniz. Günümüzde bir dakika bile çok değerliyken hantal web sitenizi optimize etmek için neden zaman harcayasınız ki?

Peki insanlar neden sayfa oluşturucuları Gutenberg’e göre daha çok tercih ediyorlar? Sebebi basit. Gutenberg henüz çok yeni ve tek başına hala yeterli bir blok düzenleyici değil. Ancak hemen vazgeçmeyin. Yeterli hale getirmek için bazı geliştiriciler Gutenberg ile çalışan özelleştirilebilir bloklarını eklenti haline getirip sunuyorlar. Bunların büyük bir çoğunluğu ücretsiz olarak sunulurken premium özellikler isteyen kullanıcılar geliştiricilere belli bir miktarda lisans ücreti ödeyerek sınırları daha da genişletebiliyorlar. Yine de bazı özel görünümleri elde edebilmek için css bilgisi gerekebiliyor. Gözünüz korkmasın, blok düzenleyicinin içerisindeki ayarlamalar çoğu zaman fazlasıyla yeterlidir. 

Aslında başlığın ilk satırlarında kısaca bahsetmiş olsak da biraz daha teknik konuşmamızın vakti geldi. Sayfa oluşturucu eklentilerini kullandığınızda bir yığın dağınık kodla birlikte içerisinde barındırılan özelliklerin farklı farklı yerlerden çağırıldığı bir sistem önünüze geliyor. Bu durum gereksiz eklenti kullanımında da aynı şekilde. İletişim formunu sadece iletişim sayfanızda kullandığınızı düşünebilirseniz. Birçok popüler eklenti sizin işiniz olmasa da kalıntılarını ana sayfada bile çağırıyor. Biz tam özellikli basit bir sistem arıyorken sadece görüntü odaklı çalışan bu sayfa oluşturucularla sürükle bırak yöntemini kullanarak harika görünümler elde edebilseniz de gereksiz yüklere de ev sahipliği yapmış oluyorsunuz. Durum böyle olunca ne oluyor? 

Cevabı basit. Web siteniz yavaş çalışıyor, hız skorları yerlerde oluyor ve hosting servisinizin kaynakları yetersiz geliyor. Çözümü de cevabı kadar basit. Tekrar hatırlatmak gerekirse Gutenberg kullanmak.

Bu durumda kişisel yorumum sayfa oluşturucularının pazarda kalıcı bir edinebilmesi için eklentilerini Gutenberg kadar optimize hale getirmek olacaktır. Sonuçta sayfa oluşturucuların şimdilik Gutenberg’den daha basit bir arayüze sahip olduğundan bir de Gutenberg kadar optimize çalışırsa bilinçli kullanıcılar dahil birçok kullanıcı sayfa oluşturucuları eklentilerini kullancak hatta ihtiyaçlarına göre satın alacaklardır. Bunu yapmaya başlayan ve sürekli hız optimizasyonu üzerine testler yapan en büyüklerden birkaç sayfa oluşturucu eklentisi var ancak testler öyle gösteriyor ki henüz hız konusunda optimizasyon yapılmadığı sürece hala mükemmel değiller. 

Peki bu eklentiler kötü mü? Asla değiller. Hatta dediğim gibi doğru bir şekilde geliştirilmesi durumunda uzun vadede akla gelecek ilk seçenek olmayı başarabilirler. Üstelik yüzlerce tema şu anda sayfa oluşturucularıyla yapılmışken. Gutenberg ile hız skorları 100’e kadar çıkarılabilirken sayfa oluşturucularıyla çıkarılamıyor mu? Tabii ki çıkarılabiliyor, örnekleri bolca var. Kullanmak ya da kullanmamak sizin tercihiniz. Bu tamamen sizin alışkanlıklarınız ve optimizasyon yeteneklerinizle doğru orantılı.

Sayfa oluşturucu eklenti kullanmanın artıları

• Siteniz üzerinde tam özelleştirme yetkisine sahip olursunuz. Çoğu düzenlemeyi sürükle bırak yöntemiyle hızlıca yapabilirsiniz.
• Popüler olduklarından kendi gelişmiş araçları dışında ücretli ve ücretsiz olarak birçok ek araç sunulur.
• Birçok popüler tema sayfa oluşturucu eklentileriyle tasarlandığından temalarla uyumluluğu fazladır.

Sayfa oluşturucu eklenti kullanmanın eksileri

• Web sitenize gereksiz yükler bindirdiğinden iyi optimize etmemeniz durumunda genellikle yavaştırlar. Eğer bilginiz yoksa iyi bir optimizasyon uzmanına ihtiyaç duyulur.

Aslında hepsi bu kadar. Sayfa oluşturucu eklentileri süper işler çıkarabilse de Gutenberg’e kıyasla hız olarak dezavantaja sahiptir.

Gutenberg kullanmanın artıları

• WordPress’in içinde varsayılan olarak sunulur. Ek bir kurulum gerektirmez.
• Hafiftir. Güzel bir optimizasyon eklentisiyle hız skorlarında yükselme görülebilir. Belirli siteler hariç normal özellikler içeren web siteleri için ek bir optimizasyon masrafına gerek yoktur.

Gutenberg kullanmanın eksileri

• Şu an için tek başına sayfa oluşturucu eklentiler kadar gelişmiş seçeneklere sahip değildir. Tasarımı tamamiyle istediğiniz hale dönüştürmek için kod bilgisine ihtiyacınız olabilir.
• Kısıtlı tema ve eklenti seçeneğine sahiptir. 

Web sitenizi Gutenberg’e dönüştürmeye hazırlanın

Kemerlerinizi bağlayın ve uçuşa hazırlanın. Kötü kodlanmış yavaş bir tema veya optimize edilmemiş sayfa oluşturucu kullanan harika görünümlü bir web sitesine sahip olabilirsiniz. Hiç fark etmez. Web sitenizi Gutenberg’e dönüştürmek ve blok editörü ile yeniden oluşturmak için doğru yerdesiniz.

Başlamadan önce her ihtimale karşı web sitenizin yedeğini almanız gerekiyor. Eğer bunu nasıl yapabileceğinizi bilmiyorsanız hosting servis sağlayıcınızdan rica edebilir veya sunucu yöneticiniz ile görüşebilirsiniz. Ancak ne olursa olsun en ufak bir düzenleme yapacak olsanız bile yedeğinizi almadan başlamayın. 

Not olarak eklemek gerekirse yedek konusu sadece web sitenizle oynayacağınız zaman değil belirli periyotlarla web sitenizin içeriğine göre alınması gereken ciddi bir nokta. Sonuç olarak birçok barındırma servisi web sitenizi yedeklediğini söylese de bu yedekler olası arızaları gidermek amaçlı alınıyor. Eğer özel bir yedekleme sözleşmeniz yoksa hizmet sözleşmenizde muhtemelen yedek almanın sizin sorumluluğunuzda olduğunu göreceksinizdir. Bu koşul aslında tamamen normal. Çoğunlukla başa gelmeden durumun ciddiyetini anlayamıyor olsak da olası veri kayıpları can sıkıcı olduğu için uyarımızı yapmış olalım.

Yedeklerinizi de aldığınıza göre tercih yapmanız gereken ilk noktaya geldik. Özel tasarımlı bir WordPress sitesine sahip olmak istiyorsunuz yoksa Gutenberg uyumlu hazır tasarıma sahip temalar kullanmak mı?

Tabii bu soruyu havada bırakmamak gerekiyor. Özel tasarım tema ve hazır temalar arasındaki farklardan, avantajlarından detaylı olarak bahsedelim.

Bu konunun aslında öncelikle biraz da projenize ayırdığınız bütçeye göre belirlenmesi gerekiyor. Hazır sunulan WordPress temaları binlerce kişinin kullanımına açıktır, bu nedenle tema yapımcısı sürekli kazanır. Dolayısıyla hazır temaların ücretleri özel tasarım temalara kıyasla büyük oranda düşüktür. Hatta başlangıç olarak ücretsiz temaları bile tercih edebilirsiniz. 

Özel tasarım temalara gelecek olursak bu tip temalar ihtiyaçlarınıza uygun tasarlanacağından ve sadece size ait olacağından ücretlendirmesi hazır temaların kat kat üzerinde olacaktır. Özel tasarlanan temalar sizin direktifleriniz dinlenerek yapılacağından her kısmı özelleştirilebilirdir. Bu seçenek ile yapabileceklerinizin sınırı olmadığı için aklınıza gelen spesifik bir işlevi kolaylıkla temanıza entegre edebilirsiniz.

Hazır tema kullanmanın artıları

• Önceden hazırlandığı için satın aldığınızda anında kurulum yapabilirsiniz.
• Hızlı bir başlangıç yapmak isteyen kullanıcılar yüzlerce ücretsiz WordPress temasına erişebilirler.
• Özel tasarım WordPress temalarına göre ucuzdurlar.

Hazır tema kullanmanın eksileri

• Binlerce web sitesinde yer alan aynı görünüme sahip olursunuz.
• Eğer özel bir anlaşmanız yoksa güncellemeler ücretlidir.
• Sınırlı özellik sunulur. 
• Genellikle dokümantasyon ve forum desteği sunulur.
• İhtiyaçlarınıza göre özelleştirmek kısıtlıdır.

Özel tasarım tema kullanmanın artıları

• Sadece size özel benzersiz bir tasarıma sahip olursunuz. Dolayısıyla profesyonelliğiniz ve marka itibarınız artar.
• Sadece sizin isteklerinize ve ihtiyaçlarınıza göre yapılandırılır.
• Anlaşmanız dahilinde geliştiricinizden birebir destek alabilirsiniz. 

Özel tasarım tema kullanmanın eksileri

• Hazır temalara göre pahalıdırlar. 
• Sıfırdan tasarlanacağından zaman ayırmak gerekir.
• Genellikle tek seferlik projeler olduklarından güncellemeler için ücretler doğabilir.

Bana hangisini öneriyorsun diye soracak olursanız eğer projenize belli bir bütçe ayırdıysanız tercihim kesinlikle özel tasarlanan bir WordPress temasından yana olacaktır.

Gutenberg kullanmak için minimum gereksinimler

WordPress’in içinde varsayılan olarak yer alan Gutenberg yapısı gereği minimum kaynak tüketerek hızlı web siteleri oluşturmayı amaçladığı için bu blok düzenleyici kullanmak fazla gereksinim gerektirmez. Yine de amacınız hızlı bir web sitesi oluşturmak olduğundan minimum gereksinimlere bağımlı kalmaksızın iyi bir sunucuyla başlangıç yapmanız daha iyi olacaktır.

Minimum gereksinimleri paylaşmak gerekirse PHP sürümünüzün 7.4 ve üzeri olmasını önerebiliriz. PHP sürümlerinin her yenisinde sürekli güvenlik ve web site performansı konusunda optimizasyonlar yapılır. Ayrıca PHP 7.4’den eski sürümleri kullanmanız durumunda güvenlik sorunlarıyla karşılaşmanız oldukça olasıdır. Siber dünya sürekli olarak geliştiğinden belirli güncellemeleri tamamlamak gerekir ve PHP’nin eski sürümleri artık güncel olmadığından siteniz yeni tip güvenlik açıklarına karşı korumasız olabilir.

Şimdi de biraz veritabanı sistemini tartışalım. Sunucunuz üzerinde MySQL veya MariaDB kullanıyor olabilirsiniz. Bu iki sistem de temelde aynı görevi yapıyor. Temel sebebimizin hız ve performans olduğunu hatırlatarak WordPress tarafından minimum olarak MySQL 5.7 veya MariaDB 10.3 sürümlerini kullanmanız öneriliyor. 

Bunların haricinde Gutenberg, JavaScript ile çalıştığından JavaScript destekleyen bir tarayıcı kullanmanız gerekiyor. Bunu artık neredeyse tüm tarayıcıların desteklediğini belirletim.

Hazır tema ile Gutenberg’e geçiş adımları

Bu aşamada Gutenberg ile çalışan hazır WordPress temasını dikkatli bir şekilde belirlemeniz gerekiyor. Gutenberg ile Pagespeed puanınızı 100’e kadar çıkarabiliyor olsanız da gereksiz bloklar ve kodlar kullanılarak yapılmış temalar bu isteğinizi yerine getirmeyecektir. Bu noktada Pagespeed, GTmetrix gibi performans ölçme araçlarını kullanarak demo siteyi ölçmeniz, satın alanların yorumlarını okumanız ve temayı internette araştırmanız iyi bir tercih olacaktır.

Sadece hız skoru odaklı bir çalışma ya da araştırma yapmamalısınız. Gerçek hız denilen kavramı kısaca açıklayacak olursak ziyaretçinizin web sitenizde gezinme hızını ifade eder. Bu kavram şuradan ortaya çıkıyor. Bazı optimizasyon eklentileri ile hız skorları yüksek seviyelere çıkarılsa da aslında baktığınızda sitenin hızları berbat seviyede oluyor. Bunun sebebi ise bu eklentilerin performans ölçüm araçlarının botlarını kandırmaya yönelik yapılması oluyor. Size vereceğim bir sır da şu olacaktır. Arama motorları ziyaretçilerine önem veren web sitelerini sever ve onları öne çıkarırlar. Gerçek hızı kötü olan ancak botların ölçtüğü hız skorları yüksek olan web sitelerinin artık fazlasıyla gelişmiş akıllı olan arama motorlarını kandırması mümkün değildir. Kısaca hem hız skorlarınız hem de gerçek hızınız önemlidir. 

Hız konusunu anladığınıza göre tam olarak ne yapmak istediğinizin kararını vereceğiniz kısma geliyoruz. Hazır WordPress teması mı kullanmak istiyorsunuz yoksa önceden tasarlanmış Gutenberg şablonlarını mı? 

Bu iki kavramı şöyle açıklayabiliriz: Hazır WordPress temalarının genellikle kendine özel ayarlar sekmesi bulunur ve bu sekme üzerinden sitenizin renklerinden logosuna birçok ayarı tek sayfa üzerinden yapabilirsiniz. Kısacası demo görünümle birebir temayı sitenize kurmuş, ayarlamalarını yapmış ve kendi logonuzu ekleyip içeriklerinizi paylaştığınızı düşünebilirsiniz. Temanızı indirdiğinizde dosya içinde genellikle demo içerik ve dokümantasyon bulunur ve kurulum adımları detaylı şekilde bu doküman içerisinde açıklanır. 

Gutenberg şablonlarında ise bunlar önceden Gutenberg bloklarıyla hazırlanan görünümlerdir ve sayfanıza 3. taraf bir eklenti yardımıyla eklenebilir. Bu şablonlar görünüm üzerinde düzenlemeler yapmak isteyen meraklı kullanıcılar için harikadır. Gutenberg şablonlarını kullanırken blok editörü destekleyen bir temanın da kurulumunu yapmanız gerektiğini unutmayın.

Hazır temayı WordPress sitenize kurma

Seçtiğiniz hazır tema eğer WordPress kütüphanesi içerisinde yer alıyorsa admin panelinize giriş yaptıktan sonra Temalar > Yeni Ekle seçeneğine ilerleyin. Ardından seçtiğiniz temanın adını aratıp Şimdi Kur > Etkinleştir adımlarıyla devam edin.

Temanızı resmi bir tema satış pazarından edindiyseniz temayı satın aldığınız hesabınız üzerinden Tüm Dosyaları İndir butonuna tıklayın. Bilgisayarınıza indirilen sıkıştırılmış dosyanın içerisinde opsiyonel olarak dokümantasyon ve demo içerikler bulunur. Bunlar daha sonra işinize yarayabileceğinden dolayı kolay bulabileceğiniz bir dosyaya kaydedebilirsiniz. 

Bu bahsettiğim dosyaların haricinde temanızın asıl dosyası ve “Child” olarak adlandırılan çocuk tema bulunur. Eğer temanızın kodlarında düzenleme yapmayı planlamıyorsanız bu asıl temanızın yanında verilen alt temayı sitenize kurmanıza gerek yoktur. Temanızla aynı dosyada sunulan çocuk temalar web sitesinin kodlarında düzenleme yapmak isteyen kullanıcılar için mükemmeldir. Çünkü temanıza ileride bir güncelleme geldiğinde yaptığınız kod değişikleri kaybolacağından bunları çocuk temada saklamış ve sitenizde çocuk tema etkin durumda olacağından yaptığınız değişikler sitede görünmeye devam ediyor olacak. Eğer child temayı kullanmak istiyorsanız iki temayı da web sitenize yükleyip child tema olanı etkinleştirmeniz gerekir. 

Şimdi indirdiğiniz WordPress temasını kurma aşamasına gelelim. Bunu Temalar > Yeni Ekle > Tema Yükle yoluyla yapabileceğiniz gibi FTP erişimi olan güvenilir bir uygulama aracılığıyla wp-content>themes klasörünüzün içerisine de yükleyebilirsiniz. Hosting sağlayıcısı tarafından yükleme limitleri kısıtlandırılmış kullanıcılar FTP ile yükleme seçeneğini değerlendirebilirler. Son olarak temanızı yüklediğinize göre etkinleştirmeniz gerekiyor. Bunu da aynı şekilde. Görünüm > Temalar altından kolaylıkla yapabilirsiniz.

Genellikle ücretli temalarda olsa da çoğu tema eklentiler gerektirir ve bunları kurmanızı isterler. Bu eklentilerin temanın özelliklerini yerine getirmesi için kurulması gerekir. Ancak ne kadar fazla eklenti o kadar az performans demek olduğundan işinize yaramayacak özellikleri yüklememeyi düşünebilir veya daha az eklenti gerektiren temaları tercih edebilirsiniz. 

Bu eklentileri de kurduktan sonra eğer varsa demo içeriği kurmayı düşünebilirsiniz. Demo içeriğinizi kurmak için Görünüm sekmesinin altından Demo İçerik sayfasına ilerleyebilirsiniz. Sayfa çalışmıyorsa veya otomatik demo içerik kurulum kısmı arızalıysa temanızı indirdiğinizde verilen sıkıştırılmış dosya içerisindeki demo içerikleri farklı bir eklenti yardımıyla manuel yüklemeyi deneyebilirsiniz. Eğer hala sorun yaşıyorsanız tema yapımcınızla iletişime geçmeniz gerekebilir. 

Kurulum kısmı da tamamladıktan sonra temanızı kendinize uygun olarak ayarlamanız gerekiyor. Ayarlar her temada farklılık göstereceğinden size en uygun ayarlamalar hakkındaki bilgiye tema dokümantasyonu içerisinden ulaşabilirsiniz. 

Yukarıdaki adımlar tema olarak sunulan hazır görünümler içindi. Şimdi de bloklar üzerinde daha fazla özelleştirme yapmak isteyen kullanıcıların tercih ettiği Gutenberg şablonlarının kurulumundan bahsedelim. Bunun için Gutenberg bloklarıyla entegre çalışan hızlı bir eklenti kullanmanız gerekiyor. Bu eklentilerin ücretsiz sürümleri çoğu zaman yeterli olduğundan WordPress sitenizin kontrol paneline giriş yaptıktan sonra Eklentiler > Yeni Ekle adımına ilerleyip kendinize uygun eklentiyi sitenize kurabilirsiniz. Hangi eklentiyi kurmanız gerektiğinden emin değilseniz yüksek puan almış herhangi birini inceleyebilirsiniz. Gutenberg için farklı geliştiriciler tarafından yapılan her eklentinin ücretsiz şablonlar içermeyeceğini not edin.

Eğer ücretli sunulan eklentiyi kurmak istiyorsanız aynı tema kurulumundaki gibi indirdiğiniz eklentiyi Eklentiler > Yeni Ekle > Eklenti Yükle alanına veya FTP uygulamanız üzerinden wp-content>plugins dizinine yükleyebilirsiniz.

Gutenberg’i genişletmek ve daha fazla yetenek kazandırmak için geliştirilen bu eklentiler içerisinde ücretsiz ve ücretli olmak üzere birçok başarılı blok şablonlar barındırır. Bu şablonlardan herhangi birini kurmak için eklentinin blok editörün üst kısmına eklediği Şablon Ekle butonuna tıkayabilir ve size uygun olan görünümü seçebilirsiniz. Kurulum bununla da sınırlı kalmıyor. Bu bloklara farklı eklentiler aracılığıyla edindiğiniz diğer blokları ekleyerek da kapsamlı bir web sitesi oluşturabilirsiniz. Ayrıca kendi bloklarınızı tasarlayabilir ve bloklar üzerinde tam değişiklik yapabilirsiniz. 

Özel tasarım tema ile Gutenberg’e geçiş adımları

Herhangi bir program aracılığıyla tasarladığınız görünümü WordPress’e Gutenberg kullanarak aktarmak için yazılım bilgisine ihtiyaç duyulabilir. Tasarımınız bir kenarda dururken gelin web sitenizi özel tasarım için hazırlayalım. 

Hazır bir tema kurulumu yapmadığınız için önceden herhangi bir tema dosyasına sahip olmayabilirsiniz. Merak etmeyin, eğer Gutenberg uyumlu güncel bir tema arıyorsanız WordPress topluluğu tarafından sunulan Yirmi Yirmi Üç temasını kullanabilirsiniz. Bu tema güncelleme alacağından iyi bir tercih olacaktır. Önceden hazırlanan renk stilleriyle gelen Yirmi Yirmi Üç teması boş bir tema olduğundan Gutenberg bloklarınız için idealdir. 

Web sitenize temel attınız ancak siz özel bir tema oluşturuyorsunuz. Dolayısıyla en basitinden stil ve fonksiyon dosyasında değişiklikler yapmanız gerekecektir. Düzenlemeleri kurduğunuz temanın dosyaları ile de yapabilirsiniz ancak bu tema güncelleme aldığında yaptığınız tüm değişikler kaybolayacağından dolayı child yani çocuk temayı oluşturmanız gerekiyor. Child temadan kısaca bahsetmiştik ancak yeniden hatırlatmak gerekirse bu ana temanızda düzenleme yapmanızı sağlayan alt bir temadır. Kurulum sonrasında iki tema da yüklü olmalı ama sitenizdeki etkin tema child tema olmalıdır.

Alt temanın mantığını bir kez daha hatırlattığımıza göre gelelim oluşturmaya. Bu işlem için güvenilir FTP uygulaması aracılığıyla dizininize erişmeniz gerekir. Web sitenizin ana dizinine eriştikten sonra wp-content/themes klasörüne ilerleyin. Burada şu anda mevcut olan temanızın dosya ismini görmelisiniz. Örneğin dosya isminiz /twentytwentythree ise child temayı oluşturmak için yeni bir dosya oluşturup /twentytwentythree-child adını verebilirsiniz. Yeni oluşturulan alt temanın çalışması için fonksiyon ve stil dosyalarına ihtiyaç duyulur. Ayrıca temanız için herhangi bir ekran görüntüsüne sahipseniz bu ekran görüntüsünü screenshot.png isminde ayarlayıp child tema dizininize yükleyebilirsiniz. 

Yukarıda bahsettiğimiz dosyalar için birkaç kod örneğini aşağıda bulabilirsiniz. Alt temanızın stil dosyasını oluşturmak için tema dizininde style.css isimli bir dosya oluşturun ve aşağıdaki kodları kendinize uygun şekilde düzenleyerek dosyanızı kaydedin.

Fonksiyon dosyanız için de aynı dizine functions.php isimli bir dosya oluşturun ve aşağıdaki kodları kendinize göre düzenleyin.

Şimdi sıra sitenizin üst ve alt kısmını oluşturmaya geldi. Aktif olan WordPress temanız içerisinde header.php ve footer.php gibi dosyalar mevcut değilse bunları kendiniz oluşturmalısınız. Eğer yeteri kadar yazılım bilgisine sahip değilseniz bir yazılımcıdan destek alabilirsiniz. Ayrıca bunu yapan ücretli eklentiler yardımıyla site üst kısmı, alt kısmı, yazı sayfası gibi birçok alanı Gutenberg blokları ile yapılandırabilirsiniz. Ayrıca Gutenberg’in 2022 yılında yayınladığı tam site düzenleme özelliği ile birçok alanı herhangi bir genişletme eklentisine gerek kalmadan düzenlemeniz mümkün.

Bundan sonrası tamamen sizin yaratıcılığınıza kalıyor. Unutmayın, yapabileceklerinizin sınırı yok. Yalnızca planlı şekilde ilerlemeniz gerekiyor. Planlamaya ilk olarak Google Analytics gibi bir araç yardımıyla web sitenizin en pasif olduğu yani az ziyaretçinizin olduğu zaman dilimini belirlemeyle başlayarak ziyaretçi memnuniyetinizi etkilememiş olursunuz. Örneğin sabah saatlerinde sitenizde ziyaretçi sayınız az ise projeniz tamamlandıktan sonra güncel projeyi sabah saatlerinde yayına almalısınız. 

Mevcut bir tasarımı Gutenberg’e dönüştürecekseniz işinize yarayabilecek blokları tasarımınızı da göz önünde bulundurarak önceden belirlemeniz hız kazanmanıza olanak sağlayabilir.

Eksiksiz bir WordPress sitesi oluşturmak istiyorsanız önerim her şeyi not ederek ilerlemeniz olacaktır. Ana sayfa üzerinde çalışıyorsanız daha sonra yapacaklarınız, üzerinde çalıştıklarınız ve aklınıza gelen fikirleri dijital bir not defterinde tutmak aslında çok önemlidir. Böylece daha sonra projeniz üzerinde çalışmaya devam ettiğinizde ne yapacağınız konusunda kaygılanmadan sadece iş odaklı çalışabilirsiniz.

Blog sayfası nasıl oluşturulur?

Özel bir tema oluşturuyorsanız ve kemik tema kullanmak yerine sıfırdan tema yazmayı tercih ediyorsanız muhtemelen standart sayfalarınızın gösterilmesi için herhangi bir dosyanız olmayacaktır. Eğer blog özellikli bir web sitesi yapıyorsanız yazı sayfanızın sitenizde görünmesi için single.php adlı dosyaya ihtiyacınız var demektir. Ayrıca benzer bir dosyayı blog sayfasından bağımsız olarak standart sayfalarınız için de oluşturmanız gerektiğini unutmayın.

Yazılım bilgisine sahipseniz bu sayfayı kodlamayı tercih edebilirsiniz. Diğer bir yöntem olarak ise Gutenberg’in blok editörünü kullanarak sayfayı yapılandırabilirsiniz. Nasıl mı? Gutenberg varsayılan olarak bu özgürlüğü tam anlamında sunmasa da dinamik alanlar oluşturmaya izin veren özel bir güçlendirici eklenti kullanarak sayfanızı hızlıca tasarlayabilirsiniz. Bu sayfanın genel olarak yazılarınızda görünmesini sağlamak için Gutenberg temelli tema oluşturma eklentilerine göz atabilirsiniz.

Unutmayın, amacımız minimum eklentiyle maksimum performans elde etmek. Dolayısıyla benim önerim hem blok editöre yeni özellikler kazandıran hem de tema oluşturmaya yardımcı olan hafif eklentileri incelemenizden yana olacaktır.

Blog sayfasında yer alması gerekenlere gelecek olursak yazı başlığı, kısa özeti, öne çıkan görseli, yazar adı, sosyal paylaşım butanları ve tabii ki yazı içeriği gerekiyor. Yorum alanında özel bir yorum dosyanız dosya Facebook Comments, Discourse gibi web sitelerinde yorumları listemeyi sağlayan üçüncü parti araçları kullanmayı tercih edebilirsiniz. 

Siteniz blog odaklıysa içeriklerinizin okunabilirliği hem ziyaretçileriniz hem de arama motorları tarafından oldukça önemlidir. Bu nedenle sayfanızı modern olduğu kadar minimal tutmaya da özen göstermelisiniz.

Yazar sayfası nasıl oluşturulur?

Wordpress sitenizde yazar sayfası oluşturmak için author.php dosyasına ihtiyacınız vardır. Bu sayfada yazar adı, kısa biyografisi, sosyal ağ bağlantıları ve yazılarına yer verebilirsiniz. 

Yazar sayfalarını sanki bir sosyal ağ profil sayfasıymış gibi düşünebilirsiniz. Hatta buraya yazarın Twitter akışını veya Instagram gönderilerini iframe yardımıyla ekleyebilirsiniz. Iframe kodları genellikle sosyal ağ sayfaları tarafından hazır olarak sunulsa da bazı durumlarda daha gelişmiş bir görünüm elde etmek için buna özel geliştirilen eklentileri kullanabilirsiniz.

Arşiv sayfasında neler olmalı?

Yanıt basit. Yazılarınızın güzel bir şekilde listelendiği ve tercihe göre bileşenlerinizin yer aldığı sayfanız gibi düşünebilirsiniz. Oluşturmanız gereken dosya ise archive.php 

Arşiv sayfanızı arama sonuçlarınız, kategorileriniz ve etiketleriniz ile ortak kullanmak için birkaç yapılandırma yapmanız gerekir. Böylelikle sayfaların içerikleri genellikle aynı görüneceğinden bu sayfaları tekrar tekrar sıfırdan kodlamanıza veya blok editör ile yeniden oluşturmanıza gerek kalmaz. Örneğin kategori sayfanız için category.php adlı dosyayı temanızın içerisine kaydedebilirsiniz.

Koşullu sayfalar nasıl oluşturulur?

Temel sayfa şablonunuzun haricinde belki etkinliklerinizi listelemek veya haftanın kitabını tanıtmak için özel bir sayfa şablonu oluşturmak istiyor olabilirsiniz.  

İçerisinde tema yapıcı özelliği de yer alan Gutenberg özelleştirici eklenti kullanıyorsanız bunu kolaylıkla yapabilirsiniz. Tek yapmanız gereken şablon sayfası tasarlamak ve bu şablonu koşullayarak istediğiniz sayfaya atamak olacaktır. 

Örneğin şablonunuzu oluşturduktan sonra “Sayfalar > Eşitse > Etkinlikler Sayfası” koşulunu tanımlayabilirsiniz. Eğer yazılım bilginizle koşullu sayfa oluşturuyorsanız özel bir dosya oluşturarak bu işlevi aynı şekilde yerine getirebilirsiniz. 

Tabii ki yazıda bahsettiğimiz sayfalar temel sayfaların sadece birkaçı. Yapmak istediğiniz web sitesine göre yerine getirmesi gereken işlevleri oluşturmak için ayrı ayrı birçok tema dosyasına ihtiyaç duyabilirsiniz. Bunun için yeterli bilgiye sahip değilseniz profesyonel bir WordPress uzmanıyla çalışmanızı öneririm.

Gutenberg hız optimizasyonu nasıl yapılır?

WordPress’i yüklediğinizde varsayılan olarak kurulan blok editörü Gutenberg zaten optimize bir araç olduğundan ekstra optimizasyon işine ihtiyaç duymadan çalışır. Yine de web sitenizin açılış hızını milisaniyelere kadar indirmek istiyorsanız bazı küçük optimizasyon ayarlarına ihtiyaç duyabilirsiniz.

Bunlardan ilki yazı içerisinde çokça bahsettiğimiz minimum eklenti kullanmak olacaktır. Eklentiler sitenizin birçok yerinde fazlaca istek oluşturacağından web siteniz fazla eklentiye sahipken yavaş çalışabilir. 

Eğer bir özelliği eklentisiz olarak yapabiliyorsanız eklentilerin ilk tercihiniz olmaması gerekir. Haklısınız, WordPress’in diğer CMSlerden ayrılmasını sağlayan önemli etkenlerden biri de geniş eklenti kataloğuna sahip olması olsa da çok basit kodlarla gerçekleştirebilecek özellikleri eklenti kullanmadan yapmanız performansınıza büyük katkıda bulunacaktır.

Web sitenizi oluştururken kullandığınız blok editör eklentilerinin de maksimum özellik bulunduran ama minimum performans harcayınını belirlemeniz gerektiğini unutmayın. 

Eklenti işini hallettiğinize göre biraz da bloklardan bahsedebiliriz. Gutenberg kullansanız da gereksiz blok harcayarak yapılan web siteleri hız konusunda diğerlerine göre dezavantajlı olurlar. Bu nedenle tasarımınızdan da ödün vermeden az blok kullanarak sitenizi oluşturmanızı tavsiye ederim. Sonuçta çok karmaşık kodlar yerine güzel kodlanmış web siteleri daha optimizedir. Bunu da böyle düşünebilirsiniz.

Performans için genel olarak yapmanız gerekenler bunlar olsa da temel bir optimizasyon eklentisi kullanmak hızınızı katlamanıza yardımcı olacaktır. Piyasada birçok optimizasyon eklentisi ve en iyisini seçmek için bazı ipuçlarını takip edebilirsiniz.

Kullanmış olduğunuz sunucuda Litespeed teknolojisi yer alıyorsa kesinlikle ilk tercihiniz Litespeed Cache olmalıdır. Bu eklenti ücretsiz olarak sunulur ve sitenizdeki en iyi optimizasyon ayarını yapmanıza olanak tanır. Eğer Litespeed’in ayarlarına hakim değilseniz içindeki hazır sunulan ayarları kullanabilirsiniz.

Sunucunuz ya da hosting sağlayıcınız Litespeed’i desteklemiyorsa WordPress tarafından önerilen WP Super Cache eklentisini sitenize yükleyebilirsiniz. Daha farklı seçenekler arıyorsanız işini iyi yapan ücretli eklentilerin de kullanıcılar tarafından çokça tercih edildiğini unutmayın. Bu eklentilerle yapacağınız ayarlar her sitede farklılık göstereceğinden eğer bilginiz yoksa detaylı ayarlamalar yerine ön belleklemeyi aktif etmek gibi temel ayarları aktif hale getirebilirsiniz. 

Ekstra performans ve güvenlik için CDN servislerini kullanabilirsiniz. Bu servisler içeriğinizi özel bir ağ aracılığıyla kullanıcılarınıza ulaştıracağınızdan en azından görselleriniz için avantaj sağlayacaktır. 

Ücretsiz bir servis olan ve bir nevi CDN görevi gören CloudFlare’yi kullanabilirsiniz. Tabii ki tüm yükü CDN servisine bırakmamak gerekiyor. Sitenize yüklediğiniz görsellerin boyutu da optimizasyon konusunda bir o kadar önemlidir. Örneğin 500*500 boyutunda bir görsele ihtiyacınız varken 1500*1500 çözünürlüğünde olan görseli kullanmak yapacağınız en mantıksız seçim olacaktır. Tek konu bahsettiğim gibi çözünürlük değil. Dosyanızın kapladığı boyut da bir o kadar önemlidir. Dosya boyutunu küçültmek için ise Photoshop kullanabilir veya popüler ücretsiz araçlara göz atabilirsiniz. Çok fazla görsel barındırdığınız senaryolarda bu işi başarıyla yapan ücretsiz WordPress eklentilerini kullanabilirsiniz. Bu araçlar üzerinden kalite kaybı yaşamadan sıkıştırma yapmanız mümkün olduğundan sitenize uygulayabileceğiniz bu basit optimizasyon hamlesinden kaçınmamalısınız.

Binlerce optimizasyon hamlesi olsa da adımları başarıyla yerine getirdiğinizde hızınız göz alıcı seviyelere ulaşacaktır. Tabii şu noktaya da değinmekte fayda var. Kesintisiz kaliteli bir hosting veya sunucu tercih etmemeniz durumunda ne kadar optimizasyon yapsanız da istediğiniz sonucu elde edemeyebilirsiniz. Örnek verecek olursak Pagespeed’in önemli etkenlerinden biri de sunucunuzun yanıt süredir. 

Burada sahip olmanız gereken özellileri sıralamak doğru olmayacaktır. Basit bir CV sitesi alt paketlerle çalışabilirken e-ticaret sitesi yüksek kaynaklara ihtiyaç duyabilir. Hatta daha fazla performans için VPS veya bulut barındırma hizmetlerine göz atabilirsiniz.

Sonuç olarak

Bu yazımızda Gutenberg kullanarak web sitenizi nasıl hızlandırabileceğinizden bahsettik. Hazır tema kurulumu ve özel tema yapımı hakkındaki detayları paylaştık ve temel hız optimizasyon adımları hakkındaki rehberimizi oluşturduk.

Aşağıdan makaleyi hazırlarken dönüştürdüğümüz WordPress sitesinin PageSpeed ve GTMetrix skorlarını görüntüleyebilirsiniz.

Siz de uygun seçeneklerden birini seçerek sitenizin hızına hız katabilirsiniz. Kendi hız skorlarınızı yorumlarda paylaşmayı unutmayın.