Pagespeed Insights Optimize Images (Web Performance)
Pagespeed Insights Optimize Images (Web Performance) - Pada artikel sebelumnya saya telah menjelaskan wacana Optimize Images for SEO atau pengoptimalan keterlihatan gambar di mesin telusur, sekarang saya akan mencoba menjelaskan kembali tentang Optimize Images yang ditujukan untuk mengoptimalkan kecepatan situs web (web performance). Google PageSpeed Insights sebetulnya sudah menawarkan referensi yang manis untuk hal ini (Optimize Images) yaitu dengan metode defer offscreen images (menunda gambar dibalik layar) dengan menggunakan javascript ibarat lazy load images atau dengan metode compress file image ke jenis/gen yang lebih ramah untuk performa situs web yaitu WebP.
Kedua metode tersebut sama baik dan menawarkan imbas yang faktual 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 menawarkan skor kecepatan situs web yang baik.
Hal itu disebabkan karena 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 ibarat (JavaScript, CSS, HTML dan Lainnya) sehingga keseluruhan situs mampu 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.
Bagaimana jikalau menggunakan images compressor atau mengubah jenis file image ke WebP? WebP File Images menawarkan 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 memiliki size 500kb maka WebP mampu menawarkan resolusi yang sama dengan ukuran sekitar 200kb saja. Makara mampu kita bayangkan jikalau pada sebuah halaman web terdapat sepuluh hingga duapuluh gambar maka berapa kb yang mampu kita hemat jikalau menggunakan image dengan jenis file WebP.
WebP lossy support
Bagi blogger pemula ibarat saya yang tidak terlalu banyak menguasai javascript, metode ini sangat efektif untuk mempercepat loading situs dan mengurangi size content pada halaman web, lagi pula di masa smartphone sekarang 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 menggunakan webp di situs anda karena tidak semua komputer menginstall webp viewer. Semoga bermanfaat dan jangan lupa subscribe ya :)
Sumber https://www.jellykom.com/2018/07/cara-unlock-bootloader-asus-zenfone-max.htm
 |
| Pagespeed Insights Optimize Images (Web Performance) |
Hal itu disebabkan karena 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 ibarat (JavaScript, CSS, HTML dan Lainnya) sehingga keseluruhan situs mampu 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.
 |
| Ilustrasi content size analysis |
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 memiliki size 500kb maka WebP mampu menawarkan resolusi yang sama dengan ukuran sekitar 200kb saja. Makara mampu kita bayangkan jikalau pada sebuah halaman web terdapat sepuluh hingga duapuluh gambar maka berapa kb yang mampu kita hemat jikalau menggunakan image dengan jenis file WebP.
Webp Browser Support (Browser yang mendukung file WebP)
Google developer menjelaskan bahwa ketika 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)
- Google Chrome (desktop) 23+
- Google Chrome for Android version 25+
- Opera 12.10+
- Native web browser, Android 4.2+ (JB-MR1)
- Pale Moon 26+
- Google Chrome (desktop and Android) 32+
- Opera 19+
Convert Image ke WebP
Untuk membuat file WebP atau merubah file imege (PNG, JPEG dan Lainnya) ke WebP tidak begitu sulit, kita hanya cukup menggunakan tool online "Convert an image to WebP" oleh image.online-convert.com atau dengan menginstall plug-in webp jikalau kamu merupakan pengguna photoshop.Bagi blogger pemula ibarat saya yang tidak terlalu banyak menguasai javascript, metode ini sangat efektif untuk mempercepat loading situs dan mengurangi size content pada halaman web, lagi pula di masa smartphone sekarang 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 menggunakan webp di situs anda karena tidak semua komputer menginstall webp viewer. Semoga bermanfaat dan jangan lupa subscribe ya :)