Grav Yeni Tema ve Peformans Değişimi

2020 yılı Eylül-Ekim aylarında WordPress içerik yönetim sisteminden Grav'a bir geçiş yapmıştım. Bu geçiş elbette tasarımın yanı sıra işlev ve içerikler anlamında da pek çok değişimi beraberinde getirdi. Ancak bu süreci yoğun test süreci içeren bir geçiş dönemi olarak ele aldım. Peki, sonuç olarak ne elde ettim?

AA

WordPress pek çok konuda esnek bir yapı sunmakta. Yıllardır WordPress kullanmanın verdiği rahatlıkla birlikte bu esnekliği olumsuza döndürmek de an meselesi. Eklentiler, özelleştirilebilir alanlar ve hook'lar derken aslında oldukça kompleks bir yapı inşa etmiş olabiliyorsunuz. Esasında temel ihtiyaç içeriklerin basit ve sorunsuz bir şekilde oluşturulabilir ve yayınlanabilir olması iken ortaya kendi ördüğünüz bir kurallar silsilesi çıkageliyor. 2020 ortalarında, kendi kararlarım neticesinde ortaya çıkan bu durumu önlemek ve çıkardığım dersleri test etmek adına yeni bir kurulum gerçekleştirmeye vermiştim. Elbette bu yenilik kararı beraberinde arayüz, eklentiler ve fonksiyonların temizliğini beraberinde getirdi.

Diğer yandan, yeni şeyler öğrenmeyi ve test etmeyi sevmemin etkisi olarak WordPress yerine Grav CMS kullanmayı tercih ettim. Bu sayede hem Twig hem de Grav yapısına dair daha fazla deneyim edinmiş oldum. Bu konu ile ilgili olarak yayınladığım WordPress - GRAV CMS Geçişi ve Yeni Arayüz ve Grav Kullanımına Geçiş başlıklı yazılara göz atabilirsiniz.

Birkaç günlük çalışmanın ardından içerikleri geçişe hazı hale getirdim ve geçici temanın da hazır olmasıyla birlike siteyi ayağa kaldırdım. WordPress temasını geliştirirken kullandığım Semantic UI yerine Bulma CSS, özelleştirilmiş fonksiyonların yerine de Twig ve shortcode kullanımları geldi.

Gözle görülür bir performans artışı ile birlikte organik trafik, arayüz değişimi ile birlikte de oturum süresi ve kullanıcı etkileşiminde artış gözlemledim.

Ekim'20 - Mart'21 ile önceki dönem karşılaştırıldığında elde edilen değişim özetini aşağıdaki tabloda görebilirsiniz.

Avg. Page Load Time (sec) Avg. Page Download Time (sec)
-45.67% -62.08%
Avg. Time on Page Bounce Rate
29.17% 45.01%

Elbette bu değişim organik trafik artışını da beraberinde getirdi. Ancak, sunucu tarafında bir değişikliğe gitmediğim için Avg. Server Response Time (sec) değerleri aynı kaldı. Diğer yandan, yeni URL yapısı sebebiyle Avg. Redirection Time (sec) maalesef artış gösterdi. Önümüzdeki dönem içerisinde de bu vesile ile yeni bir sunucuya geçeceğim bilgisini paylaşmış olayım.

Son olarak, geçiş öncesinde gerçekleştirdiğim Anasayfa için son PSI taraması da paylaşayım.

Performance Accessibility Best Practices SEO
38 94 93 100

Yeni Tema: HD 189733 b

HD 189733 b teması adını ve renk tercihlerini Tilkicik takımyıldızında, yaklaşık olarak 63 ışık yılı uzaklıkta bulunan bir Güneş dışı gezegenden alıyor. Bir önceki tema süreci ile kıyaslandığında, Grav ile ilgili çok daha kapsamlı çözümlemeler eklediğimi ve bunun yine performansa olumlu katkılar sunduğunu söyleyebilirim. Süreç içerisinde pek çok teknik problemle karşılaşmıştım. Diğer yandan Grav tarafında da yeni versiyon ile birlike pek çok yapısal değişiklik yaşandığı için bunlara yönelik olarak güncellemeler yapmam gerekti. Önemli değişikliklerden biri de elbette karanlık temanın (dark theme)1 öncelikli hale gelmesi oldu.

Tüm bu değişikliklerle birlike tema şimdilik nihai haline geldi diyebilirim.

Son 2 aylık değişimi önceki 2 ay ile kıyasladığımızda, elde edilen sonuçlar şu şekilde görülmekte:

Avg. Page Load Time (sec) Avg. Page Download Time (sec)
-9.51% -15.41%
Avg. Time on Page Bounce Rate
16.21% 19.73%
Performance Accessibility Best Practices SEO
81 98 100 100

Testlerde sunucu değişikliği ile birlike sunucu yanıt süresindeki değişimin %5-8 aralığında olacağı görülmekte. Peki, neler yaptım?

Öncelikle, Bulma CSS yerine Spectre CSS kullanmaya başladım. Spectre, yazım biçimi olarak Bulma CSS'e oldukça benzer olmasına karşın çok daha minimal bir CSS framework. Çok popüler bir framework olduğunu söyleyemem ancak uzun zamandır örnek bir çalışmada kullanmak istiyordum. Bu sebeple yeni arayüzde değerlendirmek istedim. Diğer yandan, Twig işlemlerini daha sade ve işlevsel hale getirdim. Grav'ın sunduğu pipeline yapısı, pek çok alanın modül olarak çağırılması ve alana bağlı olarak ön belleğe alınması gibi öğrendiğim yeni işlevlerle birlikte yönetimi kolay ve performansı yüksek bir tema elde etmiş oldum.

Web sitesinin ağırlıklı olarak akşam ve gece saatlerinde ziyaret ediliyor olması sebebiyle farklı zaman aralıkları için light-dark theme testlerini hem alanlar hem de sayfalar özelinde gerçekleştirdim. Bu testler çerçevesinde aldığım geri bildirimlere göre de light theme yerine yoğun metin alanları için alternatif oluşurdum.

Ek olarak, bir PHP Markdown Parser olan Parsedown ve Parsedown Extra ile ilgili de değişiklikler yaptım. Bu değişiklikler şimdilik doğrudan ilgili dosyalar üzerinden gerçekleştirilmiş olsalar da yakın zamanda Grav Extending yapısı ile yeniden ele alacağım. Ardından, edindiğim bilgileri bir yazı ile paylaşacağım.