Cara Melayani Format Next-Gen di WordPress: Semua Yang Harus Anda Ketahui

Diterbitkan: 2021-10-13

Jika Anda telah menjalankan audit kinerja di Google PageSpeed ​​Insights, Anda mungkin telah melihat peluang "sajikan gambar dalam format generasi berikutnya".

Konten adalah raja tetapi format yang akan Anda gunakan untuk mengirimkannya di situs WordPress Anda juga penting. Format generasi berikutnya (kependekan dari generasi berikutnya) adalah cara untuk mempercepat waktu pemuatan gambar di situs web. Mereka dapat dimuat di browser modern dengan informasi kompresi yang disematkan, sehingga pengunjung tidak perlu menunggu selamanya.

Artikel ini akan membahas format generasi berikutnya yang tersedia dan cara menyajikan gambar dalam format khusus ini di WordPress untuk membuat situs Anda lebih cepat dan meningkatkan skor kinerja Lighthouse Anda.

Apa Format Generasi Selanjutnya dan Mengapa Anda Harus Menggunakannya

Gambar generasi berikutnya menawarkan kompresi dan kualitas superior. Mereka sempurna untuk penggunaan web karena menggunakan lebih sedikit data sambil mempertahankan kualitas gambar tingkat tinggi yang sama.

Ada dua format next-gen utama yang dapat Anda gunakan untuk gambar Anda di WordPress, yaitu:

  • WebP (dikembangkan oleh Google) adalah format gambar yang menggunakan format kompresi lossy dan lossless. Anda mendapatkan gambar berkualitas tinggi dengan ukuran file kecil! WebP jelas merupakan pengganti yang sangat baik untuk gambar JPEG, PNG, dan GIF, karena kualitas gambar juga dipertahankan:
Kualitas yang sama dirasakan oleh pengunjung – Sumber: multiplemedia.com
  • AVIF (dikembangkan oleh Alliance for Open Media) adalah format file gambar yang membuat gambar lebih kecil dengan tetap menjaga kualitas gambar yang sama. AVIF cenderung mengompresi file lebih dari WebP, tetapi AVIF tertinggal untuk dukungan browser sebagai format file muda. Oleh karena itu, kami menganjurkan Anda untuk menggunakan format WebP untuk situs WordPress Anda.

Google PageSpeed ​​Insights juga menyarankan Anda untuk menyajikan gambar dalam format generasi berikutnya seperti WebP dan AVIF daripada PNG atau JPEG:

Menyajikan gambar di WebP atau AVIF untuk membantu memuat halaman Anda lebih cepat – Sumber: PSI

Apa Manfaat Menayangkan Gambar dalam Format Next-Gen Seperti WebP?


Gambar WebP berukuran sekitar 30% lebih kecil dibandingkan dengan PNG atau JPEG. Seperti yang ditunjukkan di bawah ini, format PNG melakukan pekerjaan yang baik dalam mengoptimalkan gambar, tapi itu mengungguli WebP (yang terakhir).

Gambar memiliki ukuran file yang lebih kecil dalam format WebP – Sumber: Majalah Smashing

Ingatlah bahwa untuk sebagian besar situs web, gambar adalah penyebab utama memperlambat situs Anda. Gambar besar tidak hanya memperlambat situs Anda, tetapi juga meningkatkan bobot halaman. Ini akan memengaruhi kinerja Anda di seluler karena laman yang berat akan membutuhkan waktu lebih lama untuk dimuat di jaringan seluler.

Terakhir, kecepatan situs web merupakan faktor utama yang diperhitungkan oleh Google saat menentukan peringkat. Jika Anda tidak ingin muncul di halaman 5, ingatlah untuk mengoptimalkan gambar Anda menggunakan format generasi berikutnya seperti WebP.

Mari kita lihat cara mengonversi gambar Anda ke WebP di WordPress.

Cara Menyajikan Gambar dalam Format Next-Gen di WordPress

Cara termudah dan tercepat untuk mengonversi gambar ke format generasi berikutnya adalah dengan menggunakan plugin WordPress. Namun, Anda juga dapat mengoptimalkan dan mengonversi gambar Anda secara manual.

Mari kita bahas kedua opsi tersebut.

Opsi 1 – Cara Mengonversi Gambar dalam Format Next-Gen Dengan Plugin

Seperti biasa, menggunakan plugin WordPress menghemat banyak waktu Anda. Bahkan Google merekomendasikan untuk menggunakan plugin untuk mengonversi gambar yang Anda unggah ke WebP atau Affi.

PSI merekomendasikan plugin WordPress

Ada enam plugin utama yang dapat Anda gunakan untuk mengoptimalkan gambar Anda dan menyajikannya ke dalam format generasi berikutnya, yaitu:

  1. Imagify – plugin konversi WebP gratis untuk sekitar 200 gambar. Bayangkan juga ubah ukuran dan kompres gambar Anda untuk meningkatkan kinerja (bonus: tutorial lengkap dan uji kinerja termasuk dalam artikel kami) .
  2. WebP express – menambahkan baris kode sederhana untuk menyajikan gambar WebP.
  3. EWWW – opsi konversi cerdas untuk mendapatkan format gambar yang tepat untuk pekerjaan tersebut (JPG, PNG, GIF, atau WebP).
  4. Pengoptimal Gambar Shortpixel – mengonversi JPEG, PNG, atau GIF apa pun ke WebP dan AVIF.
  5. Smush – mengonversi ke WebP dan secara otomatis menyajikan gambar dalam format Next-Gen WebP (hanya versi pro).
  6. Konverter WebP untuk media – menggantikan file dalam format JPEG, PNG, dan GIF standar dengan format WebP.

Cara Mengonversi Gambar ke WebP Menggunakan Imagify

Mari kita lihat contoh konversi WebP menggunakan plugin Imagify. Hanya butuh tiga langkah

Langkah 1 – Unduh dan instal Imagify secara gratis. Aktifkan plugin dan buat kunci API Anda.

Langkah 2 – Buka Pengaturan > Bayangkan dan gulir ke tab Pengoptimalan .
Pilih “ Buat gambar versi WebP ” dan “ Tampilkan gambar dalam format WebP di situs ” serta opsi kedua “ Gunakan tag <picture> ”.

Langkah 3 – Klik pada Generate missing WebP version blue tombol.

Selamat, Anda sekarang melayani pengunjung format gambar WebP, seperti yang Anda lihat di perpustakaan WordPress:

Gambar WebP perpustakaan WordPress

Catatan penting: gambar WebP Anda yang baru dibuat tidak akan ditampilkan di perpustakaan WordPress. Jika Anda ingin memverifikasi bahwa konversi berhasil, buka halaman web yang menampilkan gambar. Lalu buka tab Pengembang Chrome > Inspect element > Network > filter by IMG dan lihat pada kolom Type .

Anda sekarang akan melihat format "WebP" yang terkait dengan gambar.

Situs WordPress saya menyajikan gambar format WebP berkat Imagify – Sumber: Chrome Dev Tools

Untuk mempelajari lebih lanjut konversi format generasi berikutnya, sebaiknya ikuti panduan terperinci kami tentang menyajikan gambar ke WebP menggunakan Imagify.

Opsi 2 – Cara Menyajikan Gambar dalam Format Next-Gen Tanpa Plugin

Jika Anda tidak ingin menggunakan plugin untuk mengonversi gambar Anda ke format generasi berikutnya, Anda dapat menambahkan sepotong kode secara manual. Berikut adalah dua opsi berbeda yang dapat Anda ikuti untuk situs WordPress Anda.

1. Langsung edit file .htaccess WordPress Anda

Kami menyarankan Anda mengikuti opsi ini hanya jika Anda sangat nyaman mengkode dan mengedit file situs Anda. File .htaccess adalah file situs web canggih yang mengontrol konfigurasi tingkat tinggi situs web Anda.

Tempatkan kode berikut dari GitHub di file .htaccess Anda untuk mengganti gambar jpg/png/gif dengan gambar WebP:

 <IfModule mod_rewrite.c> RewriteEngine On # Check if browser supports WebP images RewriteCond %{HTTP_ACCEPT} image/webp # Check if WebP replacement image exists RewriteCond %{DOCUMENT_ROOT}/$1.webp -f # Serve WebP image instead RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image] </IfModule> <IfModule mod_headers.c> # Vary: Accept for all the requests to jpeg, png and gif Header append Vary Accept env=REQUEST_image </IfModule> <IfModule mod_mime.c> AddType image/webp .webp </IfModule>

2. Gunakan elemen <picture> di HTML Anda

Memodifikasi file .htaccess bisa jadi rumit. Opsi yang lebih bertanggung jawab adalah menggunakan tag <picture>. Dalam hal ini, browser akan secara otomatis memilih format file yang sesuai untuk ditampilkan.

 <picture> <source type="image/webp"> <img src="/path/to/image.jpg" alt=""> </picture>

Dampak WebP pada Kinerja

Seperti yang terlihat di atas, Anda dapat menggunakan plugin Imagify untuk mengonversi gambar WordPress Anda ke WebP, format generasi berikutnya yang direkomendasikan oleh Google. Imagify juga memungkinkan Anda untuk mengoptimalkan banyak gambar dengan mengubah ukuran dan mengompresinya secara otomatis (dan secara massal).

Akan menarik untuk menjalankan beberapa tes kinerja untuk mengkonfirmasi apa yang telah kami katakan. Saya akan menjalankan dua skenario:

Skenario 1 – Hasil kinerja dengan gambar JPEG (tanpa Imagify)

  • 13 gambar disajikan dalam format JPEG
  • Gambar tidak dioptimalkan

Skenario 2 – Hasil kinerja dengan gambar WebP dan mode pengoptimalan agresif (dengan Imagify)

  • 13 gambar dikonversi dan disajikan ke format WebP
  • Gambar yang dioptimalkan

Alat kinerja yang digunakan:

Google PageSpeed ​​Insights dan WebPageTest

Situs pengujian saya:

Skenario 1: Hasil kinerja dengan gambar JPEG (tanpa Imagify)

Kami memulai audit dengan semua gambar saya disajikan dalam JPEG. Rata-rata, ukurannya adalah 270 KB.

Gambar JPEG dan ukurannya masing-masing – Sumber: Chrome Dev Tools

Sekarang mari kita lihat PSI. Saya mendapatkan skor oranye di ponsel (75/100) dan skor Cat Terbesar Contentful di merah. Skor LCP relevan, terutama karena elemen LCP yang memengaruhi kinerja adalah gambar (seperti yang sering terjadi). Ada ruang untuk perbaikan.

Skor ponsel saya (tidak ada WebP – tidak ada Imagify) – Sumber: PSI

Selain itu, PSI telah menandai tiga masalah terkait gambar:

  • Ukuran gambar yang benar (terutama dari ponsel)
  • Sajikan gambar dalam format generasi berikutnya
  • Elemen gambar tidak memiliki lebar dan tinggi yang eksplisit
KPI Skor Seluler – Gambar JPEG – Tanpa Bayangan
Nilai keseluruhan 75/100
Audit PSI
Cat Contentful Terbesar 4,9 detik
Ukuran halaman 1,2 MB
permintaan HTTP 22
Waktu muat 2.890 detik

Skenario 2: Hasil kinerja dengan gambar WebP dan mode pengoptimalan "Agresif" (dengan Imagify)

Sekarang saatnya untuk mengonversi 13 gambar JPEG saya ke WebP dan mengoptimalkannya dengan Imagify.

Untuk melakukannya, kita pergi ke Settings > Imagify > Imagify'em all

Itu dia. Gambar saya sekarang dioptimalkan dan disajikan di WebP. Kami melihat penurunan penting dalam ukuran file. Sudah dikonfirmasi, WebP membuat gambar Anda lebih ringan.

Gambar lebih kecil berkat format WebP dan pengoptimalan Imagify

Kami sekarang dapat menjalankan audit lain di Google PageSpeed ​​Insights untuk melihat apakah kinerja saya meningkat dengan Imagify. Hasilnya bagus. Skor saya berubah dari 75/100 menjadi 92/100 di ponsel!

Peningkatan skor PSI di ponsel menggunakan Imagify
KPI Skor Seluler – gambar JPEG
( Tidak Membayangkan )		 Skor Seluler – Gambar WebP dan mode Agresif (Dengan Imagify)
Nilai keseluruhan 75/100 92/100
Audit PSI
Cat Contentful Terbesar 4,9 detik 3.0 detik
Ukuran halaman
 1,2 MB 714 KB
permintaan HTTP
 22 17
Waktu muat
 2.890 detik 1,059 detik



Kesimpulannya, Imagify membuat situs web kami lebih cepat di seluler: halaman lebih ringan, jumlah permintaan HTTP turun, dan bahkan waktu buka saya jauh lebih baik.

Last but not least, Imagify juga telah membahas tiga masalah utama yang sebelumnya ditandai oleh PSI:

Masalah gambar PSI terpecahkan berkat Imagify

“Sajikan gambar dalam format generasi berikutnya”, “Ukuran gambar yang benar”, dan “Enkode gambar secara efisien” sekarang telah lulus audit berkat Imagify.

Membungkus

Secara keseluruhan, kami telah melihat bahwa menyajikan gambar dalam format generasi berikutnya adalah langkah besar menuju peningkatan kinerja. Format WebP – bersama dengan pengoptimalan dan pengubahan ukuran gambar – adalah kombinasi yang unggul untuk mempercepat situs WordPress Anda.

Ukuran file menggunakan JPEG Ukuran file menggunakan WebP + gambar terkompresi dan diubah ukurannya (penghematan sekitar 80% berkat Imagify)

Konversi dari JPEG atau PNG ke format next-gen seperti WebP sangat mudah dilakukan dengan plugin seperti Imagify . Selain itu, Imagify juga mengompresi dan mengubah ukuran gambar WordPress kami, yang membuat kami pindah ke skor hijau di seluler (92/100 di Google PageSpeed ​​Insights). Saatnya untuk mengoptimalkan gambar Anda dan menyajikannya di WebP.

Lakukan audit Anda dan coba Immagify gratis hari ini!