Web Performansı Ölçümünü Otomatikleştirme

Addy Osmani
Addy Osmani

Web performansı, kullanıcı deneyiminizin tamamı üzerinde büyük bir etkiye sahip olabilir. Son zamanlarda kendi sitenizin performansını iyileştirmeyi düşünüyorsanız, sayfaları analiz eden ve mobil ile masaüstü web performansıyla ilgili en iyi uygulamalara göre sayfaları nasıl hızlandırabileceğinize dair öneriler sunan PageSpeed Insights aracını muhtemelen duymuşsunuzdur.

PageSpeed'in puanları, komut dosyalarınızın ne kadar iyi küçültüldüğü, resimlerin optimize edilmesi, içeriklerin gzip'inin ne kadar iyi sonuçlandığı, dokunma hedeflerinin uygun boyutta olması ve açılış sayfası yönlendirmelerinden kaçınılması gibi çeşitli faktörlere dayanır.

Kullanıcıların 40%'ının yüklenmesi 3 saniyeden uzun süren sayfaları terk ettiği göz önünde bulundurulursa sayfalarınızın kullanıcılarınızın cihazlarında ne kadar hızlı yüklendiğine dikkat etmek, geliştirme iş akışımızın önemli bir parçası haline geliyor.

Derleme sürecinizdeki performans metrikleri

Notlarınızın ne durumda olduğunu öğrenmek için manuel olarak PageSpeed Insights'a gidilse de, bazı geliştiriciler derleme işlemlerinde benzer performans puanlaması almanın mümkün olup olmadığını soruyorlar.

Cevap: Kesinlikle.

Düğüm için PSI ile tanışın

Bugün, Gulp, Grunt ve diğer derleme sistemleriyle uyumlu çalışan, PageSpeed Insights hizmetine bağlanabilen ve web performansınızın ayrıntılı bir raporunu döndürebilen yeni bir modül olan Node için PSI'yi tanıtmaktan mutluluk duyuyoruz. Bu özelliğin etkinleştirdiği raporlama türünün önizlemesine göz atalım:

Performans raporlama ekranı

Yukarıdaki sonuçlar, yapılabilecek iyileştirmeler hakkında bir fikir edinmek için iyidir. Örneğin, içeriğin görüntü alanına göre boyutlandırılması için 5.92 değeri, hâlâ "bazı" çalışmaların yapılabileceği anlamına gelirken, oluşturma engelleme kaynaklarını en aza indirmek için 24 değeri, async özelliğini kullanarak JS'nin yüklenmesini ertelemeniz gerektiğini gösterebilir.

PageSpeed Insights'a giriş engelini azaltma

Daha önce PageSpeed Insights API'sini kullanmayı denediyseniz veya bunun üzerine geliştirdiğimiz araçlardan herhangi birini kullanmaya çalıştıysanız muhtemelen özel bir API anahtarı için kaydolmanız gerekirdi. Bu işlem yalnızca birkaç dakika sürse de, analizleri almanın normal iş akışınızın bir parçası haline getirilebileceğinin farkındayız.

PageSpeed Insights hizmetinin, API anahtarı olmadan her 5 saniyede en fazla 1 istekle istekte bulunmayı desteklediğini (herkes için yeterli miktarda) olduğunu bildirmekten mutluluk duyuyoruz. Daha düzenli kullanım veya ciddi üretim derlemeleri için büyük olasılıkla bir anahtara kaydolmak istersiniz.

PSI modülü, hem kurulum işlemini birkaç dakikadan kısa sürede tamamlamak için nokey hem de biraz daha uzun süre için key seçeneğini destekler. API anahtarı kaydettirmeyle ilgili ayrıntılar belgelenmiştir.

Kullanmaya başlama

PSI'yı iş akışınıza nasıl entegre edeceğinize ilişkin iki seçeneğiniz vardır. Bu aracı derleme işleminize entegre edebilir veya sisteminizde genel olarak yüklenmiş bir araç olarak çalıştırabilirsiniz.

Derleme süreci

Grunt veya Gulp derleme işleminde PSI'yı kullanmak oldukça basittir. Bir Gulp projesi üzerinde çalışıyorsanız doğrudan PSI'yi yükleyip kullanabilirsiniz.

Yükle

npm kullanarak PSI'yi yükleyin ve --save-dev dosyasını paket.json dosyanıza kaydetmek için iletin.

npm install psi --save-dev

Ardından, Gulpfile'ınızda bu görev için bir Gulp görevi tanımlayın (Gulp sample projemizde de ele alınmıştır):

var psi = require('psi');
gulp.task('psi', function (cb) {
    psi({
        nokey: 'true', // or use key: ‘YOUR_API_KEY’
        url: site,
        strategy: 'mobile',
    }, cb);
});

Yukarıdaki işlemler için, görevi şunları kullanarak çalıştırabilirsiniz:

gulp psi

Grunt kullanıyorsanız, James Cryer'ın raporlama işlevini güçlendirmek için PSI'dan yararlanan grunt-pagespeed hizmetinden de yararlanabilirsiniz.

Yükle

npm install grunt-pagespeed --save-dev

Ardından görevi Gruntfile dosyanıza yükleyin:

grunt.loadNpmTasks('grunt-pagespeed');

şu şekilde yapılandırabilirsiniz:

pagespeed: {
    options: {
    nokey: true,
    url: "https://www.html5rocks.com",
    strategy: "mobile"
    }
}

Ardından, görevi şunları kullanarak çalıştırabilirsiniz:

grunt pagespeed

Genel bir araç olarak yükleme

PSI'yi sisteminize tüm dünyada kullanılabilen bir araç olarak da yükleyebilirsiniz. Yine, aracı yüklemek için npm'yi kullanabiliriz:

$ npm install -g psi

Ayrıca, herhangi bir terminal penceresi aracılığıyla bir site için PageSpeed Insights raporlarını isteyin (nokey seçeneği veya aşağıdaki gibi API'ye özgü bir key ile):

psi http://www.html5rocks.com --nokey --strategy=mobile

veya kayıtlı bir API anahtarı olanlar için:

psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile

Hepsi bu kadar!

Siz performansa katılın ve performansı kültürünüzün bir parçası haline getirin.

Tasarımlarımızın ve uygulamalarımızın kullanıcı deneyimi üzerindeki etkisi üzerine daha çok düşünmeye başlamalıyız.

PSI gibi çözümler masaüstü ve mobil cihazlardaki web performansınızı takip edebilir ve normal dağıtım sonrası iş akışınızın bir parçası olarak kullanıldığında faydalıdır.

Geri bildirimlerinizi merakla bekliyoruz ve PSI'nin ekibinizdeki performans kültürünü iyileştirmeye yardımcı olacağını umuyoruz.