Sayfa hızı, arama motoru sıralamasında olduğu kadar kullanıcı deneyiminde ve sağladığı dönüşüm sayısında da önemli bir rol oynar. Bu sebeple çoğu web yöneticisi, web sitelerinin mevcut hızını ölçmek ve optimizasyonu için değerli öneriler almak için genellikle GTMetrix, PageSpeed Insights veya Pingdom gibi online araçlara başvurur.
Geçmişte web yöneticilerinin gördüğü en yaygın önerilerden biri, “Tarayıcı önbelleğinden yararlanın” uyarısıdır. Şimdi bu uyarı yakın zamanda adını değiştirmiş olsa da, bir web sitesi hız optimizasyonu taktiği olarak tarayıcı önbelleğinden yararlanmak eskisi kadar önemlidir. Bu makalede, bunun ne anlama geldiğini, hangi uyarıların bekleneceğini ve WordPress web sitenize fayda sağlamak için tarayıcı önbelleğinden hangi şekillerde yararlanabileceğinizi açıklayacağız. Daha fazla uzatmadan başlayalım. İşte tartışacağımız konular:
-
Tarayıcı Önbelleğini ve Kaldıraç Uyarısını Anlama
-
WordPress’te Kaldıraç Tarayıcı Önbelleğe Alma Uyarısı Nasıl Düzeltilir
-
Google Analytics Kodu İçin Kaldıraç Tarayıcı Önbelleğe Alma Uyarısını Düzeltme
Tarayıcı Önbelleğini ve Kaldıraç Uyarısını Anlama
Bir kullanıcı bir web sitesini ilk kez ziyaret ettiğinde, statik dosyalarının (CSS ve JS stil sayfaları, resimler ve diğer varlıklar) kopyaları web sunucusundan indirilir ve kullanmakta olduğunuz tarayıcının önbelleğinde geçici olarak saklanır. Kullanıcı aynı web sitesini daha sonra ziyaret ettiğinde, bu dosyaların bu geçici depodaki kopyaları yeniden indirilmek yerine kullanılacaktır.
Püf Nokta: daha az dosyanın indirilmesi gerekecek, sayfa hızı artacak, sunucu yükü azalacak ve bant genişliği tüketimi azalacaktır. Fakat bu yöntemin avantajları açık olsa da bu, dosyaların sonsuza kadar önbelleğe alınacağı anlamına gelmez. Web siteleri zamanla değişme eğiliminde olduğundan, ziyaretçilerin web sitesinin en son sürümünü görmesini sağlamak için dosyaların önbelleğe alınacağı doğru süreyi belirlemek önemlidir.
Genel olarak, bu sona erme süreleri, her bir varlık türü için bunları sağlayan sunucu tarafından ayrı ayrı belirlenir. Bir tür web sitesi varlığı için önceden belirlenmiş bir süre geçtikten sonra, söz konusu varlığın yeniden indirilmesi ve tarayıcınızın önbelleğinde saklanması gerekir. Bu durum sunucunun önbelleğe alma politikası olarak adlandırılır ve bizi bu makalenin konusuna getiren de budur.
“Tarayıcı önbelleğinden yararlanın” uyarısı, söz konusu sona erme sürelerinin sunucuda ayarlanmaması veya web sitesi hızını anlamlı bir şekilde etkilemek için çok kısa olarak ayarlanması durumunda web sitesi hız optimizasyon araçları tarafından verilir. İkinci durum son zamanlarda daha sık görüldüğü için uyarı mesajı değişmiştir. PageSpeed Insights veya GTMetrix kullanıyorsanız, aynı uyarı “Verimli bir önbellek politikasıyla statik varlıklara hizmet verin” şeklinde etiketlenecektir. Önceki web sitesi hız aracı için bu mesaj Teşhis bölümünde görülebilirken, ikincisi için Yapı sekmesinde olacaktır.
Ayrıca uyarı bölümünü açarak, Önbellek TTL sütununda tüm statik kaynaklarınızda ayarlanan geçerli sona erme tarihlerine ilişkin bir genel bakış elde edeceksiniz. Ayarlanmamış olmaları durumunda, Önbellek TTL sütununda ilgili kaynağın yanında “Yok” etiketini göreceksiniz.
Bu uyarıyı gidermek için, sunucunun yapılandırma dosyasını düzenlemeniz ve bu varlıkların sona erme süresini belirten bazı talimatlar eklemeniz gerekir. Bunları nasıl uygulayabileceğinizi aşağıda tartışacağız.
WordPress’te Kaldıraç Tarayıcı Önbelleğe Alma Uyarısı Nasıl Düzeltilir
Genel olarak konuşursak, kaldıraçlı tarayıcı önbelleğe alma uyarısının düzeltilmesi, karşılık gelen kuralları kullanarak Cache-Control veya Expires başlıklarının uygulanmasını içerir. Bu bölümde, bir WordPress eklentisi veya özel kod kullanarak nasıl kural ekleyebileceğinizi tartışacağız. Bunu yaparken, sunucunuzda barındırılan varlıklar için verimli bir önbelleğe alma politikası uygulayabileceksiniz.
Aynı prensibin, daha önce bahsedilen iki başlıktan birini uyguladıktan sonra bile genellikle “Tarayıcıyı önbelleğe alma” uyarılarına neden olabilen üçüncü taraf bir varlık olan Google Analytics kodu için nasıl yapılabileceğinden bahsedeceğiz. Bunu söyledikten sonra başlayalım.
Cache-Control ve Expires Başlıklarını Ekleme
Yukarıda belirtildiği gibi, bu uyarının büyük bir kısmı bir Cache-Control veya Expires Headers uygulanarak çözülebilir. Expires üstbilgisi yalnızca belirli bir varlığın sona erme tarihini içerirken, Cache-Control üstbilgisi, daha yeni HTTP üstbilgisi olarak, hem HTTP isteklerini hem de yanıtları önbelleğe almak için birden çok kural içerir. Genel olarak konuşursak, her iki başlık türünü de eklemeniz gerekmez, uyarıyı düzeltmek için bir tanesi yeterlidir. Ve daha yeni olan ve ekleyebileceğiniz daha fazla direktif içeren, Cache-Control’ü öneriyoruz. Yine de, aşağıda her ikisini de nasıl ekleyebileceğinizi açıklayacağız.
-
WordPress eklentisi kullanma
Sorun gidermek veya bir özelliği uygulamak için bir WordPress eklentisi kullanmak, çoğu WordPress kullanıcısı için genellikle başvurulacak yoldur. Aynı şey, kullanabileceğiniz birkaç eklenti bulunan “Tarayıcı önbelleğini kaldır” uyarısı için de söylenebilir. Bu sorunu çözmek için özel olarak oluşturulmuş olanların yanı sıra, tarayıcı önbelleğe alma optimizasyonu için uygun seçeneklere sahip bazı daha popüler WordPress önbellek eklentilerini de kullanabilirsiniz. Böyle bir eklenti, bu makalede kullanacağımız W3 Total Cache’dir.
W3 Total Cache eklentisi, dosya küçültme ve veritabanı, nesne ve tarayıcı önbelleğe alma ile ilgili çok çeşitli seçeneklere sahip ücretsiz bir web sitesi performans optimizasyonu eklentisidir. Premium seçenekler, Google Haritalar için parça önbelleğe alma ve yavaş yükleme, bir WPML önbelleğe alma uzantısı, REST API önbelleğe alma, premium destek ve diğerleri gibi özellikleri içerir. Bu yazı için eklentinin ücretsiz sürümü yeterli olacaktır çünkü bazı seçenekleri sadece tarayıcı önbelleği optimizasyonu için kullanacağız. Bu seçeneklerin nasıl kullanılacağını açıklayalım.
Eklentiyi yükleyip etkinleştirdikten sonra, Performans > Tarayıcı Önbelleği’ne gidin. Burada birkaç bölüme ayrılmış pek çok seçenek göreceksiniz, bunlardan ilki Genel bölümü olacak. İçinde, Expires Headers ve Cache-Control dahil olmak üzere tarayıcı önbelleğe almayla ilgili önemli seçenekleri ayarlayabileceksiniz. Orada, Başlığın sona ermesini ayarla ve Önbellek kontrol başlığını ayarla başlıklı seçenekleri bulun ve işaretli olduklarından emin olun. İşiniz bittiğinde, bu seçenekleri eklenti tarafından önceden tanımlanmış değerlerle web sitenize uygulamak için “Tüm ayarları kaydet” düğmesini tıklayın.
Uygun seçenek bölümlerini manuel olarak değiştirerek kullanılan değerleri de değiştirebilirsiniz. Bunlar, sayfayı aşağı kaydırarak veya geçerli sayfanın üst kısmında sağlanan bağlantı bağlantılarını kullanarak bulunabilen CSS & JS, HTML & XML ve Medya bölümleridir.
Bu seçenekleri kendi başınıza özelleştirmeyi seçerseniz, bu bölümlerin her birine gitmeniz ve ilgili Expires başlık ömrü ve Cache-Control ilke ayarlarını buna göre ayarlamanız gerekir. Söylemeye gerek yok, bu seçenekler yalnızca daha ileri düzey WordPress kullanıcıları için önerilirken, diğer çoğu kullanıcı için varsayılan değerler fazlasıyla yeterli.
-
Özel kod kullanma
Cache-Control ve Expires Headers eklemek, hem Apache hem de Nginx sunucularını kullanan web siteleri için özel kod kullanılarak yapılabilir. Aşağıda her ikisi için de nasıl yapıldığından bahsedeceğiz. Fakat yapmanız gereken ilk şey, web sitenizin iki sunucudan hangisini kullandığını bulmaktır. Bu durum barındırma sağlayıcınıza sorarak veya web sitenizin HTTP isteklerini inceleyerek yapılabilir. Ek olarak sunucunuzun yapılandırma dosyasını FTP aracılığıyla düzenlemeniz gerekeceğinden, FTP bilginizi tazelemenizi öneririz. Son olarak güvenlik önlemi olarak bu noktada web sitenizin yedeğini almanızı da tavsiye ederiz. Bunu yaptıktan sonra aşağıdaki gibi ilerleyin.
Bir Apache sunucusu kullanıyorsanız tek yapmanız gereken, kök WordPress dizininizde bulunan .htaccess dosyanızda küçük bir düzenleme yapmaktır. Bunu yapmak için, önce FTP kimlik bilgilerinizi kullanarak sunucunuza bağlanın, kök WordPress dizininize gidin ve içindeki .htaccess dosyasını bulun. Göremiyorsanız, FTP istemcinizde gizli/nokta dosyalarının görünürlüğünü etkinleştirdiğinizden emin olun. Daha sonra dosyayı sağ tıklayın ve menüden “Görüntüle/Düzenle” seçeneğini seçin.
Bunu yaptıktan sonra tercih ettiğiniz metin düzenleyiciyi kullanarak .htaccess dosyasını açın. Expires Headers’ı web sitenize eklemek için aşağıdaki kod parçacığını .htaccess dosyasına eklemeniz gerekir:
<IfModule mod_expires.c> ExpiresActive On # Images ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" # Video ExpiresByType video/webm "access plus 1 year" ExpiresByType video/mp4 "access plus 1 year" ExpiresByType video/mpeg "access plus 1 year" # Fonts ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType font/woff "access plus 1 year" ExpiresByType font/woff2 "access plus 1 year" ExpiresByType application/font-woff "access plus 1 year" # CSS, JavaScript ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" # Others ExpiresByType application/pdf "access plus 1 month" ExpiresByType image/vnd.microsoft.icon "access plus 1 year" </IfModule>
Kodu, bizim yaptığımız gibi dosyanın başına ekleyebilirsiniz.
Ek olarak Cache-Control başlığını eklemek için aşağıdaki kod parçacığını da eklemeniz gerekecektir.
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$"> Header set Cache-Control "max-age=84600, public" </filesMatch>
Bunu yaptıktan sonra, yaptığınız değişiklikleri kaydedin ve dosyayı şu anda orada bulunanı geçersiz kılarak sunucunuza geri yükleyin.
Yukarıdaki talimatların yalnızca Apache kullanıcıları için geçerli olacağını unutmayın. Ayrıca Nginx kullanıcıları için eşdeğer talimat setini vereceğiz. Benzer şekilde, daha önce tartıştığımız iki tür başlığın uygulanmasına yardımcı olan kod parçacıklarını içerirler. Ayrıca süreç aynı zamanda
sunucunuzun yapılandırma dosyasını düzenlemeyi içerir. Fakat bu dosyanın konumu barındırma sağlayıcınıza bağlı olduğundan, onu bulma ve erişme konusunda onlardan yardım istemenizi öneririz.
Dosyaya eriştikten sonra aşağıdaki kodu dosyaya ekleyin. Bununla, Expires Header’ı web sitenize eklemiş olacaksınız.
location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 30d;
}
Cache-Control tipi bir başlık eklemek isterseniz, aşağıdaki kod parçacığını sunucunuzun yapılandırma dosyasına ekleyin.
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
Bununla birlikte bu bölümde tartışılan yöntemlerden birini uyguladıktan sonra, web sitenize daha verimli bir önbelleğe alma politikasının doğru bir şekilde uygulanıp uygulanmadığını araştırmanız gerekecektir. Bunu, GTMetrix, PageSpeed Insights veya Pingdom gibi araçları kullanarak web sitenizi bir kez daha inceleyerek ve bireysel varlıkların TTL’lerini inceleyerek veya web sitenizin statik varlıkları için ayarlanan önbellek politikalarını incelemek için online önbellek denetleyicilerini kullanarak yapabilirsiniz.
Google Analytics Kodu İçin Kaldıraç Tarayıcı Önbelleğe Alma Uyarısını Düzeltme
Yukarıda belirtilen iki yöntemden birini uyguladıktan sonra, kaldıraç tarayıcı önbelleğe alma uyarılarının durumu büyük ölçüde iyileştirilecektir. Bununla birlikte çoğu durumda, üzerinde herhangi bir kontrole sahip olmadığınız üçüncü taraf sunucularda barındırılan bazı kaynaklar olabileceğinden, uyarıdan tamamen kurtulamazsınız.
Genellikle daha verimli bir önbelleğe alma politikası gerektirdiği gösterilen böyle bir varlık, önbellek son kullanma tarihi varsayılan olarak yalnızca iki saat olan Google Analytics komut dosyasıdır. Bu sorunu çözmek için, bu betiği yerel olarak barındırmanız gerekecek, bu da…