Performa web dapat berdampak besar pada seluruh pengalaman pengguna Anda. Jika akhir-akhir ini Anda ingin meningkatkan performa situs, Anda mungkin pernah mendengar tentang PageSpeed Insights - alat yang menganalisis halaman dan menawarkan saran tentang cara membuatnya lebih cepat berdasarkan praktik terbaik untuk performa web seluler dan desktop.
Skor PageSpeed didasarkan pada sejumlah faktor, termasuk seberapa baik skrip Anda diminimalkan, gambar dioptimalkan, konten di-gzip, target ketuk berukuran tepat dan pengalihan halaman landing dihindari.
Saat ini 40% orang berpotensi meninggalkan halaman yang memerlukan waktu lebih dari 3 detik untuk dimuat, sehingga perhatian tentang seberapa cepat halaman dimuat di perangkat pengguna Anda semakin menjadi bagian penting dari alur kerja pengembangan kami.
Metrik performa dalam proses build Anda
Meskipun membuka PageSpeed Insights secara manual untuk mengetahui performa skor Anda, sejumlah developer bertanya apakah mungkin mendapatkan skor performa yang serupa dalam proses build mereka.
Jawabannya adalah: tentu saja.
Memperkenalkan PSI untuk Node
Hari ini, dengan senang hati kami memperkenalkan PSI untuk Node - modul baru yang berfungsi sangat baik dengan Gulp, Grunt, dan sistem build lain serta dapat terhubung ke layanan PageSpeed Insights dan menampilkan laporan mendetail tentang performa web Anda. Mari kita lihat pratinjau jenis pelaporan yang dimungkinkan:
Hasil di atas bagus untuk mengetahui jenis perbaikan yang bisa dilakukan. Misalnya, nilai 5.92 untuk mengubah ukuran konten ke area pandang berarti "beberapa" pekerjaan masih dapat dilakukan, sedangkan nilai 24 untuk meminimalkan resource pemblokiran render mungkin menunjukkan bahwa Anda perlu menunda pemuatan JS menggunakan atribut async.
Menurunkan hambatan untuk masuk ke PageSpeed Insights
Jika sebelumnya Anda telah mencoba menggunakan PageSpeed Insights API atau mencoba menggunakan salah satu alat yang kami buat di atasnya, Anda mungkin harus mendaftar untuk mendapatkan kunci API khusus. Kami tahu bahwa meskipun hanya memerlukan waktu beberapa menit, Anda dapat menonaktifkan Insight sebagai bagian dari alur kerja reguler Anda.
Dengan senang hati kami informasikan bahwa layanan PageSpeed Insights mendukung pembuatan permintaan tanpa kunci API hingga 1 permintaan setiap 5 detik (banyak untuk siapa saja). Untuk penggunaan yang lebih rutin atau build produksi yang serius, Anda mungkin ingin mendaftar untuk mendapatkan kunci.
Modul PSI mendukung opsi nokey untuk menyiapkannya dalam waktu kurang dari beberapa menit dan opsi key untuk waktu yang sedikit lebih lama. Detail tentang cara mendaftar kunci API didokumentasikan.
Memulai
Anda memiliki dua opsi terkait cara mengintegrasikan PSI ke dalam alur kerja. Anda dapat mengintegrasikannya ke dalam proses build atau menjalankannya sebagai alat yang diinstal secara global pada sistem.
Proses build
Menggunakan PSI dalam proses build Grunt atau Gulp Anda cukup mudah. Jika sedang mengerjakan project Gulp, Anda dapat menginstal dan menggunakan PSI secara langsung.
Instal
Instal PSI menggunakan npm dan teruskan --save-dev untuk menyimpannya ke file package.json Anda.
npm install psi --save-dev
Kemudian, tentukan tugas Gulp untuk tugas tersebut dalam gulpfile Anda sebagai berikut (juga tercakup dalam project contoh Gulp kami):
var psi = require('psi');
gulp.task('psi', function (cb) {
psi({
nokey: 'true', // or use key: ‘YOUR_API_KEY’
url: site,
strategy: 'mobile',
}, cb);
});
Untuk hal di atas, Anda kemudian dapat menjalankan tugas menggunakan:
gulp psi
Dan jika Anda menggunakan Grunt, Anda dapat menggunakan grunt-pagespeed oleh James Cryer yang kini menggunakan PSI untuk mendukung pelaporannya.
Instal
npm install grunt-pagespeed --save-dev
Kemudian, muat tugas tersebut di Gruntfile Anda:
grunt.loadNpmTasks('grunt-pagespeed');
dan mengonfigurasinya untuk digunakan:
pagespeed: {
options: {
nokey: true,
url: "https://www.html5rocks.com",
strategy: "mobile"
}
}
Selanjutnya, Anda dapat menjalankan tugas tersebut menggunakan:
grunt pagespeed
Menginstal sebagai alat global
Anda juga dapat menginstal PSI sebagai alat yang tersedia secara global di sistem. Sekali lagi, kita dapat menggunakan npm untuk menginstal alat:
$ npm install -g psi
Dan melalui jendela terminal mana pun, minta laporan PageSpeed Insights untuk situs (dengan opsi nokey atau key khusus API seperti berikut):
psi http://www.html5rocks.com --nokey --strategy=mobile
atau yang memiliki kunci API terdaftar:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
Selesai!
Kembangkan dan jadikan performa sebagai bagian dari budaya Anda
Kita harus mulai memikirkan lebih dalam dampak desain dan implementasi kita terhadap pengalaman pengguna.
Solusi seperti PSI dapat memantau performa web di desktop dan seluler, serta berguna saat digunakan sebagai bagian dari alur kerja pasca-deployment reguler Anda.
Kami sangat ingin mendengar masukan dari Anda dan berharap PSI dapat membantu meningkatkan budaya kinerja di tim Anda.