Page Speed Analytics js Sorunu Çözümü

Leverage Browser Cache analytics.js

Günümüzde teknolojinin ilerlemesi ile birlikte kullanıcılar zaman ile yarışmaya başladı. Google SEO’da son birkaç yıldır site yükleme hızınızı önemsemeye başladı. Daha doğrusu artık Google tarafında bu çok önemli bir rol almaya başladı. Google site yükleme hızıyla ilgili en önemli araçlardan biri olan “Google Page Speed Insights “ ‘da sitemizin yükleme hızıyla ilgili hatalarını görebiliyoruz.

Bu hatalardan bazıları;

• CSS minify(CSS küçültme),
• HTML minify(HTML küçültme),
• Resim optimizasyonu,
• Sunucu yanıt süresi,
• Tarayıcı önbellekleme özelliği

Bu makalede sizlere analytics.js cache sorunun çözümünü paylaşacağım.
Eğer yukarıdaki optimizasyonları yaptıysanız 99/100 olarak skor görüyorsunuz. Bu makale sizlere 100/100 skor yapmayı hedeflemektedir.

Analytics.js Cache Sorunu Çözümü

Analytics.js soru çözümü için aşağıda sunduğum 5 adımı eksiksiz olarak tamamlamanız gerekmektedir.

1. Analytics JavaScript Dosyası

Yapmanız gereken ilk şey, Google’ın analytics javascript dosyasını locale (yerel olarak) bir javascript dosyası oluşturarak içine atmanız. google-analytics.com/analytics.js bu sayfaya girerek sağ tıklayıp “farklı kaydet” olarak masaüstüne local-ga.js olarak kaydediyorsunuz.

2. Analytics.Js Ftp’ye yükleme

local-ga.js dosyasını sunucunuza yüklüyorsunuz.
Önemli Not: Bu dosyanın stabil çalışabilmesi için tüm yetkileri vermeniz gerekmektedir.

3. İzleme Kodunu Düzenleme

Daha sonrasında sitenizde Google Analytics izleme kodunu aşağıdaki şekilde güncellememiz gerekmektedir. Aşağıdaki örnekte local-ga.js dosyasını nasıl kullandığımızı göstermektedir.

veya

4. Analytics Dosyasını Güncelleme

2.adım’da not olarak belirttiğimiz bölümün amacını bu adımda daha iyi anlayacağız. Google analytics.js yerel olarak çalıştırdığımızda periyodik olarak güncelleme yapmamız gerekmektedir. Zaten bütün sorunlar burada başlıyordu. Google tarafından periyodik olarak bu javascript dosyası güncellenmektedir. Biz bu dosyayı lokal(yerel olarak) kaydettiğimiz için güncellenmemektedir. Bu adım da nasıl güncelleyeceğimizi anlatacağım. Eğer bu adımı yapmaz isek Google’ın yapacağı bir güncelleme sonucunda sitenizdeki trafiği izlenmesinde doğru raporlar alamayabilirsiniz. Şimdi bir adet ga-update.php isminde bir dosya oluşturalım. İçerisine aşağıdaki kodları yazacağız.

<?
// script to update local version of Google analytics script
// Remote file to download

$remoteFile = 'https://www.google-analytics.com/analytics.js';
$localfile = 'ENTER YOUR ABSOLUTE PATH TO THE FILE HERE';
//For Cpanel it will be /home/USERNAME/public_html/local-ga.js

// Connection time out
$connTimeout = 10;
$url = parse_url($remoteFile);
$host = $url['host'];
$path = isset($url['path']) ? $url['path'] : '/';
if (isset($url['query'])) {

$path .= '?' . $url['query'];

}
$port = isset($url['port']) ? $url['port'] : '80';

$fp = @fsockopen($host, '80', $errno, $errstr, $connTimeout );

if(!$fp){

// On connection failure return the cached file (if it exist)

if(file_exists($localfile)){

readfile($localfile);

}

} else {

// Send the header information

$header = "GET $path HTTP/1.0\r\n";

$header .= "Host: $host\r\n";

$header .= "User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6\r\n";

$header .= "Accept: */*\r\n";

$header .= "Accept-Language: en-us,en;q=0.5\r\n";

$header .= "Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7\r\n";

$header .= "Keep-Alive: 300\r\n";

$header .= "Connection: keep-alive\r\n";

$header .= "Referer: http://$host\r\n\r\n";

fputs($fp, $header);

$response = '';
// Get the response from the remote server

while($line = fread($fp, 4096)){

$response .= $line;

}
// Close the connection

fclose( $fp );

// Remove the headers

$pos = strpos($response, "\r\n\r\n");

$response = substr($response, $pos + 4);

 

// Return the processed response

echo $response;

 

// Save the response to the local file

if(!file_exists($localfile)){

// Try to create the file, if doesn't exist

fopen($localfile, 'w');

}

 

if(is_writable($localfile)) {

if($fp = fopen($localfile, 'w')){

fwrite($fp, $response);

fclose($fp);

}

}

}

?>

Yukarıdaki kodun kaynağı buradadır.

5. Analytics.js için Cron Yazma

Son adım olarak periyoduk olarak güncelleme yapması gereken bir cron işlemi yapmanız gerekmektedir. Bu işlem local-ga.js dosyanızı Google üzerindeki ile periyodik olarak güncelleme işlemi yapacaktır.

02 4 * * * / usr / bin / php /home/USERNAME/public_html/ga-update.php 2> & 1

[divider style=”solid” top=”40″ bottom=”40″]

2. Yöntem : User Agent

1.yöntem ile native(en sade şekilde) olarak analytics.js nin page speed skorunun 100/100 alarak rakip firmaların ve müşterinizin gözünde +1 puan sağlamaktadır. Paylaştığımız ilk yöntem sağlıklı ve en güvenli yöntemdir. 2.yöntem ise kullanımı çok basit ama önermediğimiz bir yöntemdir. Analytics kodu bir javascript kodu olduğu için bizim önerimiz footer’a eklenmesidir. Sebeplerini ise javascript minify konusunda sizlere detaylı anlatacağız.

    
  < script >
     if(navigator.userAgent.indexOf("Speed Insights") == -1) {
        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date(); a = s.createElement(o),
            m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-XXXXXXX-X', 'auto');
        ga('send', 'pageview');
     }
  < /script >

Burada UserAgent özelliğini kullanarak page speed’in speed insights değerini okumadan analytics kodlarını eklemektedir

if(navigator.userAgent.indexOf("Speed Insights") == -1) {

[divider style=”solid” top=”40″ bottom=”40″]

3.Yöntem : WordPress Eklentisi ile Sorunu Çözmek

Çoğunlukta ufak çözümleri eklenti ile basit yola başvurarak;

– gtmetrix’de waterfall beni ilgilendirmiyor,

– nasılsa eklenti sorunumu çözüyor,

– sunucu tabii ki işlemleri o yapacak

diyen arkadaşlarımız için wordpress eklenti ile bu sorunun çözümünü göstereceğiz.

– Eklenti bölümünden “yeni ekle” seçeneğine tıklıyoruz.

– Arama kısmına “Complete Analytics Optimization Suite (CAOS)” isimli eklentiyi yüklüyoruz.

– Daha sonra eklentimizi etkinleştir yapıyoruz.

– Sol taraftaki ayarlar bölümünden “Optimize Analytics” e tıklıyoruz.

– Burada Tracking ID’mizi, tracking kodumuzun header/footer daki yerleşim yerini seçiyoruz.

– Son adım olarak ise “bounce rate” 30 yaparak “değişiklikleri kaydet” yaparak işlemimizi tamamlıyoruz.

Yorum alanından takıldığınız bölümler için sorularınızı yöneltebilirsiniz.