Ana sayfa Wordpress İpuçları WordPress Sitenizdeki Google Page Speed Insights Hatalarından Kurtulun

WordPress Sitenizdeki Google Page Speed Insights Hatalarından Kurtulun

158
0

Google PageSpeed, sayfalarınızın kullanıcıya açılış hızı ve gösterim şekliyle bilgilendiren ve hataları belirtip bu hatalardan kurtulmak için birtakım makaleler sağlayan bir sayfadır. Masaüstü performans ve Mobil performansı ayrı ayrı göstermektedir.

Site açılış hızınız, site <head> tagları arasında yer alan javascript ve css dosyaları, tarayıcı önbellek kullanımı, cache eklentisi kullanımı, site sayfa sıkıştırma ve fazla döngü doğuran sorgulara sahip bir takım eklentilerin varlıklarına bağlı olarak değişmekle birlikte sunucu performansınızla da doğru orantılıdır.

[reklam]

Google Page Speed Testini Başarıyla Geçmek İçin İpuçlarıyla bu hatalardan kurtulmanız mümkün.

1# Cache Eklentisi Edinin

Site ziyaretçi sayınız binli hanelere ulaştıysa, kullanıcıya sayfaların kaydedilmiş bir html sayfasını ana dizinde oluşturan birçok WordPress Cache eklentisi içerisinden dilediğinizi sitenize kurup, ziyaretçinin çok daha hızlı bir şekilde içeriğinize ulaşmasını sağlayabilirsiniz.

Sizlere önerebileceğimiz cache eklentisi ise WP Super Cache‘dir.

2# Header.php Dosyasında Yer Alan Asset Dosyalarını Footer.php’e Alma

Siteniz açıldığında en üstten en alta olarak şekilde içeriği yüklemeye başlar. Header.php yani sitenizin en üst kısmında yer alan asset dosyalarının yüklenmesi (css,js vb.) sayfa yanıt süresini arttıracaktır. Bu nedenle bu dosyaların yükletilmesini footer.php dosyasında gerçekleştirmek daha mümkün olacaktır. Fakat sayfa açılış esnasında ufak bir tasarım kayması gerçekleşir. Footer.php dosyasındaki veriler yüklendiğinde normal açılmaya devam eder.

3# Adsense Reklamları Kullanıyorsanız Her Reklamda Kod Tekrarından Sakının

Adsense kodları (Farklı firmalarda javascript dosyaları ile reklam hizmeti sağladığından dolayı bu işlemi o firmalarda da kullanabilirsiniz.) ilk satırsa bir javascript dosyası çağırır.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- wpgunlugu.com -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:600px"
     data-ad-client="ca-pub-123"
     data-ad-slot="123"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Bu çağırma işlemini sürekli yapmak yerine sadece bir kez çağırmak yeterli olacaktır. O nedenle Sitenizin üst kısmına yani header.php dosyanıza

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

bu kodu yapıştırın. Reklamı ekleyeceğiniz alanlara sadece reklamın kodunu yapıştırın.

<!-- wpgunlugu.com -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:600px"
     data-ad-client="ca-pub-123"
     data-ad-slot="123"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Böylece 6 adet adsbygoogle.js dosyasını çağırmadan sadece birkez bu işlemi gerçekleştirmiş olduk.

4# CSS ve HTML Dosyalarınızı Küçültün (Minify)

Bunu otomatik yapan cache eklentileri mevcut. WP Total Cache eklentisi dilerseniz css ve html dosyalarınızı otomatik küçültüyor. Fakat birtakım tasarımda bozulmalara neden olabiliyor. Eğer bu işlemi kendiniz yapmak isterseniz CSSminifier sitesi işinizi görecektir. Style.css dosyanızın içerisin yer alan style verilerinizi yapıştırın daha sonra minife edilmiş kısımdan çıktınızı alın.

[reklam]

Html dosyalarınızı da yani kodlarınızı yine minify siteleri aracılığı ile css gibi küçültmeniz mümkün. Html Minifier sitesi aracılığı ile kodlarınızı optimize edebilirsiniz.

5# Sıkıştırmayı Etkinleştirin Hatası için Yapmanız Gerekenler

.htaccess dosyanıza aşağıda verdiğim kodları ekleyerek sıkıştırma işlemini başlatabilirsiniz.

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype
</IfModule>

Her ihtimale karşı .htaccess dosyanızın yedeğini almayı unutmayın.

6# Tarayıcı önbellekleme özelliğinden yararlanın

Tarayıcı önbellekleme özelliğini aktif ederek, kullanıcıların sürekli olarak yüklemek zorunda kaldığı css, logo, favicon gibi bazı dosyaları kullanıcının bilgisayarına kaydedip tekrar ziyaret ettiğinde kendi bilgisayarında olan dosyalardan erişerek sitenizin performansını arttırabilirsiniz.

[reklam]

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
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 text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 7 days"
</IfModule>
## EXPIRES CACHING ##

Yukarıdaki .htaccess dosyanıza yapıştırın. Her ihtimale karşı .htaccess dosyanızın yedeğini almayı unutmayın.

7# Resimlerinizi Optimize Edin

WordPress resimlerinizi optimize etmek için bir takım eklentiler mevcut. Ücretli yada kısıtlı eklentiler aracılığı ile resimlerinizi otomatik optimize edebilirsiniz. Yada kendi kullandığım bir PHP sınıfı aracılığı ile resimlerinizi optimize etmeniz mümkün. SimpleImage sınıfını optimize edeceğiniz alana yükleyin. Ardından bir optimizasyon.php isimli bir dosya oluşturun ve içerisine aşağıdaki kodları yapıştırın.

<?php
require 'SimpleImage.php';

foreach(glob(__DIR__ . '/*.*') as $resimler)
{
    $img_filter = new SimpleImage();

$img_filter->fromFile($resimler);
$img_filter->toFile($resimler,'',90);
}
?>

150 KB civarındaki bir resim 50KB civarına düşüyor. Sıkıştırma oldukça başarılı. Bu şekil bir işlem gerçekleştirmek yerine eklenti kullanmayı mantıklı buluyorsanız Smush Image Compression and Optimization eklentisinden yararlanabilirsiniz.

BİR CEVAP BIRAK

Please enter your comment!
Please enter your name here