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:
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.