Performa web dapat berdampak besar pada seluruh pengalaman pengguna Anda. Jika belakangan ini Anda ingin meningkatkan performa situs sendiri, Anda mungkin pernah mendengar PageSpeed Insights - alat yang menganalisis halaman dan menawarkan saran tentang cara mempercepatnya 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.
Dengan 40% orang yang berpotensi meninggalkan halaman yang waktu pemuatannya lebih dari 3 detik, memperhatikan seberapa cepat halaman Anda dimuat di perangkat pengguna semakin menjadi bagian penting dari alur kerja pengembangan kami.
Metrik performa dalam proses build
Meskipun membuka PageSpeed Insights secara manual untuk mengetahui skor Anda tidak masalah, sejumlah developer telah bertanya apakah mungkin untuk mendapatkan skor performa serupa ke 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 dengan baik dengan Gulp, Grunt, dan sistem build lainnya serta dapat terhubung ke layanan PageSpeed Insights dan menampilkan laporan mendetail tentang performa web Anda. Mari kita lihat pratinjau jenis pelaporan yang diaktifkannya:
Hasil di atas bagus untuk mendapatkan gambaran tentang jenis peningkatan yang dapat dilakukan. Misalnya, 5,92 untuk ukuran konten ke area pandang berarti “beberapa” pekerjaan masih dapat dilakukan, sedangkan 24 untuk meminimalkan resource pemblokiran render dapat menyarankan Anda untuk menunda pemuatan JS menggunakan atribut async.
Menurunkan hambatan masuk ke PageSpeed Insights
Jika sebelumnya Anda telah mencoba menggunakan PageSpeed Insights API atau mencoba menggunakan alat apa pun yang kami buat di atasnya, Anda mungkin harus mendaftar untuk mendapatkan kunci API khusus. Kami tahu bahwa meskipun hanya memerlukan waktu beberapa menit, hal ini dapat membuat Anda enggan mendapatkan 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 (cukup untuk siapa saja). Untuk penggunaan yang lebih rutin atau build produksi yang serius, sebaiknya Anda 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 untuk mendapatkan kunci API telah didokumentasikan.
Memulai
Anda memiliki dua opsi untuk cara mengintegrasikan PSI ke dalam alur kerja. Anda dapat mengintegrasikannya ke dalam proses build atau menjalankannya sebagai alat yang diinstal secara global di sistem Anda.
Proses build
Menggunakan PSI dalam proses build Grunt atau Gulp cukup mudah. Jika Anda 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 untuknya di gulpfile Anda sebagai berikut (juga dibahas 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 dapat menjalankan tugas menggunakan:
gulp psi
Dan jika menggunakan Grunt, Anda dapat menggunakan grunt-pagespeed oleh James Cryer yang kini menggunakan PSI untuk mendukung pelaporan.
Instal
npm install grunt-pagespeed --save-dev
Kemudian, muat tugas di Gruntfile Anda:
grunt.loadNpmTasks('grunt-pagespeed');
dan mengonfigurasinya untuk digunakan:
pagespeed: {
options: {
nokey: true,
url: "https://www.html5rocks.com",
strategy: "mobile"
}
}
Kemudian, Anda dapat menjalankan tugas menggunakan:
grunt pagespeed
Menginstal sebagai alat global
Anda juga dapat menginstal PSI sebagai alat yang tersedia secara global di sistem Anda. Sekali lagi, kita dapat menggunakan npm untuk menginstal alat ini:
$ npm install -g psi
Dan melalui jendela terminal, minta laporan PageSpeed Insights untuk situs (dengan opsi nokey atau key khusus API sebagai berikut):
psi http://www.html5rocks.com --nokey --strategy=mobile
atau untuk pengguna yang memiliki kunci API terdaftar:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
Selesai!
Teruslah maju dan jadikan performa sebagai bagian dari budaya Anda
Kita perlu mulai memikirkan lebih lanjut dampak desain dan penerapan kita terhadap pengalaman pengguna.
Solusi seperti PSI dapat memantau performa web Anda di desktop dan seluler serta berguna jika digunakan sebagai bagian dari alur kerja pasca-deployment reguler Anda.
Kami ingin mendengar masukan apa pun yang mungkin Anda miliki dan berharap PSI membantu meningkatkan budaya performa di tim Anda.