Skip to main content

12 cara mengoptimasi gambar agar SEO

Selamat Datang di Blog Orang IT. Beberapa orang berpendapat bahwa dengan kemajuan teknologi Google saat ini dalam pembelajaran mesin, tag alt tidak lagi diperlukan dalam gambar. Inilah yang terjadi ketika Anda mengunggah foto kucing ke API Cloud Vision Google ( alat identifikasi gambar yang dimiliki google )

API Cloud Vision Google

Google dapat mengidentifikasi bahwa ini adalah foto kucing dengan keakuratan yang hampir tepat. Itu mengesankan!

Saya memastikan untuk menghapus semua metadata dari gambar ini. Anda juga dapat melihat bahwa nama file ini adalah IMG_0696_2.jpg

Jadi apa gunanya menambahkan tag alt jika Google dapat memahami konten gambar? Apakah SEO untuk gambar sudah tidak diperlukan? Mari kita ulas

Dalam postingan kali ini, saya akan menunjukkan 12 tips bagaimana mengoptimalkan gambar agar SEO dan berpotensi menjangkau visitor organik dari google image search sekalipun :

1. Beri nama gambar yang tepat

Inilah yang dikatakan Google tentang memberikan nama yang sesuai pada gambar :
[…] Nama file dapat memberikan petunjuk Google tentang subjek gambar. Sebagai contoh, my-new-black-kitten.jpg lebih baik daripada IMG00023.JPG.
Ini adalah SEO gambar yang umum. Kebanyakan webmaster  telah melakukan ini.

Mungkin juga karena Google telah memberikan saran yang sama selama bertahun-tahun. Jadi memberikan nama gambar yang sesuai dengan topik gambar sangatlah membantu dalam hal SEO

Saya sadar bahwa contoh gambar kucing yang dapat di identifikasi cukup mengesankan. Jadi mari kita coba gambar lain. Apa ya ? coba kita upload foto mentega

foto mentega

Google yakin 91% bahwa ini adalah keju. Google salah! Itu adalah gambar mentega.

Sekarang, Saya akui memang mentega terlihat mirip dengan keju, tetapi intinya adalah: Google masihlah belum sempurna dan tidak akan pernah sempurna.


Anda harus melakukan beberapa hal untuk membantu mereka memahami gambar Anda. Caranya dengan memberikan nama file yang deskriptif dan lugas.

Anjing: anjing-lucu.jpg

Kucing: kucing-berekor-dua.jpg

Nama file sebaiknya tidak tunggal ( langsung menyebut objek ) tapi gunakan pengoptimalan deskriptif

2. Gunakan deskripsi alat teks dan caption

Alt teks (teks alternatif) berfungsi untuk mendeskripsikan suatu gambar. Inilah yang ditampilkan browser kepada pengguna melalui layar monitor. Browser juga menampilkan Alt teks jika ada masalah saat penampilan gambar.

Berikut adalah sintaks HTML:

<img src = "anjing-play-ball.jpg" alt = "anjing bermain bola" />

Ini digunakan untuk menunjukkan seperti apa alt tag yang ditulis dengan baik. Berikut adalah saran umum yang diberikan dalam panduan google guidelines
Google menggunakan teks alt bersama dengan algoritme visi komputer dan konten halaman untuk memahami subjek gambar. […] Ketika memilih teks alt, fokus pada pembuatan konten yang bermanfaat, kaya informasi yang menggunakan kata kunci dengan tepat dan dalam konteks konten halaman. Hindari mengisi atribut alt dengan kata kunci (penjejalan kata kunci) karena menghasilkan pengalaman pengguna yang negatif dan dapat menyebabkan situs Anda dilihat sebagai spam.
Matt Cutts memberikan beberapa saran yang sama untuk Alt teks pada video yang belum lama ini diunggah :


Berikut adalah contoh penggunaan alt tag yang disarankan dalam format :

“Ini adalah (object) gambar / tangkapan layar / foto / gambar __________.”

Berikut beberapa contohnya:

"Ini adalah foto cheesecake cokelat."
<img src = "chocolate-cheesecake.jpg" alt = "Chocolate cheesecake" />
"Ini gambar kucing saya, Mark, dia sedang bermain dengan mainannya."
<img src = "mark-the-cat.jpg" alt = "Kucing saya, Mark, bermain dengan mainannya" />
Anda mungkin ingin sedikit menyimpang dari rumus ini ketika menulis teks alt untuk gambar produk.

Anda dapat menambahkan kode produk atau nomor seri, seperti:
<img src = "battery-tender.jpg" alt = "Baterai tender (022-0186G-DL-WH)" />
Google tidak memiliki pedoman resmi yang menyatakan bahwa Anda harus melakukan ini. Tetapi hal itu masuk akal karena Google dengan jelas memahami hubungan antara nama produk dan nomor seri / produk.

Mau bukti? Lihatlah pencarian terkait untuk pertanyaan ini:

nomor seri

Google tahu produk apa yang orang cari berdasarkan pencarian untuk nomor produk saja. Jadi memasukkan nomor produk ke alt teks dapat membantu Google  memahami bahwa itu, pada kenyataannya adalah sebuah gambar dari suatu produk tertentu

Oh iya, dan jangan lupa tentang caption. Itu juga penting!

Inilah yang dikatakan Google:
Google mengekstraksi informasi tentang subjek gambar dari konten halaman, termasuk caption dan judul gambar. Sedapat mungkin, pastikan gambar ditempatkan di dekat teks yang relevan dan pada halaman yang relevan dengan subjek gambar.

3. Pilih jenis file terbaik

Sebagian besar gambar di web selalu bertipe : JPEG, PNG, atau GIF.

Masing-masing file menggunakan metode kompresi yang berbeda. Itu berarti ukuran file antara ketiga jenis file dapat berubah secara drastis. Itu penting untuk diperhatikan.

Ini alasannya:

Gambar merupakan penyumbang terbesar untuk ukuran halaman secara keseluruhan, yang dapat membuat halaman menjadi lambat dan konten tertunda saat diload

Faktor kecepatan halaman sangat penting untuk SEO. Google telah mengonfirmasi bahwa ini telah menjadi salah satu faktor peringkat pada desktop maupun seluler. Tugas Anda adalah memilih jenis file yang paling sesuai untuk setiap gambar  yaitu dengan kriteria yang menawarkan kompresi terbaik dengan penurunan kualitas paling sedikit.

Berikut adalah gambar yang sama namun disajikan dalam beberapa format yang berbeda :

kompresi terbaik

Anda dapat melihat bahwa gambar JPEG adalah pemenang . Ini karena JPEG memiliki ukuran file terkecil, dan hanya sedikit perbedaan pada kualitas gambar . Jadi apakah JPEG selalu merupakan pilihan yang tepat? Belum tentu

Saya rasa ilustrasinya seperti ini :

jpg vs png

Secara umum, JPEG adalah format terbaik untuk foto, sedangkan PNG terbaik untuk gambar , teks, dll. GIF paling baik untuk gambar bergerak. 

Sebagian besar aplikasi pengeditan gambar profesional (misalnya, Photoshop) akan memberi Anda opsi untuk menyimpan project sebagai JPEG, PNG, atau GIF. Anda juga dapat menggunakannya untuk mengonversi gambar dari satu format file ke format lainnya. 

Ada juga format gambar baru yakni: WebP. Ini menjanjikan kompresi superior untuk JPEG dan PNG. Namun, saya memutuskan untuk menyimpanya karena saat ini hanya didukung oleh Chrome dan Opera. Anda dapat mempelajari lebih lanjut tentang WebP di sini.

4. Resize ukuran gambar sesuai dimensi situs anda

Perhatikan dikanan kiri ada banyak ruang putih di kedua sisi konten halaman ini! Itu karena lebar maksimum konten blog adalah 720px. Dengan kata lain, tidak peduli apa ukuran layar Anda, gambar tidak pernah ditampilkan lebih lebar dari 720px.

Sekarang, semakin banyak piksel yang membentuk gambar Anda, semakin besar ukuran file.

Browser akan mengubah ukuran gambar lebih lebar dari 720px agar muat di layar (setidaknya dengan situs web responsif yang terkode dengan baik). Namun, yang penting, browser masih harus memuat gambar berukuran penuh. Dengan kata lain, jika saya mengunggah gambar berukuran 6000px, browser masih perlu memuat seluruhnya

Solusinya adalah dengan mengubah ukuran dan mengunggah ulang gambar dalam lebar maksimum yang Anda butuhkan. Ketahuilah bahwa ini mungkin tidak 720px. Itu tergantung pada desain keseluruhan situs web Anda. Langkah pertama adalah mencari tahu. Anda dapat melakukannya dengan menggali ke CSS :

ukuran lebar halaman

Setelah itu anda dapat menggunakan alat smartresize untuk mengubah ukuran gambar secara massal.

Hanya lebarnya yang penting, jadi unggah gambar Anda secara massal lalu gunakan opsi "max width" untuk menyesuaikan lebar saja

max width

Anda harus mengunggah JPEG dan PNG dalam dua batch terpisah. Jika tidak, alat ini akan mengonversi semua gambar menjadi jenis file gambar yang sama. Anda dapat memilih antara JPEG dan PNG . Gunakan opsi yang sesuai dengan hasil output yang anda inginkan

Berikut dua alasan mengapa smartresizer ini :

a. Mengubah ukuran lebar: Katakanlah bahwa lebar maksimum situs web Anda adalah 700 piksel. Anda memiliki banyak gambar yang perlu diubah ukurannya. Beberapa lebih lebar dari 700 piksel, dan beberapa lebih sempit dari 700 piksel.

Anda tidak ingin mengubah ukuran yang lebih sempit menjadi 700 piksel karena itu akan menurunkan kualitas gambar secara keseluruhan. Alat ini menyimpan gambar-gambar itu. Alat Ini hanya mengubah ukuran yang terlalu lebar.

b. Menyimpan nama file secara utuh: Anda telah menghabiskan waktu menamai gambar Anda untuk SEO. Anda mengubah ukurannya dan mengunduh versi yang diubah ukurannya. Anda membuka .zip untuk menemukan image1.png, image2.png. (Anda akan frustrasi )

Tapi , Alat ini menjaga nama file tetap utuh, jadi Anda tidak perlu mengganti nama setelah mengubah ukuran.

5. Turunkan ukuran gambar anda

Lihat 2 gambar dengan jenis file yang sama :

Turunkan ukuran gambar

Keduanya adalah JPEG. Ada sedikit perbedaan nyata dalam kualitas diantara keduanya, namun gambar pertama 58% lebih kecil dari yang pertama (31kb vs 73kb).

Google memiliki beberapa dokumentasi yang sangat ekstensif dalam mengoptimalkan gambar untuk web.

Untuk hasil terbaik, bereksperimenlah dengan berbagai pengaturan kualitas untuk gambar , dan jangan takut untuk menurunkan kualitas (hasil visual) seringkali tidak berbeda jauh namun efeknya membuat halaman anda menjadi lebih cepat dimuat

Google merekomendasikan tiga alat untuk membantu meresize ukuran gambar yakni: Guetzli, MozJPEG (oleh Mozilla), dan pngquant.

Jika Anda tidak nyaman menggunakan alat semacam itu, rekomendasi Google lainya adalah menggunakan ImageOptim  

ImageOptim membantu mengurangi ukuran file  meskipun biasanya tidak banyak. Anda dapat menggunakan alat berbasis web gratis verexif (yang secara resmi direkomendasikan oleh Google) untuk menghapus data EXIF jika Anda berencana untuk tidak menggunakan ImageOptim

Seberapa baik hasil dari alat ini? Saya memutuskan untuk menjalankan eksperimen kecil. Saya mengambil sampel dari 15 gambar terdiri dari beberapa JPEG, beberapa PNG. Saya memasukkan semuanya ke dalam alat ini pada pengaturan defaultnya. Saya melakukan hal yang sama untuk beberapa alternatif lain.

Beginilah cara mereka mengurangi ukuran file rata-rata:

Imageoptim: 69% (JPEG). 40% (PNG)

Shortpixel: 42% (JPEG). 59% (PNG)

Kraken.io: 13% (JPEG). 63% (PNG).

TinyPNG: 27% (JPEG). 65% (PNG).

Optimizilla: 27% (JPEG). 60% (PNG)

Imagify.io: 6% (JPEG). 1% (PNG)

Compressor.io: 42% (JPEG). 58% (PNG)

Imageoptim (alat yang direkomendasikan Google) sejauh ini adalah yang terbaik untuk JPEG. Tapi itu adalah salah satu yang terburuk untuk PNG. Namun, perlu diperhatikan bahwa ImageOptim mengkompress gambar hingga 70% kualitas  JPEG dan 40% untuk PNG

Namun, jika kita tetap dengan hasil pengaturan default di atas, Shortpixel tampaknya menjadi kompresor gambar yang terbaik untuk 2 format gambar populer

Itu kabar baik bagi pengguna WordPress karena ada plugin WordPress ShortPixel. Gratis hingga 100 gambar per bulan.

6. Buat sitemap gambar

Inilah yang dikatakan Google tentang sitemap gambar:
Gambar adalah sumber informasi penting tentang konten di situs Anda. Anda dapat memberi Google detail tambahan tentang gambar Anda, dan memberikan URL gambar yang mungkin tidak kami temukan dengan menambahkan informasi ke sitemap gambar.
Ini adalah tag yang dapat Anda gunakan dalam sitemap gambar:

sitemap gambar

Jika Anda menggunakan WordPress dan Yoast SEO, maka gambar ditambahkan ke sitemap Anda secara otomatis. Itu bahkan berlaku untuk situs yang memiliki halaman "media" yang disetel ke noindex.

(Catatan: Itu sekarang adalah pengaturan default di versi terbaru Yoast.) Namun, Yoast hanya menyertakan tag <image: image> dan <image: loc> yang diperlukan. Jika Anda menambahkan teks ke gambar Anda di WordPress, Yoast tidak menambahkan ini.

Bagi pengguna blogger anda dapat menyertakannya sendiri, secara manual

Dokumentasi Google untuk peta situs gambar agak jarang. Tidak ada tempat yang mereka tentukan untuk sintaks yang di inginkan dalam penggunaan tag <image: geo_location>. Tidak jelas apakah gambar anjing, di UK harus ditandai sebagai:

<gambar: geo_location> anjing, Inggris </ gambar: geo_location>

<gambar: geo_location> anjing, Inggris Raya </ gambar: geo_location>

Hal yang sama berlaku untuk <image: license>. Apakah Google berharap Anda menautkan ke halaman lisensi Creative Commons resmi ini? Atau apakah mereka lebih suka Anda menautkan ke halaman lisensi di situs Anda sendiri?

Google juga menyatakan bahwa:
Peta situs gambar dapat berisi URL dari domain lain, tidak seperti peta situs reguler, yang memberlakukan batasan lintas-domain. Ini memungkinkan webmaster untuk menggunakan CDN (jaringan pengiriman konten) untuk meng-host gambar. Kami mendorong Anda untuk memverifikasi nama domain CDN di Search Console sehingga kami dapat memberi tahu Anda tentang kesalahan perayapan apa pun yang mungkin kami temukan.

7. Gunakan grafik vektor sesuai keperluan

Inilah yang dikatakan Google tentang grafik vektor:
Grafis vektor menggunakan garis, titik, dan poligon untuk mewakili gambar. [Mereka] cocok untuk gambar yang terdiri dari bentuk geometris sederhana (misalnya, logo, teks, ikon, dan sebagainya), dan memberikan hasil yang tajam pada setiap resolusi dan pengaturan zoom, yang menjadikannya format ideal untuk resolusi tinggi layar dan aset yang perlu ditampilkan dalam berbagai ukuran.
Banyak situs menggunakan grafik vektor untuk logo mereka dan elemen sederhana di halaman lainnya.

SVG (Scalable Vector Graphics) mungkin adalah format vektor paling populer di web. World Wide Web Consortium (W3C) mengembangkannya dan mereka berbasis XML. Dengan demikian, semua browser web modern mendukungnya.

Tidak peduli apa browser, perangkat atau resolusi layar yang Anda miliki, SVG akan terlihat jernih karena mereka tidak pixelate. Anda dapat menampilkan SVG di layar seukuran layar lebar, itu tidak akan menurunkan satu ons pun kualitasnya

Berikut adalah saran Google untuk mengoptimalkan SVG:
  • File SVG harus diperkecil untuk mengurangi ukurannya.
  • File SVG harus dikompresi dengan GZIP.
Alat yang direkomendasikan untuk meminimalkan file SVG adalah svgo.

Tidak nyaman menggunakan antarmuka dengan baris perintah? Gunakan aplikasi web ini atau aplikasi Mac ini untuk melakukan hal yang sama. Keduanya menawarkan antarmuka drag dan drop sederhana untuk memperkecil file seperti itu. Saya lebih suka aplikasi web.

meminimalkan file SVG

Screenshot itu merangkum semua yang perlu Anda ketahui tentang SVG. Anda dapat melihat bahwa ukuran asli SVG adalah 8.54kb. Itu sangat kecil. Versi yang diperkecil (dan gzip) bahkan lebih kecil hanya 3,56kb ( penghematan 41,67%.)

Kompresi gzip adalah sesuatu yang diaktifkan pada tingkat server. Dengan kata lain, SVG di atas hanya akan menggunakan 3,56kb bandwidth jika server memungkinkan atau jika tidak, ia akan menggunakan 8.54kb

Gunakan https://checkgzipcompression.com/ untuk memeriksa apakah kompresi gzip diaktifkan di server Anda. Ikuti enable-wordpress-gzip-compression untuk mengaktifkannya jika tidak.

8. Atur agar gambar responsif

Katakanlah Anda mengunggah gambar berukuran 720px ke situs Anda.

Jika seseorang datang dari perangkat seluler dengan layar yang jauh lebih kecil, katakanlah 320px lebar, maka browser mereka masih harus memuat gambar 720px. Gambar itu akan terlihat baik-baik saja. Tapi begitu juga gambar berukuran 320px.

Apakah anda melihat masalahnya? Memuat gambar 720px adalah pemborosan bandwidth dan hanya berfungsi untuk memperlambat halaman saat dimuat. Itu tidak baik untuk SEO.

Solusinya adalah dengan menggunakan srcset.

Ini adalah potongan kode HTML ajaib yang memberi tahu browser untuk memuat versi gambar yang berbeda untuk resolusi layar yang berbeda.

Berikut sintaksnya, di ikuti dengan penjelasan:

<img src = "image.jpg" srcset = "image-medium.jpg 1000w, image-large.jpg 2000w">

Bagian pertama dari sintaks adalah tag <img> yang cukup standar. Kemudian saya juga menyertakan tautan ke dua versi lain dari gambar yang sama dalam berbagai ukuran yakni menengah (lebar 1000px) dan besar (lebar 2000px).

Katakanlah Anda berada di perangkat dengan lebar layar 320px dan layar 1x . Gambar yang Anda miliki adalah small.jpg (lebar 500px), medium.jpg (lebar 1000px), dan large.jpg (lebar 2000px).

Proses pada Browser :

Biar saya rumuskan dalam matematika cepat  :

500/320 = 1,5625

1000/320 = 3,125

2000/320 = 6,25

Oke, jadi karena layar saya  1x, 1.5625 adalah yang paling dekat dengan yang saya butuhkan. Ini sedikit tinggi, tetapi itu adalah opsi terbaik dibandingkan dengan yang lain yang terlalu tinggi.

Sekarang browser lain mengunjungi situs tersebut. Ini juga layarnya 320px tapi layar retina (2x). browser itu melakukan matematika yang sama:

Oke, jadi karena layar saya 2x retina, saya akan membuang gambar 1,5625 karena terlalu rendah untuk saya dan mungkin terlihat buruk. Saya akan menggunakan gambar 3.125.

Masuk akal? Browser pada dasarnya memilih gambar yang paling efisien untuk ditampilkan ke pengunjung, sehingga mengurangi bandwidth dan meningkatkan waktu load.

Sempurna. Tetapi apakah itu berarti Anda perlu mengunggah banyak ukuran yang berbeda dari semua gambar Anda? itu melelahkan

WordPress menangani secara otomatis (mulai dari WordPress 4.4 — yang semestinya Anda gunakan sekarang). Untuk setiap gambar yang Anda unggah, WordPress membuat versi ini secara default:

Thumbnail: Ukuran persegi (150px kali 150px).
Medium: Ukurannyasisi terpanjang adalah lebar 300 piksel atau tinggi.
Sedang Besar. Ukurannya hingga 768 piksel lebar.
Besar: Ukurannya sehingga sisi terpanjang adalah 1024 piksel lebar atau tinggi.
Lengkap: Gambar asli.

Selanjutnya, WordPress juga menambahkan srcset secara otomatis.

Inilah blog wordpress saya yang terlihat dalam mode source :

srcset

Sekali lagi: Kode itu dibuat otomatis seluruhnya oleh WordPress. Saya tidak mengunggah beberapa versi dari gambar itu. Jika anda kehabisan space karena fitur ini silahkan dimatikan


Perhatikan bahwa Anda dapat menggunakan sintaks @ 2x jika ingin mengoptimalkan tampilan display. Ada juga plugin WordPress yang menambahkan dukungan untuk tampilan seperti ini di luar kotak.

9. Memanfaatkan markup skema (untuk resep, produk, dan video)

Penanda skema kemungkinan sesuatu yang Anda lebih kenal dalam konteks penelusuran web Google. Ini terlihat seperti ini dalam hasil pencarian biasa:

snipper rich

Tetapi apakah Anda tahu bahwa markup skema mungkin juga relevan untuk SEO gambar?

Itu karena Google menunjukkan badges yang relevan pada thumbnail dalam hasil penelusuran gambar seluler. Inilah tampilannya:


Google mengatakan ini tentang badge/lencana:
Jika Anda memiliki gambar di situs Anda, Anda dapat membantu pengguna mengidentifikasi jenis konten yang terkait dengan gambar dengan menggunakan data terstruktur yang sesuai di halaman Anda. Ini membantu pengguna menemukan konten yang relevan dengan cepat, dan mengirimkan lalu lintas bertarget yang lebih baik ke situs Anda.
Saat ini, Google memiliki dukungan untuk empat jenis markup: produk, resep, video, dan GIF.

Memastikan bahwa gambar Anda menunjukkan lencana ini dalam pencarian gambar Google dengan mudah. Anda hanya perlu menambahkan markup skema yang sesuai ke halaman.

Tambahkan markup resep ke halaman resep.

Tambahkan markup produk ke halaman produk.

Tambahkan markup video ke halaman dengan video.

Perhatikan bahwa GIF tidak memerlukan markup tambahan — Google sudah tahu bahwa ini adalah gif.

Kecuali Anda memiliki jenis konten ini di situs web Anda, Anda tidak perlu khawatir tentang markup skema. Sepertinya Google mendukung lencana untuk ke empat jenis konten ini karena mereka mengakui bahwa pengguna mereka sering mencari konten semacam itu di penelurusan gambar

10. Pertimbangkan penggunaan lazy load

Lazy load adalah tempat dimana browser menahan pemuatan gambar (atau objek lain apa pun itu video, iklan banner dll.) Hingga mereka ditampilkan di layar. Gambar lain akan dimuat sesuai waktu yang telah ditentukan yakni ketika pengguna menggulir halaman / scroll halaman kebawah

Inilah yang dikatakan Google tentang lazy load:
Lazy load dapat mempercepat pemuatan secara signifikan pada halaman panjang yang mencakup banyak gambar di bawah flip dengan memuatnya sesuai kebutuhan atau ketika konten utama telah selesai memuat dan menampilkan.
Ada banyak perdebatan di masa lalu tentang apakah gambar yang dimuat dengan mode Lazy load baik atau buruk untuk SEO.  Google merekomendasikan Lazy load pada tahun 2018 ini

Itu adalah rekomendasi dari alat PageSpeed ​​Insights Google sendiri.

PageSpeed ​​Insights

Google menjelaskan cara menerapkan lazy load (dengan cara yang memastikan mereka dapat melihat konten yang dimuat dengan lazy load sangat penting!) Di sini. Ada beberapa metode berbeda, tetapi semuanya melibatkan Javascript. Jika Anda tidak terbiasa atau tidak nyaman dengan hal-hal semacam itu, sebaiknya mempekerjakan tukang coding untuk memasangnya diblog anda

Jika Anda menggunakan WordPress, maka ada beberapa plugin lazy load di luar sana.

Saya menggunakan plugin Lazy Load A3. Sejauh ini baik2 saja.

Selengkapnya : Script lazy load untuk blogger

11. Manfaatkan caching browser (Leverage browser caching)

Browser caching adalah tempat gambar (dan file lainnya) disimpan sementara di browser pengunjung Anda. Hasilnya nampak ketika pengunjung membuka kembali situs anda maka browser akan meload sebagian data yang tersimpan dalam cache sehingga pemuatan halaman berlangsung lebih cepat

Misalnya, ketika Anda membuka blog www.helmykkediri.id, Browser anda harus mengunduh semua gambar di artikel dan menampilkannya di browser . Sekarang, tanpa cache browser, proses ini perlu diulang secara keseluruhan jika Anda ingin membaca ulang halaman ini besok.

Namun, dengan cache browser, yang terjadi adalah browser Anda meload beberapa gambar yang tersimpan dalam hardisk anda. Jadi ketika Anda melihat halaman ini lagi atau halaman serupa, browser tidak perlu mengunduh ulang semuanya dari server. 

Inilah yang dikatakan Google tentang cache browser:
Caching HTTP dapat mempercepat waktu buka halaman Anda pada kunjungan berulang.
Ketika browser meminta sumber daya, server yang menyediakan sumber daya dapat memberi tahu browser berapa lama penyimpanan sementara atau "cache" sumber daya. Untuk permintaan selanjutnya untuk sumber daya itu, peramban menggunakan salinan lokalnya, daripada pergi ke jaringan untuk mendapatkannya.
Anda bahkan dapat melihat saran ini di Google PageSpeed Insights agar situs web anda memanfaatkan caching browser

Jadi bagaimana mengaktifkan cache browser untuk gambar disitus Anda?

Di WordPress, itu cukup mudah. Cukup instal plugin seperti W3 Total Cache. Itu akan mengaktifkan cache browser secara default dan menambahkan modifikasi yang diperlukan untuk file .htaccess Anda.

Untuk pengguna non-WordPress, Anda perlu menambahkan kode ini ke file .htaccess Anda secara manual:
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
</IfModule>
Anda dapat mengubah bagian “1 tahun” menjadi “1 bulan,” “1 minggu,” “1 hari,” “1 jam,” dll. Namun, pengaturan ini seharusnya bekerja dengan baik untuk sebagian besar situs. Ini juga yang W3 Total Cache gunakan secara default.


Periksa apakah kode ini kompatibel dengan server Anda sebelum di implementasikan. terkadang error File .htaccess bisa sangat merepotkan.

12. Gunakan CDN

Sebagian besar situs web melayani semua permintaan file mereka (termasuk gambar) dari satu server di satu lokasi.

Jika saya anggap bahwa server web Anda di Inggris, maka gambar Anda tidak harus melakukan perjalanan jauh ketika seseorang dari Inggris mengunjungi situs web Anda. Namun, ini adalah cerita yang berbeda untuk pengunjung Indonesia . Gambar harus melakukan perjalanan lebih jauh untuk menjangkau mereka. Itu menurunkan kecepatan di mana situs web Anda memuat.

Content Delivery Networks (CDNs) memecahkan masalah ini dengan caching file Anda di seluruh jaringan server global. Sekarang, ketika seseorang mengunjungi situs web Anda, gambar akan dimuat dari server yang paling dekat dengan mereka.

Berikut ini GIF keren dari CloudFlare yang menggambarkan proses CDN dengan sempurna:

proses CDN

Ada banyak layanan CDN di luar sana. Berikut beberapa diantaranya:
Jika Anda menggunakan WordPress, menyiapkan CDN itu mudah. Daftar ke CDN pilihan Anda, ikuti petunjuknya, lalu gunakan plugin seperti W3 Total Cache, CDN Enabler, atau WP Rocket untuk mengaktifkan CDN di situs Anda. Sesederhana itu.

Namun, perlu dicatat bahwa CDN Anda akan memiliki URL seperti xyz.cdnprovider.com.

Itu tidak bagus untuk SEO karena alasan berikut:
  • Gambar Anda dihosting secara efektif di domain terpisah. Jika seseorang memilih untuk menyematkan salah satu gambar dan tautan Anda kesitus Anda, ada kemungkinan mereka akan menautkan ke CDN. Itu berarti Anda kehilangan tautan.
  • Ini dapat menyebabkan masalah jika Anda ingin mengubah penyedia CDN di masa depan. Anda harus mengubah (atau mengalihkan) semua URL gambar Anda, dll.
Untuk alasan itu, saya sarankan membuat rekaman CNAME. Anggap ini sebagai alias yang dapat digunakan sebagai pengganti URL jelek yang diberikan kepada Anda oleh penyedia CDN. Jadi, bukannya xyz.cdnprovider.com, CDN Anda dapat berupa cdn.yourdomain.com.

Baca panduan ini untuk mempelajari cara mengaturnya (dan semua yang perlu Anda ketahui tentang CDN secara umum).

Hal yang menarik tentang CDN gambar adalah mereka membantu mengotomatiskan proses pengoptimalan gambar. Ini adalah sesuatu yang Google rekomendasikan dan, jujur, jika Anda memiliki situs web yang besar, itu ide yang bagus.

Layanan semacam itu biasanya tidak gratis, tetapi dapat menghemat banyak waktu.
Jika Anda merasa bahwa artikel-artikel di blog ini bermanfaat, Anda bisa memberikan donasi melalui Paypal.

Diperbolehkan menyalin artikel diblog ini dengan syarat mencantumkan sumber link (teks langsung). Blog anda tidak akan dihapus , deindex , adsense tidak akan menerima keluhan hak cipta dari saya dsb
Buka Komentar
Tutup Komentar