Pagespeed Insights Optimize Images (Web Performance)

29 views
Pagespeed Insights Optimize Images (Web Performance) – Pada artikel sebelumnya aku telah menjelaskan perihal Optimize Images for SEO atau pengoptimalan keterlihatan gambar di mesin telusur, kini aku akan mencoba menjelaskan kembali tentang Optimize Images yang ditujukan untuk mengoptimalkan kecepatan situs web (web performance). Google PageSpeed Insights bergotong-royong sudah memperlihatkan rujukan yang cantik untuk hal ini (Optimize Images) yaitu dengan metode defer offscreen images (menunda gambar dibalik layar) dengan memakai javascript menyerupai lazy load images atau dengan metode compress file image ke jenis/gen yang lebih ramah untuk performa situs web yaitu WebP.

 Pada artikel sebelumnya aku telah menjelaskan perihal  Pagespeed Insights Optimize Images (Web Performance)
Pagespeed Insights Optimize Images (Web Performance)

Kedua metode tersebut sama baik dan memperlihatkan imbas yang konkret untuk menambah kecepatan pemuatan situs web, namun “terkadang” memanipulasi gambar/image dengan “lazy-load images” tidak selalu efektif setiap saat, ada masanya lazy-load images tidak bekerja dengan baik dan masih menampilkan pemutan malas atau loading lambat pada browser, meskipun di pengujian dengan tool Pagespeed Insights script lazy-load memperlihatkan skor kecepatan situs web yang baik.

Hal itu disebabkan lantaran secara matematis yang logis script lazy-load images hanya menunda pemuatan material situs web dengan size yang besar yaitu gambar/image dan mendahulukan pemuatan material situs web lainnya menyerupai (JavaScript, CSS, HTML dan Lainnya) sehingga keseluruhan situs sanggup dimuat dengan cepat selain image (tanpa menunggu image/gambar ditampilkan secara utuh) namun tanpa disadari waktu yang dibutuhkah browser untuk mengeksekusi javasript juga bertambah karenanya.

 Pada artikel sebelumnya aku telah menjelaskan perihal  Pagespeed Insights Optimize Images (Web Performance)
Ilustrasi content size analysis

Bagaimana jikalau menggunakan images compressor atau mengubah jenis file image ke WebP? WebP File Images memperlihatkan kompresi yang lebih baik dalam artian unduhan lebih cepat dan konsumsi data lebih sedikit daripada PNG atau JPEG. Secara matematis mengkompres image artinya mengurangi size (kb) image tanpa menambah material apapun ke situs web “murni mengurangi content size pada sebuah halaman web” yang disebabkan oleh gambat/image.

Perbandingan ukuran size file webp dengan png maupun jpeg berkisar antara 50-60 persen (lebih kecil size webp) dengan resolusi yang nyaris tidak berbeda. Jika PNG atau JPEG mempunyai size 500kb maka WebP sanggup memperlihatkan resolusi yang sama dengan ukuran sekitar 200kb saja. Makara sanggup kita bayangkan jikalau pada sebuah halaman web terdapat sepuluh sampai duapuluh gambar maka berapa kb yang sanggup kita ekonomis jikalau memakai image dengan jenis file WebP.

Webp Browser Support (Browser yang mendukung file WebP)

Google developer menjelaskan bahwa dikala ini telah banyak browser papan atas yang mendukung file webp diantaranya yaitu sebagai berikut;

WebP lossy support

  • Google Chrome (desktop) 17+
  • Google Chrome for Android version 25+
  • Opera 11.10+
  • Native web browser, Android 4.0+ (ICS)

WebP lossy, lossless & alpha support

  • Google Chrome (desktop) 23+
  • Google Chrome for Android version 25+
  • Opera 12.10+
  • Native web browser, Android 4.2+ (JB-MR1)
  • Pale Moon 26+

WebP Animation support

  • Google Chrome (desktop and Android) 32+
  • Opera 19+

Kemudian melalui artikel wikipedia yang direkomendasikan oleh google developer juga dijelaskan secara rinci browser yang mendukung file webp yaitu; Google Chrome, Opera, Pale Moon, WaterfoX, Mozilla Firefox dari versi 65 dan seterusnya dan Microsoft Edge juga mendukung WebP melalui ekstensi platform (diinstal secara default) sampai penggunaan file webp di javascript.

Convert Image ke WebP

Untuk menciptakan file WebP atau merubah file imege (PNG, JPEG dan Lainnya) ke WebP tidak begitu sulit, kita hanya cukup memakai tool online “Convert an image to WebP” oleh image.online-convert.com atau dengan menginstall plug-in webp jikalau kau merupakan pengguna photoshop.

Bagi blogger pemula menyerupai aku yang tidak terlalu banyak menguasai javascript, metode ini sangat efektif untuk mempercepat loading situs dan mengurangi size content pada halaman web, lagi pula di kala smartphone kini ini nyaris tidak ada browser yang tidak mendukung file webp.

Namun harus diketahui bahwa file webp kebanyakan hanya dikenal dikalangan pengembang situs dan programer saja, jikalau situs anda yaitu penyedia download image sebaiknya fikirkan sebelum memakai webp di situs anda lantaran tidak semua komputer menginstall webp viewer. Semoga bermanfaat dan jangan lupa subscribe ya 🙂