Statik varlıklar, sabit kalan ve bir web sitesinde sık sık değişmeyen görseller, stil sayfaları, betikler ve yazı tipleri gibi kaynakları ifade eder. Bu öğeler, bir WordPress sitesinin görsel ve işlevsel yönlerini sunmak için çok önemlidir. Statik varlıkları verimli bir şekilde sunmak, bu dosyaları gecikmeden kullanıcıların tarayıcılarına hızlı bir şekilde iletmek anlamına gelir. Statik varlıkları önbelleğe alarak, bunları yerel bir önbellekte saklarız ve kullanıcıların tarayıcılarının bunları daha hızlı bir şekilde almasını sağlayarak sayfa yükleme sürelerini azaltır ve bant genişliği kullanımını en aza indiririz.
Bugün çözeceğimiz, PageSpeed Insights’da gördüğümüz Statik öğeleri verimli bir önbellek politikasıyla yayınlayın hatası da tam olarak bununla alakalı.
.htaccess ile hızlıca hatayı giderin
Sizler için .htaccess kodu hazırladık, bu kod ile birlikte internet sitenizdeki bütün statik dosyalarınıza önbellek politikası yayınlamış olacaksınız.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
</IfModule>
<IfModule mod_mime.c>
AddType font/opentype .otf
AddType application/font-woff .woff
AddType application/font-woff2 .woff2
AddType application/x-font-ttf .ttf
AddType application/vnd.ms-fontobject .eot
AddType image/svg+xml .svg
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType application/javascript "access plus 6 months"
ExpiresByType application/vnd.ms-fontobject "access plus 6 months"
ExpiresByType application/xhtml+xml "access plus 10 minutes"
ExpiresByType application/x-javascript "access plus 6 months"
ExpiresByType application/x-shockwave-flash "access plus 6 months"
ExpiresByType application/x-woff "access plus 6 months"
ExpiresByType application/x-woff2 "access plus 6 months"
ExpiresByType font/otf "access plus 6 months"
ExpiresByType font/ttf "access plus 6 months"
ExpiresByType image/gif "access plus 6 months"
ExpiresByType image/jpeg "access plus 6 months"
ExpiresByType image/png "access plus 6 months"
ExpiresByType image/svg+xml "access plus 6 months"
ExpiresByType image/x-icon "access plus 6 months"
ExpiresByType text/css "access plus 6 months"
ExpiresByType text/html "access plus 10 minutes"
ExpiresByType text/javascript "access plus 6 months"
ExpiresByType video/x-flv "access plus 6 months"
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "max-age=14515200, public"
</FilesMatch>
<FilesMatch "\\.(css)$">
Header set Cache-Control "max-age=14515200, public"
</FilesMatch>
<FilesMatch "\\.(js)$">
Header set Cache-Control "max-age=14515200, public"
</FilesMatch>
<FilesMatch "\.(ttf|otf|eot|woff|woff2|svg)$">
Header set Cache-Control "max-age=14515200, public"
</FilesMatch>
</IfModule>
Alternatif çözüm: Cloudflare ile önbellek kurallarınızı yapılandırın.
Cloudflare internet siteniz için bir çok alanda size yardımcı olacak ara bir sunucu olarak düşünebilirsiniz. Alan adınızı cloudflare’a yönlendirmenizin ardından cloudflare sunucunuza yönleniyor yani arada köprü oluyor. Bu köprü arasında ise sunucunuza ait performans iyileştirmeleri, gizlilik iyileştirmeleri ve daha bir çok özelliği aktif hale getirebilirsiniz.
Cloudflare ile Caching kısmında Cache Rules veya Configuration alanından internet sitenizdeki statik dosyalara kural yapılandırabilirsiniz.
Facebook, Analytics ve Tag Manager kodları için ne yapabilirim?
Sitedeki jpg, css, png gibi dosyaları kolaylıkla önbellek kuralıyla skorlarınızı iyileştirebilir, sitenizi hızlandırabilirsiniz fakat third party tool kodlarına malesef müdahale edemiyoruz, FAKAT: Bu dosyaları lokale çekebiliriz.
Yukarıda bir Analytics linkinin içine girdiğimizde karşımıza çıkan örnek bir kodu paylaştık, bu kodlarla tabiki tek tek uğraşmayacağız. Yapmanız gereken url’e girdikten sonra ctrl + s veya command + s tuşlarıyla dosyayı masaüstünüze analytics.js. gibi bir isimle kaydetmeniz ve sunucunuzda ana dizine yüklemeniz.
Günün sonunda PageSpeed Insights yönergeleri oldukça basit kurallar istiyor, bunlar da tamamen kullanıcıların siteyi hızlı açmaları ve efektif dolaşmaları için.
