Loading webmu Lemot? begini cara Mempercepatnya

0

Guru SEO – Sehari sebelumnya, seorang teman saya mengeluhkan kenapa websitenya lambat sekali terbuka, loading lemot khussusnya dibagian homepage. Setelah saya check di web gtmtrix.com, benar saja, web teman ane itu memiliki score E dan F.

Dan mulailah ane coba bantu memperbaiki webnya.

Dan hasilnya..
Alhamdulillah, dari score F & E menjadi A & B untuk website yang sama dengan themes yg sama tanpa menghapus tampilan utamanya spt slide, dll seperti gambar yang tertampil di atas. Jadi tetap cakep dan wuzz..wuzz

Rahasia Mempercepat Loading Website

Trus bagaimana sih rahasia cara mempercepat loading website kita yang lemot?

Ada 3 saja sih intinya :

  1. Buang elemen yang ga penting
    Saya encoba menghapus element yang dirasa emang ga penting untuk di tampilkan di homepage daari tampilan bawaan demo themesnya seperti kolom testimoni yang berukuran besar. bahkan beberapa themes lain mempunyai gmaps yang berukuran super gede full di footernya.
  2. Menggunakan Plugin WP Rocket
    Menggunakan Plugin WP Rocket
    Menggunakan Plugin WP Rocket

    Beberapa settingan yang saya lakukan dengan plugin wp rocket yakni :
    ceklist settingan :
    > lazy load image
    > lazy load iframe & videos
    > Files optimisation: html
    > Files optimisation: google fonts
    > Files optimisation: inline css
    > Files optimisation: : inline JS
    > Enable caching for WordPress feeds.

    settingan wp rocket ala firmahn
    settingan wp rocket ala firmahn

    dah itu aja cukup, yang kotak CSS dan JS setelah google font alternatif aja. Ohya,  ceklist juga Activate preload bot manual dan automatic nya.

  3. Bermain di Photoshop
    Ada 2 hal yang dilakukan disini yakni mengubah uuran gambar sesuai settingan thumbnail (biar ga mubadzir membebankan loading web) dan mengkompres quality gambarnya dengan ukuran dimensi yang sama.Sesuaikan ukuran dimensi gambar yang tampil di homapage dan kompres lagi dgn photoshop.

    contoh website yang menampilkan logo klien di homepage
    contoh website yang menampilkan logo klien di homepage

    Misal, di homepage ada themes yang menampilkan slide beberapa logo kliennya. Nah, jangan upload ukuran logo sebenarnya meskipun otomatis themesnya langsung menyesuaikan thumbnal ukuran logo tersebut tanpa terpotong.

    Kenapa?
    Walaupun kita upload logo ukuran 600 x 800 pixel dengan size misalnya 1mb,
    memang tampilan yang kita lihat berukuran dimensi kecil misalnya menjadi 150 x 200 pixel, tapi tetap saja browser kita akan meloading file 1mb tadi.

    Alangkah lebih bagusnya, kita resize terlebih dahulu logo tersebut di photoshop menjadi dimensi 150 x 200 pixel, otomatis seizenya akan berkurang misalnya 500kb, barulah di upload ulang logonya. Hal ini utk mengurangi waktu loading web sehingga yang di load bukan gambar ukuran gede, melainkan gambar yang emang sudah di ubah seukuran thumbnailnya. dibikin pas ajah. ūüėÄ

    satu lagi trik terkait gambar..
    jika itu gambar jpg, di photoshop ada fitur “save for web” dari menu File.

    nah, klik menu tersebut, dan selain ubah ukuran dimensi panjang dan lebar tadi,,,
    ubah jg quality gambarnya dari maximum menjadi high atau bhkan medium.

    cara mengkompres gambar di photoshop
    cara mengkompres gambar di photoshop

    Ingat ini cuma untuk dipasang ke website, ga perlu besar kali kualitasnya karena emang bukan untuk kita cetak. Asal gambar tetap cantik dan ga pecah cukup.

    Trik ini jg bisa kita lakukan untuk mengkompres gambar slide gede yang tampil di homepage, compress aja qualitinya tanpa mengubah ukuran dimensi panjang x lebarnya 🙂Sebagai perbandingan di bawah ini, gambar A memiliki dimensi 3264 x 4928 pixel dengan size sebesar 2,94 Mb sementara file B memiliki dimensi yang sama¬†3264 x 4928 pixel namun sizenya sudah berkurang menjadi 314 Kb saja.

    perbandingan gambar setelah di kompres dengan dimensi yang sama
    perbandingan gambar setelah di kompres dengan dimensi yang sama

    Dah ini aja sih tips rahasia memepercepat loading website, insyaAllah wuz..wuz..

Selamat mencoba dna semoga bermanfaat sob.. ^-^

ps :
Beberapa tutorial tambahan terkait plugin wp rocket 
Documentation :
http://docs.wp-rocket.me/

settingan tambahan bagi hostingnya yg udah menggunakan Nginx biar smakin joss :
http://github.com/maximejobin/rocket-nginx

Tutorial resmi tambahan lainnya (advanced)
– CSS and JS Minification/Concatenation
https://www.youtube.com/watch?v=kymoxCwW03c

– Prefetching DNS requests with WP Rocket
https://www.youtube.com/watch?v=jKMU6HgMMrA

Leave A Reply

Your email address will not be published.