Web performansı, kullanıcı deneyiminizin tamamı üzerinde büyük bir etkiye sahip olabilir. Son zamanlarda kendi sitenizin performansını iyileştirmeye çalışıyorsanız muhtemelen PageSpeed Insights'ı duymuşsunuzdur. Sayfaları analiz eden ve mobil ile masaüstü web performansı için en iyi uygulamalara göre sayfaların nasıl daha hızlı hale getirileceğine dair tavsiyeler sunan bir araçtır.
PageSpeed'in puanları; komut dosyalarınızın ne kadar iyi küçültüldüğü, resimlerin ne kadar iyi optimize edildiği, içeriğin ne kadar iyi sıkıştırıldığı, dokunma hedeflerinin ne kadar iyi boyutlandırıldığı 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 sayfalardan ayrılması nedeniyle, sayfalarınızın kullanıcılarınızın cihazlarında ne kadar hızlı yüklendiğini önemsemek, geliştirme iş akışımızın giderek daha önemli bir parçası haline geliyor.
Derleme işleminizdeki performans metrikleri
Puanlarınızı öğrenmek için manuel olarak PageSpeed Insights'a gitmek iyi olsa da bazı geliştiriciler, derleme süreçlerine benzer performans puanları eklemenin mümkün olup olmadığını soruyor.
Yanıt: kesinlikle.
Node için PSI'yi kullanıma sunuyoruz
Bugün, Node için PSI'yi kullanıma sunmaktan memnuniyet duyuyoruz. Gulp, Grunt ve diğer derleme sistemleriyle mükemmel şekilde çalışan, PageSpeed Insights hizmetine bağlanabilen ve web performansınızla ilgili ayrıntılı bir rapor döndürebilen yeni bir modüldür. Bu özelliğin etkinleştirdiği raporlama türünü bir önizlemesiyle inceleyelim:
Yukarıdaki sonuçlar, yapılabilecek iyileştirme türleri hakkında fikir edinmenize yardımcı olur. Örneğin, içeriğin görüntüleme alanına göre boyutlandırılması için 5,92 değeri, "bazı" çalışmaların hâlâ yapılabileceği anlamına gelirken, oluşturmayı engelleyen kaynakları 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ş eşiğini düşürme
PageSpeed Insights API'yi geçmişte kullanmayı denediyseniz veya bu API'nin üzerine inşa ettiğimiz araçlardan herhangi birini kullanmayı denediyseniz muhtemelen özel bir API anahtarı kaydetmeniz gerekmiştir. Bu işlemin sadece birkaç dakika sürmesine rağmen normal iş akışınız kapsamında Analizler'i almanın can sıkıcı olabileceğinin farkındayız.
PageSpeed Insights hizmetinin, 5 saniyede 1'e kadar API anahtarı olmadan istek göndermeyi desteklediğini bildirmekten memnuniyet duyuyoruz (herkes için yeterlidir). Daha düzenli kullanım veya ciddi üretim derlemeleri için muhtemelen bir anahtar kaydettirmek istersiniz.
PSI modülü, hem birkaç dakikadan kısa sürede kurulum için nokey seçeneğini hem de biraz daha uzun süren key seçeneğini destekler. API anahtarına kaydolmayla ilgili ayrıntılar dokümanlar halindedir.
Başlarken
PSI'yi iş akışınıza entegre etmek için iki seçeneğiniz vardır. Bu aracı derleme sürecinize entegre edebilir veya sisteminizde dünya genelinde yüklü bir araç olarak çalıştırabilirsiniz.
Derleme işlemi
PSI'yi Grunt veya Gulp derleme işleminizde kullanmak oldukça basittir. Gulp projesi üzerinde çalışıyorsanız PSI'yi doğrudan yükleyip kullanabilirsiniz.
Yükle
PSI'yi npm kullanarak yükleyin ve package.json dosyanıza kaydetmek için --save-dev parametresini iletin.
npm install psi --save-dev
Ardından, gulp dosyanızda bu işlem için aşağıdaki gibi bir Gulp görevi tanımlayın (Gulp örnek 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ıdakiler için görevi şu şekilde çalıştırabilirsiniz:
gulp psi
Grunt kullanıyorsanız James Cryer tarafından geliştirilen ve artık raporlama için PSI kullanan grunt-pagespeed'i kullanabilirsiniz.
Yükle
npm install grunt-pagespeed --save-dev
Ardından görevi Gruntfile'inize yükleyin:
grunt.loadNpmTasks('grunt-pagespeed');
ve kullanıma hazır hale getirmek için yapılandırın:
pagespeed: {
options: {
nokey: true,
url: "https://www.html5rocks.com",
strategy: "mobile"
}
}
Ardından, görevi şu şekilde çalıştırabilirsiniz:
grunt pagespeed
Global araç olarak yükleme
PSI'yi dünya genelinde kullanılabilen bir araç olarak sisteminize de yükleyebilirsiniz. Aracı yüklemek için yine npm'yi kullanabiliriz:
$ npm install -g psi
Ardından, herhangi bir terminal penceresinden bir site için PageSpeed Insights raporları isteyin (nokey seçeneği veya API'ye özel bir key ile aşağıdaki gibi):
psi http://www.html5rocks.com --nokey --strategy=mobile
veya kayıtlı API anahtarı olanlar için:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
Hepsi bu kadar!
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 hakkında daha fazla düşünmeye başlamamız gerekiyor.
PSI gibi çözümler, masaüstü ve mobil cihazlardaki web performansınızı izleyebilir ve normal dağıtım sonrası iş akışınızın bir parçası olarak kullanıldığında faydalıdır.
Geri bildirimlerinizi öğrenmekten memnuniyet duyarız. PSI'nin ekibinizdeki performans kültürünü iyileştirmesine katkıda bulunmasını umuyoruz.