Google PageSpeed Insights - Perlukah Capai Skor 100

Google PageSpeed Insights: Perlukah Capai Skor 100/100 ?

Google PageSpeed Insights tidak diragukan lagi merupakan tools yang berguna untuk webmaster, developer, dan juga Anda pemilik website apapun jenis website Anda. Ada banyak orang mencoba mendapatkan nilai sempurna atau setidaknya mendekati nilai sempurna untuk optimalkan situs.

Google Pagespeed Insight memberikan banyak manfaat. Selain kita mengejar nilai skor yang paling direkomendasikan, kita juga sebenarnya mendapatkan banyak insight mengenai “kesehatan” website kita.

Artikel ini akan memberikan panduan komprehensif untuk menggunakan Google PageSpeed Insights untuk Anda. Kita akan kupas menggunakan score di Google Pagespeed Insight dan mencoba menerapkan di blog Anda.

Pengertian Google PageSpeed Insights

Jika Anda belum kenal dengan Google PageSpeed Insights, ini adalah tools yang digunakan untuk menguji kinerja situs web. Anda dapat memasukkan URL apa pun dan menganalisisnya:

google analytics 02

Google kemudian memberikan skor keseluruhan dari 1 hingga 100 untuk situs web yang telah Anda uji.

page speed test 21

Anda akan melihat hasilnya dan juga akan melihat beberapa rekomendasi dari Google cara meningkatkan kinerja website :

google pagespeed 01

Mulai tahun 2018, skor PageSpeed Insights menggunakan teknologi Lighthouse , yaitu sebuah open source, tools yang otomatis menilai dan memberikan rekomendasi terbaik meningkatkan kualitas halaman web secara keseluruhan. Platform ini dapat mengevaluasi segala macam faktor, termasuk kinerja, aksesibilitas, aplikasi web progresif, dan banyak lagi.

Untuk melihat penilaian komprehensif Lighthouse situs Anda, Anda dapat menggunakan Web.Dev/Measure :

page speed test 03

Selain melakukan audit kinerja seperti yang dijalankan Google PageSpeed Insights, Anda akan mendapatkan skor untuk aksesibilitas, praktik terbaik, dan SEO friendly .

Kebenaran Tentang Skor 100/100 di Google PageSpeed Insights

Seperti yang telah sebutkan di awal artikel ini, ada banyak melihat pemilik dan website developer yang terobsesi untuk mencapai skor PageSpeed Insights yang sempurna. Sayangnya, orang-orang itu cenderung mengabaikan aspek yang lebih penting dari hasil tes yaitu rekomendasi.

Meskipun Anda tentu harus berusaha untuk meningkatkan waktu pemuatan situs web (waktu loading) Anda sebaik mungkin, mendapatkan 100/100 di Google PageSpeed Insights sebenarnya bukanlah yang utama.

Tidak seperti PageSpeed Insights, Pingdom Tools memungkinkan Anda menguji kinerja situs Anda dari banyak tempat:

google analytics 14

Anda juga dapat menjalankan pengujian pada platform seperti GTmetrix (yang menggabungkan skor Anda dari PageSpeed Insights dan YSlow ) dan WebPageTest . Kemungkinannya adalah, skor Anda di berbagai tools ini tidak akan sama persis, yang artinya ada banyak faktor yang mempengaruhi nilai akhir skor kinerja website Anda.

Yang benar-benar penting adalah kecepatan aktual situs web Anda . Sebagai gambaran, telah kita lihat banyak situs dengan waktu pemuatan rata-rata di bawah 500 milidetik (yang sangat cepat!) yang tidak memiliki skor 100/100 di PageSpeed Insights.

Itulah yang penting dan utama. Pengunjung Anda tidak peduli berapa skor Google PageSpeed Insights Anda. Mereka hanya ingin dapat melihat konten website Anda secepat mungkin.

Tujuan sebenarnya dari menguji kinerja situs Anda dengan Google PageSpeed Insights bukanlah untuk mencapai skor tinggi. Tetapi ini untuk menemukan titik masalah di situs Anda, sehingga Anda dapat mengoptimalkannya dan mengurangi waktu loading website.

Untuk Apa Menggunakan Google Pagespeed Insight

Selain mempengaruhi User Experience (UX) situs Anda, kinerja juga berperan dalam SEO . Mengingat PageSpeed Insights dijalankan oleh mesin pencari terbesar dan terpopuler di dunia yaitu Google, masuk akal bahwa skor Anda mungkin berpengaruh pada peringkat Search Engine Result Page (SERP) Anda (setidaknya di Google itu sendiri).

Kenyataannya adalah bahwa Google memang menggunakan PageSpeed Insights untuk menentukan peringkat kata kunci atau semacamnya. Kecepatan situs adalah faktor peringkat, jelas dan sederhana. Skor tes kinerja website Anda dapat memberi gambaran yang cukup bagus bagaimana dan apa saja yang harus dilakukan terhadap website kita.

Namun, Google mempertimbangkan lebih dari sekadar angka dalam hasil uji PageSpeed Anda. Mencapai 100/100 tidak akan menjamin Anda mendapatkan posisi teratas di SERP.

Dengan demikian, Anda masih dapat menerapkan hasil PageSpeed Insights Anda saat meningkatkan SEO Anda. Misalnya, sejak 2018, kecepatan website diakses dengan smartphone telah menjadi faktor peringkat untuk Google. Anda akan melihat bahwa pengujian kinerja menyediakan data untuk versi desktop dan seluler situs Anda:

page speed test 21

Karena lebih dari 73 persen pengguna internet seluler atau smartphone menemukan situs yang loading terlalu lama, maka informasi di tab Google PageSpeed Insights bagian Mobile sangat membantu. Menggunakan rekomendasi dari sini untuk mengurangi waktu loading website pada handphone dan perangkat lain sehingga website Anda bisa lebih baik dan lebih kompetitif.

24 Cara Tingkatkan Performa Website Rekomendasi Google Pagespeed Index

Rekomendasi yang diberikan oleh Google Pagespeed Index patut diperhitungkan dengan serius dan kita coba untuk kupas lebih dalam. Saatnya untuk mulai meningkatkan kinerja situs Anda dengan rekomendasi Google PageSpeed.

1. Eliminate Render-Blocking Resources

Saat sebuah halaman di render/loading, biasanya file JS/styles script memberikan efek menunda sebuah halaman diload secara penuh. Hal ini berakibat website menjadi lebih lambat saat di akses.

Berikut ini adalah salah satu rekomendasi yang paling umum dari Google PageSpeed Insights.

Eliminate Render-Blocking Resources

Indikasi ini adalah informasi bahwa file JavaScript dan CSS dapat menghambat website di loading dengan cepat. Browser pengunjung akan mendownload dulu lalu meng-eksekusi file JavaScript dan CSS tersebut sebelum dilanjut dengan mendownload sisa file halaman tersebut.

Maka sebaiknya menunda download file file JavaScript dan CSS, tetapi memprioritaskan file lain terutama dibagian ‘above the fold’.  Above the fold adalah setengah dari bagian halaman web yang nampak pertama kali pada layar.

Berikut ini saran dari Google, ada dua solusi yang harus Anda pertimbangkan:

  • Jika Anda tidak memiliki banyak JavaScript atau CSS, Anda bisa menjadikan satu seluruh file yang memungkinkan. Gabungkan file tersebut ke dalam file HTML Anda. Anda dapat melakukan ini dengan plugin seperti Autoptimize.
  • Pilihan lainnya adalah menunda JavaScript Anda atau dikenal dengan istilah Defer. Proses downlod file JavaScript tetap berlangsung sambil proses parsing HTML, lalu mengeksekusi file JavaScript setelah parsing selesai. Selain itu, skrip ini juga dijalankan dalam urutan sesuai tampilan halaman.

2. Avoid Chaining Critical Request

Konsep avoid chaining critical request berkaitan dengan Critical Rendering Path (CRP) dan bagaimana browser memuat halaman Anda. Elemen tertentu – seperti JavaScript dan CSS seperti bahasan diatas harus selesai di download dulu baru halaman website kita secara full dapat dilihat oleh pengunjung website.

Umunya Google PageSpeed Insights akan menunjukkan apa saja chaining request critical ini pada halaman yang ditest :

avoid chaining critical request

Itu adalah contoh serangkaian request yang harus dipenuhi (didownload via browser oleh visitor) sebelum halaman website dapat dilihat. Kita juga mendapatkan informasi jumlah request dan ukuran file resources setiap itemnya.

Item-item itulah yang harus ditekan baik itu jumlah item dan ukuran file per itemnya. Semakin sedikit dan kecil jumlah item request maka website akan semakin cepat dilihat visitor.

Beberapa metode untuk mencapai hindari masalah ini bisa dilakukan dengan beberapa hal berikut ini :

  • Deffering offscreen images
  • Eliminating render-blocking resources
  • Minifying CSS dan JavaScript

Selain itu, Anda dapat mengoptimalkan urutan pemuatan/loading/download aset, untuk mempercepat website cepat di akses. Ini berarti memindahkan konten above the fold ke atas file HTML Anda.

Data ini hanya rujukan bukan hasil final yang Google mengatakan “Pass” atau “Fail”, tetapi hanya rekomendasi terbaik yang Google sarankan.

3. Keep Request Counts Low And Transfer Sizes Small

Semakin banyak permintaan/request yang harus dimuat browser, dan semakin besar ukuran file yang dikirimkan server, maka semakin lama waktu yang dibutuhkan situs web Anda untuk loading sempurna. Oleh karena itu, masuk akal jika Google menyarankan meminimalkan jumlah permintaan yang diperlukan dan mengurangi ukuran resources file.

Seperti rekomendasi avoid chaining critical request, rekomendasi ini tidak menghasilkan ‘Pass’ atau ‘Fail’. Sebagai gantinya, Anda hanya akan melihat daftar jumlah permintaan yang dibuat dan ukurannya:

panduan google page insight 2021 23

Tidak ada jumlah ideal/baku untuk ukuran ini. Sebaliknya, Google menyarankan harus melakukan test dan ukur sampai didapat ukuran yang cocok untuk performa website yang cepat.

Berikut ini adalah beberapa hal yang bisa dilakukan :

  • Ukuran gambar maksimum
  • Jumlah font web yang digunakan
  • Berapa banyak resource eksternal
  • Ukuran skrip

Lakukan test dan ukur untuk dapatkan performa terbaik.

4. Minify CSS

File CSS seringkali lebih besar dari yang seharusnya, agar lebih mudah dibaca manusia. Biasanya akan terlihat berbagai tanda baca dan spasi yang tidak diperlukan sistem komputer untuk memahami isinya.

Memperkecil CSS Anda adalah proses memadatkan file Anda dengan menghilangkan karakter tertentu, spasi, dan duplikasi yang tidak perlu. Google merekomendasikan hal ini karena mengurangi ukuran file CSS Anda, dan akan mempercepat proses loading sebuah website :

Sebaiknya gunakan plugin seperti Autoptimize atau WP Rocket untuk mengecilkan file CSS Anda.

5. Minify Javascript

Sama seperti Anda dapat mengurangi ukuran file CSS melalui minifikasi, hal yang sama berlaku untuk file JavaScript Anda:

google pagespeed 25

Autoptimize atau WP Rocket dapat menangani tugas ini untuk situs WordPress Anda juga.

6. Remove Unused CSS

Kode apa pun di CSS adalah konten yang harus dimuat agar halaman Anda terlihat dan mudah dipahami oleh visitor. Jika ada CSS di situs Anda yang sebenarnya tidak berguna, itu akan menguras kinerja website dan server Anda.

Itu sebabnya Google merekomendasikan untuk menghapus CSS yang tidak digunakan :

remove unused css google analytics 26

Solusinya di sini pada dasarnya sama dengan cara menghilangkan CSS yang memblokir render halaman website. Anda dapat menggabungkan beberapa script code CSS dalam satu line (inline) atau menunda (defer) diloadnya CSS sebisa mungkin namun tidak merusak tampilan website. Anda juga dapat menggunakan tools seperti Chrome DevTools untuk menemukan CSS yang tidak digunakan yang perlu dioptimalkan.

7. Minimize Main-Thread Word

‘Main Thread’ adalah elemen utama browser yang bertanggung jawab untuk mengubah serangkain kode menjadi halaman web yang utuh, dapat berinteraksi dengan Visitor. Maksudnya adalah mem-parsing dan mengeksekusi HTML, CSS , dan JavaScript menjadi sebuah halaman website yang useable bagi visitor. Selain itu, ia bertanggung jawab untuk menangani interaksi pengguna.

Ini berarti, ketika ‘Main Thread’ masih berurusan dengan script code tadi, maka website tidak akan memberikan respon kepada visitor. Artinya saat ‘Main Thread’ masih makan waktu lama sibuk urusan script code maka imbasnya UI dan UX website akan tampak buruk dan loading website menjadi lama.

Google PageSpeed akan menandai halaman web yang membutuhkan waktu lebih dari 4 detik untuk memberikan warning atas kinerja ‘Main Thread’ :

minimize main thread word

Beberapa hal yang dilakukan untuk mengurangi ini sama dengan poin-poin lain yang telah dibahas diantaranya adalah :

  • Minifying code
  • Removing unused code
  • Menerapkan caching

8. Reduce JavaScript Execution Time

Eksekusi JavaScript sering kali merupakan kontributor paling menonjol untuk main-thread bekerja. Google PageSpeed Insights memiliki rekomendasi terpisah untuk mengingatkan Anda jika tugas ini berdampak signifikan pada kinerja situs Anda:

reduce javascript execution time

9. Reduce Server Respons Times (TTFB)

Time to First Byte (TTFB) adalah ukuran berapa lama waktu yang dibutuhkan browser untuk menerima byte pertama data kembali dari server situs Anda setelah membuat permintaan. Meskipun ini tidak sama dengan kecepatan situs Anda secara keseluruhan, memiliki TTFB yang rendah akan meningkatkan kecepatan dan performa website anda.

Oleh karena itu, mengurangi waktu respons server adalah salah satu rekomendasi Google PageSpeed Insights. Jika Anda dapat mencapai TTFB rendah, Anda akan melihat pesan ini di bawah Passed Audits :

server respon time

Ada beberapa faktor yang dapat mempengaruhi TTFB Anda. Beberapa strategi untuk menurunkannya antara lain:

• Memilih penyedia hosting web berkualitas tinggi yang berfokus pada kecepatan
• Menggunakan tema dan plugin yang ringan
• Mengurangi jumlah plugin yang dipasang di situs Anda
• Memanfaatkan Jaringan Pengiriman Konten (CDN)
• Menerapkan cache browser
• Memilih penyedia Domain Name System (DNS) yang solid

10. Properly Size Images

File media seperti gambar dapat menjadi hambatan nyata pada kinerja situs Anda. Menetapkan ukuran yang ideal adalah cara sederhana untuk mengurangi waktu pemuatan Anda:

properly image size

Jika halaman Anda menyertakan gambar yang lebih besar dari yang seharusnya, CSS digunakan untuk mengubah ukurannya dengan tepat. Ini membutuhkan waktu lebih lama daripada hanya memuat gambar pada ukuran yang tepat pada awalnya sesuai theme, sehingga memengaruhi kinerja halaman Anda.

Untuk memperbaikinya, Anda sejak awal mengunggah gambar dengan ukuran yang sesuai, atau menggunakan ‘gambar responsif’. Ini berarti pembuatan gambar dengan ukuran berbeda untuk berbagai perangkat.

11. Defer Offscreen Images

Google menyarankan untuk menunda load image kedalam website. Proses ini bila menggunakan plugin sering dikenal dengan istilah “lazy-load”. Yaitu browser hanya akan menampilkan (download) gambar setelah scroll mouse/layar kita melewatinya. Maka, gambar paling bawah dari sebuah halaman website tidak akan didownload oleh browser jika kita belum scroll kebawah layar.

defer offscreen images
Semakin sedikit beban loading diawal maka website akan semakin cepat loading.

Ada beberapa plugin WordPress yang dibuat khusus untuk lazy loading, antara lain a3 Lazy Load dan Lazy Load oleh WP Rocket . Berbagai plugin pengoptimalan gambar dan kinerja seperti Autoptimize juga memiliki fitur lazy loading.

12. Efficiently Encode Images

Salah satu cara terbaik pengoptimalan gambar paling dasar adalah compression , yang dapat membantu mengurangi ukuran file Anda sehingga memuat lebih cepat. Ini juga merupakan metode utama untuk mengikuti rekomendasi Google untuk optimasi gambar :

efficiency code images

Kuncinya adalah mencapai ukuran file sekecil mungkin, tanpa mengorbankan kualitas gambar itu sendiri. Plugin seperti Imagify dan Smush dapat membantu tugas ini.

Rekomendasi lain yang memengaruhi apakah Anda ‘Pass’ atau ‘Fail’ dalam Efficiently Encode Images
meliputi:

  • Menyajikan gambar dengan ukuran yang benar
  • Menerapkan ‘lazy-load’ (menunda gambar di luar layar)
  • Mengonversi gambar ke format file WebP
  • Menggunakan format video untuk konten animasi, seperti GIF

Selain mengompresi gambar Anda, Anda dapat mengikuti langkah-langkah untuk memenuhi saran ini seperti yang dijelaskan di tempat lain dalam posting ini.

13. Sajikan Gambar dalam Format Next-Gen

Ada beberapa format file gambar yang memuat lebih cepat daripada yang lain. Sayangnya, itu bukan format PNG atau JPEG yang biasa Anda lihat . Gambar WebP menjadi standar baru, dan Google PageSpeed akan memberi tahu Anda jika gambar tidak sesuai.

serve images in next gen format

Anda bisa menggunakan Imagify dan Smush keduanya menawarkan fitur konversi WebP.

14. Gunakan Format Video untuk Konten Animasi

GIF dapat menjadi bentuk konten visual yang efektif dalam berbagai situasi. Panduan tutorial, ulasan fitur, dan bahkan animasi lucu semuanya dapat meningkatkan postingan Anda dan membuatnya lebih menyenangkan dan bernilai bagi pembaca.

Namun membuat GIF sedikit membutuhkan waktu dan tenaga, Anda bisa gunakan video sebagai gantinya sebagai rekomendasi Google Pagespeed Insight.

Gunakan Format Video untuk Konten Animasi

Sayangnya, mengonversi GIF ke format video bukanlah proses yang paling mudah. Pertama, Anda harus memutuskan jenis video yang ingin Anda gunakan:

  • MP4: Menghasilkan file yang sedikit lebih besar, tetapi kompatibel dengan sebagian besar browser utama .
  • WebM: Format video yang paling dioptimalkan, meskipun memiliki kompatibilitas browser yang terbatas.

Cara terbaik untuk konversi file GIF ke video dan audio bisa dilakukan dengan software aplikasi Ffmpeg. Ini adalah tools open source untuk mengonversi format file:

Kemudian, buka cmd/command line Anda dan jalankan perintah berikut:

ffmpeg -i input.gif output.mp4

Ini akan mengubah GIF dengan nama file input.gif menjadi video MP4 dengan nama file output.mp4 . Namun, mengubah format hanyalah permulaan. Anda sekarang perlu menyematkan video yang dihasilkan di situs WordPress Anda dengan cara yang membuatnya tampak seperti GIF animasi.

Menyematkan Konten Video untuk Animasi

Seperti yang mungkin Anda perhatikan jika Anda pernah melihat GIF sebelumnya, GIF sedikit berbeda dari video biasa. Mereka biasanya memutar otomatis dan mereka selalu tanpa suara. Menyematkan file MP4 atau WebM baru Anda di situs WordPress Anda tidak akan hasilkan seperti file GIF ini.

Namun, Anda dapat membuatnya kembali dengan beberapa kode yang sangat sederhana. Unggah video Anda ke website Anda (library media), lalu tambahkan kode yang berikut ini ke page atau pos tempat Anda ingin menyertakan GIF Anda:

<video autoplay loop muted playsinline>
<source src="output.mp4" type="video/mp4">
</video>

Ini akan menerapkan atribut yang ditentukan ke video Anda, membuatnya tampak lebih ‘seperti GIF’. Cukup sesuaikan nama dan jenis file agar sesuai dengan file anda.

15. Ensure Text Remains Visible During Webfont Load

Seperti gambar, font cenderung berupa file besar yang membutuhkan waktu lama untuk dimuat. Dalam beberapa kasus, browser mungkin menyembunyikan teks Anda hingga font yang Anda gunakan dimuat sepenuhnya, yang akan menghasilkan rekomendasi ini dari Google PageSpeed Insights:

ensure text remains visible during webfont loading

Google menyarankan menerapkan Font Display API di-swap ke dalam @font-face style . Untuk melakukan ini, akses stylesheet Anda ( style.CSS ) dan tambahkan kode berikut ini setelah atribut src di bawah @font-face :

Font-display: swap

16. Enable Text Compression

Rekomendasi Enable Text Compression Google PageSpeed Insights mengacu pada penggunaan kompresi GZIP:

enable text compression

Dalam beberapa kasus (seperti yang Anda lihat pada gambar di atas) kompresi teks akan diaktifkan di server Anda secara otomatis. Jika ini bukan kasus untuk situs Anda, Anda memiliki beberapa opsi untuk mengikuti rekomendasi ini.

Yang pertama adalah menginstal plugin dengan fitur kompresi GZIP. WP Rocket adalah solusi yang layak meski premium alias berbayar.

Anda juga dapat mengompres teks secara manual. Ini melibatkan pengeditan file .htaccess Anda , yang dapat berisiko, jadi pastikan Anda memiliki backup file htaccess terbaru.

Sebagian besar situs WordPress berjalan di server Apache. Kode untuk mengaktifkan kompresi GZIP terlihat seperti ini:

<IfModule mod_deflate.c>
# Compress HTML, CSS , JavaScript , Text, XML and fonts
AddOutputFilterByType DEFLATE application/JavaScript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-JavaScript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/CSS
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/JavaScript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Anda harus menambahkannya setelah #END di file .htaccess Anda .

Jika Anda memiliki situs WordPress di server Nginx, Anda harus menambahkan kode berikut ke file nginx.conf Anda :

36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/CSS text/JavaScript application/JavaScript application/x-JavaScript ;

Jika Anda ingin memeriksa kompresi teks situs Anda, sebaiknya gunakan tools seperti GiftOfSpeed, untuk mencari tahu jika kompresi GZIP telah berhasil diterapkan, serta jenis server tempat situs Anda berjalan dan beberapa detail penting lainnya.

17. Preconnect To Required Origins

Kemungkinan besar bahwa Anda mungkin memiliki setidaknya satu resource pihak ketiga di situs Anda – seperti Google Analytics adalah contoh umum. Diperlukan waktu bagi browser untuk membuat sambungan ke resource ini, sehingga memperlambat kecepatan loading website.

Menggunakan atribut preconnect dapat langsung memberi tahu browser bahwa ada skrip pihak ketiga di halaman Anda yang perlu dimuat. Proses memintanya kemudian dapat dimulai sesegera mungkin, sehingga meningkatkan kinerja Anda.

Jika Google merasa bahwa halaman Anda dapat memperoleh manfaat dari teknik ini, Anda akan melihat saran Prakoneksi ke asal yang diperlukan :

preconnect to required origin

Ada beberapa cara untuk menerapkan strategi pengoptimalan ini. Jika Anda merasa nyaman dengan mengedit file tema WordPress Anda, Anda dapat menambahkan tag link ke file header.php Anda . Berikut ini contohnya:

<link rel=“preconnect” href=“example.com”>

Dalam hal ini, tag html preconnect memberi tahu browser bahwa mereka perlu membuat koneksi ke example.com secepat mungkin. Google PageSpeed Insights akan mencantumkan semua resource yang relevan yang harus Anda tambahkan tag tautan dengan atribut prakoneksi.

Pilihan lainnya adalah menggunakan plugin untuk mencapai efek yang sama. Perfmatters menyertakan fitur preconnect.

18. Preload Key Request

Mirip dengan perihal preconnect diatas , mengikuti saran ini memungkinkan Anda meminimalkan jumlah permintaan yang harus dibuat browser ke server situs Anda. Namun, berbeda dengan preconnect, preload key request ini mengacu pada pemuatan aset penting di server Anda sendiri:

preload key request

Menerapkan teknik ini juga sangat mirip dengan rekomendasi sebelumnya. Anda dapat menambahkan tag html tautan yang menentukan resource yang tercantum di PageSpeed Insights ke file header.php Anda :

<link rel=“preload” href=“example.com”>

19. Avoid Multiple Page Redirect

Pengalihan atau redirect digunakan ketika Anda ingin satu URL mengarah ke yang lain. Mereka biasanya digunakan saat Anda memindahkan atau menghapus halaman di situs Anda. Meskipun tidak ada yang salah dengan menggunakan pengalihan secara umum, hal itu dapat menyebabkan penundaan tambahan dalam waktu loading website Anda.

Jika Anda memiliki terlalu banyak pengalihan di situs Anda, Anda mungkin melihat rekomendasi ini di Google PageSpeed Insights:

avoid multiple page redirect

Satu-satunya hal yang dapat Anda lakukan sebagai tanggapan terhadap rekomendasi ini adalah memastikan bahwa Anda hanya menggunakan pengalihan ketika Anda benar-benar harus melakukannya.

20. Serve Static Assets With An Efficient Cache Policy

Jika Anda telah menggunakan Google PageSpeed Insights sebelumnya, Anda mungkin tahu rekomendasi ini disebut cache browser Leverage . Di Versi 5, sekarang diberi label sebagai serve static assets with an efficient cache policy :

Serve Static Assets With An Efficient Cache Policy

Saran ini memiliki beberapa hal yang perlu kita selesaikan. Yang pertama adalah apa yang dimaksud dengan ‘caching’. Singkatnya, ini adalah proses di mana browser menyimpan salinan halaman Anda, sehingga dapat dimuat lebih cepat pada kunjungan berikutnya.

Cara paling umum situs WordPress mengimplementasikan caching adalah dengan plugin . WP Rocket dan W3 Total Cache adalah opsi yang populer.

Setelah Anda mengaktifkan caching untuk situs Anda, sekarang bagian kedua dari rekomendasi ini, yaitu ‘efisiensi’ clear cache Anda. Browser akan mengosongkan cache secara berkala agar website terus diperbarui dengan cache yang baru.

Idealnya, Anda ingin periode waktu sedikit lebih lama. Jika Anda membersihkan situs Anda dari cache browser setiap beberapa jam tentu saja jadi tidak maksimal maksud dari cache ini. Anda dapat mengoptimalkan periode kedaluwarsa cache menggunakan header Cache-Control dan Expires .

Adding Control Cache Header
Gunakan kode berikut untuk menambahkan header Cache-Control di Nginx:

location ~* \.(js|CSS |png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}

Anda harus menambahkan ini ke file konfigurasi server Anda. Dalam contoh di atas, jenis file yang ditentukan akan kedaluwarsa setelah 30 hari.

Mereka yang memiliki server Apache harus menggunakan script ini di file .htaccess :

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|CSS |swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>

Tambahkan kode ini sebelum #BEGIN WordPress atau setelah #END WordPress . Dalam contoh ini, periode kedaluwarsa cache diatur ke 84.600 detik.

Adding Expired Header

Header Cache-Control cukup standar sekarang. Namun, ada beberapa tools (termasuk GTMetrix) yang masih memeriksa header Kedaluwarsa .

Untuk server Nginx dengan memasukkan yang berikut ke dalam blok server Anda:

location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}

location ~* \.(pdf|CSS |html|js|swf)$ {
expires 2d;
}
Dan untuk file .htaccess :
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/svg “access 1 year”
ExpiresByType text/CSS “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/JavaScript “access 1 month”
ExpiresByType application/x-JavaScript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
</IfModule>
## EXPIRES HEADER CACHING ##

21. Reduce The Impact Of Third Party Code

Saran dari Google Pagespeed Insight ini muncul karena ada script diwebsite kita yang berasal dari luar (pihak ke 3 / third party). Ketergantungan kita dengan menggunakan script dari luar akan mendapatkan warning dari Google Pagespeed Insight. Tentu saja ini akan mengakibatkan website kita menjadi lebih berat atau lambat saat diakses.

Contoh skrip dari pihak luar :

  • Kode Google analityc
  • Embed video youtube di website
  • Library javascipt
  • Iframe ads
  • dll

Jika Anda menganggap penggunaan skrip pihak ketiga perlu, penting untuk tetap mengurangi dampaknya pada kinerja situs Anda, karena hasil analisis PageSpeed Anda akan memberi tahu Anda:

Reduce The Impact Of Third Party Code

Untuk memuat kode pihak ketiga dengan lebih efisien, Anda dapat mempertimbangkan salah satu teknik yang telah dibahas sebelumnya :

• defer loading JavaScript
• Gunakan link tag preconnect
• Skrip pihak ketiga yang dihosting sendiri

Gunakan metode tersebut untuk meminimalkan dampak bagi website anda.

22. Avoid Enrmous Network Payloads

Rekomendasi ini berkaitan dengan pengunjung seluler Anda. File besar dapat memerlukan penggunaan lebih banyak data seluler, sehingga membebani visitor Anda. Meminimalkan jumlah permintaan jaringan yang diperlukan dapat atasi masalah ini.

Avoid Enrmous Network Payloads

Google merekomendasikan untuk menjaga ukuran byte total Anda menjadi 1.600 KB atau kurang. Metode yang paling umum digunakan untuk mencapai tujuan ini ditemukan di seluruh posting ini, termasuk:
• Menunda CSS , JavaScript , dan gambar
• Minifying code
• Mengompresi file gambar
• Menggunakan format WebP untuk gambar
• Menerapkan caching

23. User Timing Marks And Measures

Rekomendasi ini hanya relevan jika Anda menggunakan User Timing API . Tools ini membuat stamp/penanda waktu untuk membantu Anda mengevaluasi kinerja JavaScript Anda. Jika Anda telah menyiapkan API untuk situs Anda, Anda akan melihat tanda dan ukuran Anda di bawah judul ini di PageSpeed Insights:

User Timing Marks And Measures

Seperti yang Anda lihat, ini adalah saran lain dari Google yang tidak kuatir ‘Pass’ atau ‘Fail’.

24. Avoid an excessive documen object model (DOM) size

Dalam istilah yang paling sederhana, DOM adalah bagaimana browser mengubah HTML menjadi objek. Secara alami, semakin besar DOM halaman Anda, semakin lama waktu yang dibutuhkan untuk loading.

Jika halaman Anda melebihi standar tertentu terkait ukuran DOM , direkomendasikan pengurangan jumlah node file CSS :

Avoid an excessive documen object model (DOM) size

Penyebab umum jika Anda ‘Fail’ audit ini di PageSpeed Insights adalah tema WordPress Anda. Tema berat sering kali menambahkan elemen dalam jumlah besar ke DOM. Jika memungkinkan bisa dipertimbangkan untuk mengganti wordpress theme anda.

Google PageSpeed Insights memang harus menjadi bahan utama tools webmaster Anda. Namun, terpaku pada skor Anda dan terobsesi untuk mencapai 100/100 yang didambakan mungkin bukanlah pilihan bijak.

Check Also

Inilah Strategi Jitu SEO Yang Wajib Kamu Coba

Inilah Strategi Jitu SEO Yang Wajib Kamu Coba!

Tentu kita mengetahui bahwa pada saat ini, persaingan online semakin hari semakin meningkat. Hal ini …