Panduan Optimasi Page Speed Web 2018 (update)

ThinkWithGoogle DigitalPreneur

Langsung Baca Update Terbaru Step by Step Optimasi Page Speed untuk WordPress

Hal yang akan kami bahas saat ini adalah desain web yang dioptimalkan untuk mencapai page speed yang tinggi. Selain page speed, page load time juga diharapakan meningkat. Hasil akhirnya, pengunjung web Anda akan mendapatkan pengalaman yang baik karena tidak harus menunggu lama untuk mengakses seluruh konten dalam halaman web yang diakses. Apa itu page speed dan page load? Apakah perbedaan keduanya?

Page speed adalah waktu yang dibutuhkan untuk menampilkan seluruh web page (halaman web) atau konten web pada browser. Ketika Anda membuka sebuah halaman web, halaman web tersebut akan mendownload seluruh konten yang diminta dari server hosting. Selain, page speed, ada juga istilah page load time yang bermakna durasi antara men-klik tautan (link) dengan munculnya seluruh konten termasuk tulisan artikel pada web page yang diminta.

Haruskah Sebuah Website Memiliki Page Speed Cepat?

Pada umumnya, performa website menentukan ranking search engine. Semakin baik performa sebuah website makan semakin baik pula ranking search engine. Jika Anda memiliki ranking search engine yang baik, website Anda akan mudah ditemukan pada hasil daftar pencarian. Dengan demikian, semakin banyak orang yang mengunjungi website Anda. Hasil akhirnya, semakin besar pendapatan yang dapat Anda hasilkan.

Terdapat banyak faktor yang menentukan performa website. Salah satunya adalah page speed. Kecepatan page speed terbukti memengaruhi minat dari pengunjung website. 1 dari 4 pengunjung web memilih untuk mengurungkan niatnya jika harus menunggu lebih dari 4 detik. Bagi pemilik ecommerce (toko online) website, waktu page speed yang cepat akan memberikan mereka keuntungan yang besar.

Page speed lambat akan membuat ecommerce kehilangan banyak pelanggan. Memang, tidak setiap orang memiliki preferensi yang sama mengenai harus secepat apakah web page speed. Namun, terdapat kecenderungan yang sama, bahwa 2 detik adalah waktu page speed yang ideal. Dengan demikian, meningkatkan kecepatan page speed benar-benar sebuah keharusan jika Anda ingin mendapatkan hasil yang maksimal.

Apakah Kecepatan Website Berpengaruh Pada Kesuksesan Bisnis Anda?

Sektor bisnis ecommerce merupakan sektor bisnis yang cukup bergantung pada waktu page speed. Minat dan niat pengunjung dapat bergantung pada seberapa cepat mereka mendapakan informasi yang diinginkan. Selain itu, page speed berpengaruh pada peluang transaksi yang mungkin muncul. Itulah kenapa, web ecommerce dengan page speed desain yang baik merupakan sebuah keharusan.

Seperti sudah dibahas sebelumnya bahwa kecepatan mempengaruhi performa website. Performa website akan memengaruhi beragam hal. Berikut adalah 4 dampak performa web pada kesuksesn bisnis Anda.

Performa Website Memengaruhi Penjualan

Jika Anda hendak membeli produk di toko online, toko online mana yang dipilih, yang dapat diakses dengan cepat atau lemot? Tentu jawabannya adalah yang dapat diakses dengan cepat. Lambatnya akses tersebut akan membuat Anda kehilangan minat dan memilih membeli di toko yang lain. Memang, kualitas produk adalah pertimbangan utama seseorang membeli di sebuah toko atau penjual.

Meskipun begitu, cepat-lambat page speed akan memengaruhi impression atau kesan calon pembeli. Kesan positif dan negatif itulah yang akan memengaruhi pembeli secara psikologis. Jangan pernah meremehkan kesan pertama. Kesan pertama tersebut dapat menentukan seberapa baik persepsi yang mereka dapatkan dari Anda. Loyalitas konsumen merupakan hal yang akan terbangun dari kesan-kesan positif tersebut.

Performa Website Memengaruhi Perilaku Pengunjung

Page speed terbukti mampu memengaruhi perilaku calon pembeli. Kesan pertama yang buruk bukanlah satu-satunya dampak psikologis yang didapatkan calon konsumen ketika mereka mengakses website dengan page speed yang lamban. Kesan lain yang mereka dapatkan adalah berburuk sangka bahwa web Anda tidak kompeten dan tidak berkualitas. Persepsi tersebut dapat berujung pada perilaku merugikan yang tidak Anda inginkan.

Sebaliknya, page speed yang cepat dapat memberikan kesan baik, diantaranya rasa bahagia, peningkatan antusias, dll. Pada umunya, kesan yang didapatkan tersebut akan memengaruhi perasaan dan interaksi sosial. Bukan tidak mungkin mereka akan, baik disengaja atau tidak, menularkan antusiasme dan kesan mereka kepada orang lain. Tentu hal tersebut dapat Anda manfaatkan untuk mendapatkan keuntungan yang maksimal.

Performa Website Memengaruhi Biaya Operasi dan Pendapatan

Website dengan performa yang baik dapat mengurangi biaya operasi website. Prinsipnya, semakin lambat data yang ditampilkan pada calon pembeli maka semakin besar pula biaya perawatan dan kemungkinan pembelian hardware yang baru dan banyak. Tentu dalam hal pendapatan, web dengan page speed desain yang baik akan meningkatkan penjualan yang secara otomatis akan meningkatkan pendapatan.

Dengan demikian, performa website yang baik akan berhasil mengoptimalkan bisnis Anda. Di satu sisi biaya operasional akan berkurang. Di sisi lain, pendapatan akan meningkat. Kedua hal tersebut merupakan pencapaian yang menggembirakan bagi setiap pebisnis ecommerce. Jika Anda mendapatkan budget ekstra dari berkurangnya biaya operasional, Anda dapat menggunakannya untuk pemasaran melalui pembuatan iklan.

Performa Website Memengaruhi Kegunaan Website

Setiap pengunjung website memiliki ekspektasi masing-masing mengenai bagaimana sebuah website digunakan. Performa website yang baik, termasuk di dalamnya page speed yang cepat akan memengaruhi bagaimana mereka mengakses informasi atau konten yang dipublikasikan. Berikut adalah beberapa ekspektasi publik yang harus dipenuhi untuk mendapatkan kesan yang baik dan loyalitas publik.

  1. Website harus mudah digunakan, cepat memberikan informasi, dan mudah dimengerti.
  2. Memberikan produk/konten yang berkualitas dan relevan terhadap keinginan konsumen.
  3. Dapat diakses dengan baik di beragam perangkat dan memberikan kontrol penuh bagi pengunjung.

Kesalahan-kesalahan yang Berdampak pada Buruknya Performa Website

Kesalahan adalah hal yang wajar terjadi. Namun jika kesalahan yang dilakukan kadang diabaikan, diremehkan, bahkan tidak disadari maka hal tersebut diluar kewajaran. Dalam upaya untuk meningkatkan performa website, kesalahan-kesalahan yang kecil sekalipun dapat memengaruhi kualitas performa website. Menghindari dan mengantisipasi kesalahan merupakan hal yang wajib dilakukan.

Perlu diingat, kompetisi ecommerce merupakan kompetisi yang semakin kompetitif. Peningkatan performa melalui page speed desain yang baik akan menentukan kesuksesan Anda. Dalam persaingan bisnis, mereka yang sukses bukan hanya mereka yang mampu menampilkan kualitas terbaik tetapi juga mereka yang tidak melakukan kesalahan sekecil apapun. Berikut adalah 5 kesalahan yang biasa dilakukan oleh banyak pemilik website.

Menggunakan Hosting yang Kurang Berkualitas

Berinvestasi dengan cara memilih web hosting yang berkualitas merupakan salah satu investasi terbaik yang harus Anda lakukan. Web hosting yang berkualitas dan cepat tentunya akan meningkatkan performa web Anda. Jadi, jangan ragu untuk mengeluarkan biaya lebih demi mendapatkan hosting yang berkualitas premium.

Menggunakan Banyak Plugin

Penggunaan plugin yang esensial dan memberikan manfaat yang krusial bagi performa web merupakan keharusan. Meskipun demikian, tidak sedikit orang menginstal plugin yang sama sekali tidak dibutuhkan atau memberikan dampak yang tidak signifikan. Rapikan website Anda dari plugin-plugin tidak berguna tersebut.

Memasang Banyak Iklan

Mendapatkan keuntungan dari iklan memang hal yang sangat menggoda. Namun, Anda harus mempertimbangkan jumlah iklan dengan baik. Iklan terbukti dapat memperlambat performa website. Ingat, potensi keuntungan yang akan Anda dapatkan dari produk yang dijual tidak sebanding dengan keuntungan dari iklan.

Desain yang Buruk

Organisir konten yang ada pada website Anda dengan baik. Buat desain yang menempatkan beragam konten, termasuk konten multimedia pada posisi atau letak yang tepat. Buruknya desain, penempatan, dan ukuran konten yang tidak tepat akan berdampak pada lambannya performa website Anda. Ada baiknya jika Anda mempertimbangkan untuk menggunakan jasa Desain Web yang menerapkan teknik On-Page SEO di dalam strukturnya. Karena page speed website adalah bagian dari teknik tersebut.

Belum Mobile Friendly

Potensi transaksi jual beli pengguna internet melalui perangkat mobile (smartphone) sangat besar. Sebuah kesalahan besar jika Anda membuat website dimana desainnya tidak dioptimalkan untuk pengguna smartphone. Dengan demikian, buat desain website Anda agar mobile friendly untuk menangkap potensi transaksi tersebut.

Tips Meningkatkan Kecepatan Page Speed

Terdapat banyak cara untuk meningkatkan kecepatan page. Teknik dari cara-cara tersebut bervariasi, dari mulai menggunakan plugin, coding, melakukan beragam optimization, hingga mengganti hosting. Berikut adalah beberapa tips yang bersumber pada artikel berjudul “A Beginner’s Guide to Website Speed Optimization” yang dipublikasikan di kinsta.com.

Hanya Menggunakan Plugin Berkualitas

Penggunaan plugin yang terlalu banyak sangat berdampak buruk pada performa website. Kesalahan yang banyak dilakukan dalam penggunaan plugin adalah menggunakan plugin untuk setiap fungsi tambahan yang diinginkan. Akibatnya, plugin yang diinstal akan menjadi sangat banyak. Untuk menghindari hal tersebut, Anda harus selektif ketika memilih plugin. Gunakan New Relic dan Query Monitor untuk mengukur dampak dan performa plugin.

Gunakan Web Hosting yang Tepat

Web hosting memegang peranan yang krusial dalam menentukan performa website. Menggunakan web hosting yang cepat bukan hanya meningkatkan kecepatan tetapi meningkatkan performa secara umum. Anda dianjurkan menggunakan managed hosting. Managed hosting sangat cocok bagi website owner yang ingin mendapatkan biaya yang pantas dengan pelayanan yang pantas dan performa yang maksimal.

Lakukan Minification

Minification dilakukan untuk mengurangi network latency, mengurangi permintaan HTML, meningkatkan kualitas compression, meningkatkan eksekusi download dan browsing, dan tentu saja meningkatkan page speed. Anda dapat melakukan minification pada JavaScript, CSS, dan HTML. Namun berhati-hati dalam memilih apa saja yang akan dijadikan “mini”. Hanya lakukan minifikasi pada seluruh elemen yang non-esensial.

Lakukan Compression

Compression wajib Anda lakukan untuk merealisasikan website dengan page speed desain yang baik. Anda dapat melakukan compression melalui GZIP compression. Namun, tidak semuanya dapat dikompres. Jangan men-compress gambar, PDF, dan binari data lain. Selain itu, jangan juga menkompress konten untuk browser yang lama. Anda bisa mendapatkan GZIP melalui W3 Total Cache Plugin.

Maksimalkan Cache

Untuk memaksimalkan dan mengoptimalkan cache, Anda dapat menggunakan beberapa plugin atau add-on, diantaranya W3 Total Cache, Cache Enabler, WP Rocket, dan FastCGI Cache. Selain itu, Anda juga bisa menggunakan layanan cache extension, yaitu CDN (Content Delivery Networks). CDN akan memberikan Anda beragam keuntungan, diantaranya dan yang utama peningkatan kecepatan dan performa website.


(UPDATED) Step by Step Optimasi Page Speed Untuk WordPress

Seperti yang dijanjikan di status fb Saya tempo hari, maka lewat postingan ini Saya akan membuat tutorial (step by step) meningkatkan performa page speed wordpress dengan cara yang mudah.

Ok biar tidak berlama-lama, langsung saja kita mulai bahasan ini. Di cara ini Saya juga menggunakan beberapa teknik yang Saya dapat dari hasil browsing. Setelah Saya uji coba dari beberapa cara tersebut, akhirnya Saya menemukan cara yang Saya anggap paling mudah. Dan ini yang akan Saya share ke Anda.

Cara Mengecek Page Speed Website Anda

  • Google Page Speed Insight

PageSpeed Insight digunakan untuk mengukur performa suatu halaman, baik dalam versi mobile maupun versi desktop. Hasil dari tools ini berupa PageSpeed Score yang mempunyai rentang dari 0 sampai 100. Jika score website Anda mencapai 85, itu sudah cukup baik. Tidak perlu terobsesi untuk mengejar score sempurna, dengan mengorbankan fungsi penting dalam website Anda, seperti javascript. Berikut penampakan hasil Page Speed Insight website ini.

Google PageSpeed Insight Score DigitalPreneur

  • Pingdom Tools

Pingdom Tools merupakan tools berbasis web yang digunakan untuk menganalisa website Anda dari ujung rambut sampai ujung kakinya. Mulai dari ukuran file, load times, CSS, HTML, Javascript dan file-file lain yang terhubung ke web Anda. Poin score dari tools ini antara 0 sampai 100, semakin tinggi scorenya semakin bagus. Dibawah ini adalah hasil pengecekan web DigitalPreneur.co.id dengan menggunakan Tool dari Pingdom.

  • Test My Site ThinkWithGoogle

Merupakan tools dari Google yang digunakan untuk mengukur kecepatan dan performa mobile web Anda dengan menggunakan jaringan 3G. Tools ini menjadi alat andalan Google berdampingan dengan Google Page Speed Insight. Berbeda dengan Google Page Speed Insight yang berfokus pada performa versi mobile maupun desktop, ThinkWithGoogle memposisikan dirinya sebagai alat pengukur kecepatan mobile web Anda. Untuk scoringnya, 3 detik tergolong sempurna (excellent). Ini Saya berikan screenshot website DigitalPreneur.co.id.

ThinkWithGoogle DigitalPreneur

  • GTMetrix

Adalah tools populer yang sering digunakan oleh para web developer untuk mengukur kecepatan dan performa website Anda. Hasil dari alat ini adalah perpaduan score antara Google Page Speed Insight dan YSlow. Dibawah ini Saya lampirkan hasil GTMetrix dari DigitalPreneur.co.id.

Bagaimana Cara Meningkatkan Page Speed ?

Ini adalah pertanyaan umum yang sering diungkapkan oleh banyak web developer, termasuk Saya sendiri. Banyak faktor yang menentukan hal diatas dapat terjadi. Tapi agar dapat mudah kita pahami, kita bagi solusinya menjadi 4 hal:
  • Hosting

Hosting adalah penentu utama masalah kecepatan website ada. Sebelum Anda memutuskan membeli hosting, sebaiknya Anda tentukan dulu target market negara Anda. Jika Anda ingin membuat toko online untuk pasar Indonesia, maka jangan membeli hosting yang ber-server di US. Karena pengunjung web Anda yang berasal dari Indonesia akan lebih lamban untuk membuka web Anda.
Saran Saya untuk pasar Indonesia, pilih hosting yang memiliki basis server di Indonesia. Ya, paling jauh Singapura lah… Sesuai pengalaman Saya biasanya antara server ID dan US memiliki jeda waktu 1-4 detik. Belum lagi ditambah kecepatan koneksi internet di Indonesia belum baik secara merata.
Saya mencari banyak referensi, hosting apa yang bagus untuk SEO? Dari referensi-referensi tersebut Saya simpulkan ada 3 hosting yang memenuhi standar kualitas dan harga yang terjangkau
  1. Kinsta –  menyediakan layanan managed wordpress hosting, dari kata “managed” yang tertera disitu. Kemungkinan besar dia menyetarakan layanannya dengan VPS. Atau bisa jadi juga shared hosting premium. Saya hanya bisa mengira-ngira saja, karena Saya tidak membeli layanan disana dengan alasan harganya yang mahal (jujur). Tapi Saya tertarik dengan penawarannya, yang berfokus pada kecepatan dan kestabilan server. Jika Anda sudah pernah mencobanya, boleh lah di share sedikit di kolom komentar pengalaman menggunakan hosting disana.
  2. Siteground  – juga salah satu hosting yang paling banyak direkomendasikan oleh para konsultan SEO dunia. Alhasil, hati Saya pun kepincut dan langsung membeli hosting tersebut untuk membuktikannya. Untuk harga, masih masuk akal lah. Ga terlalu mahal, sekitar $70 per tahun. Tapi sayangnya, untuk membelinya harus menggunakan kartu kredit dan langsung di charge untuk setahun. Saya memilih server Singapura, karena target user Saya adalah Indonesia. Jadi lebih dekat, dibandingkan dari US atau Europe.  Untuk kecepatan Saya sangat puas, dan contohnya adalah web DigitalPreneur.co.id. Apakah Anda merasa web Saya cepat untuk diakses?
  3. Jagoanhosting – hosting asli dari Indonesia, dengan pilihan server Singapura dan Indonesia. Jujur, Saya sangat tertarik dengan penawarannya. Disana tertulis, hosting memiliki aplikasi Web Accelerator dari BEON yang dapat melakukan kompress ukuran file secara otomatis di websitemu. Untuk membuktikannya, akhirnya Saya membeli layanan shared hosting tersebut dengan memilih server Indonesia. Hasilnya? wow ternyata janji di penawarannya, benar-benar dibuktikan dengan akses yang cepat.
Berikut data kecepatan siteground hosting dan jagoanhosting:
kecepatan server siteground
kecepatan server siteground
kecepatan server jagoanhosting
kecepatan server jagoanhosting

 

Dari gambar diatas terlihat bahwa kedua hosting sangat cepat diakses melalui singapura dibandingkan dari Eropa ataupun Amerika. Karena server speed test tidak ada yang mengambil contoh akses dari Indonesia maka kita ambil contoh dari Singapura. Ya paling perbedaannya hanya beberapa milisecond saja.
Sekarang kita coba amati tabel diatas, Connect dan TTFB. Sudah ketemu? Oke, dibawah ini Saya beri keterangan definisinya.
2 hal tersebut adalah sumber lambannya kecepatan web kita. Gampangnya, kalau keduanya berwarna hijau berarti itu sangat cepat ketika diakses di negara tersebut.
Berarti tinggal ganti hosting masalah selesai? Belum tentu, masih ada hal lain lagi yang belum dibahas.

Themes dan Page Builder

Banyak developer themes dan page builder yang berlomba-lomba dalam hal page speed. Tapi disini Saya merekomendasikan hanya yang terbaik saja.
  1. Astra themes + elementor pro
  2. Landingpress
Dan di web ini Saya menggunakan Landingpress. Mengapa Saya menggunakan Landingpress?
  1. Landingpress adalah karya anak bangsa
  2. Apalah arti nasionalisme tanpa mengedepankan kualitas. Silahkan cek web ini https://digitalpreneur.co.id di berbagai page speed tools: GTmetrix, Pingdom Tools, Google Pagespeed Insight, Thinkwithgoogle. Bagaimana hasilnya?
  3. Support yang jempolan, pembeli tidak dilepas sendiri mengatasi masalahnya. Tinggal hubungi support, pasti akan dibantu.

Image Compression

Banyak plugin yang menawarkan fitur image compression, tapi disini Saya lebih menyarankan Imagify. Tinggal cari plugin ini di wordpress lalu install. Imagify menyediakan versi free dan berbayar. Kelebihan plugin ini selain murah adalah mampu meng-kompres size gambar menjadi ringan dengan hasil resolusi gambar yang masih baik.

Cache dan Gzip Compression

Caching plugin yang Saya gunakan adalah WP-Rocket. Ini adalah plugin berbayar dengan fitur-fitur yang berfungsi meningkatkan performa website Anda. Mengapa Saya memilih WP-Rocket? Karena plugin ini tidak hanya memiliki fungsi cache tetapi juga mendukung Gzip Compression secara otomatis tanpa harus men-setting-nya. Anda bisa mengecek apakah Gzip Compression sudah berjalan di website Anda dengan alat Check Gzip Compression.

Gzip Compression

Dibawah ini Saya berikan screenshot, bagaimana cara setting WP-Rocket seperti di web ini.

wp rocket file optimization

wp rocket css file

wp rocket javascript file

javascript defer

lazyload

emoji

preload

preload bot

 

Eliminate Render-blocking JavaScript and CSS in Above-the-fold

Untuk mengatasi masalah ini, Saya akan melakukan defer JavaScript. Anda tidak perlu bingung, silahkan download lalu aktifkan plugin Async JavaScript. Anda bisa melihat contoh hasil setting di website Saya.

Hapus Google Fonts

Ditahap ini Saya akan mencoba untuk menghapus Google Font bawaan dari theme. Download dan aktifkan Disable Google Fonts dari WordPress Anda. Sisipkan kode dibawah ke dalam Footer.php, taruh sebelum </body> tag.

<link href=”https://fonts.googleapis.com/css?family=Libre+Franklin:300,300i,400,400i,600,600i,800,800i” rel=”stylesheet”>

Google Font code

Resiko dari melakukan hal ini adalah FOUT. Tapi ini juga solusi dari masalah render-blocking pada Google PageSpeed Insight.

Optimasi CSS dan Minify JavaScript

Untuk mengoptimasi kedua hal diatas Saya menggunakan plugin Autoptimize. Ini adalah plugin gratis, Anda bisa mengunduhnya di WordPress. Anda bisa melihat cara setting-nya melalui gambar yang Saya berikan dibawah.

Setelah Anda mempraktekkan teknik yang Saya berikan, pesan Saya hanya satu. Jangan terlalu terobsesi untuk mengejar Page Speed Score sempurna, tetapi justru mengabaikan kualitas konten dari website Anda. Apalah arti Page Speed Score sempurna jika pengunjung Anda kecewa terhadap konten web Anda, begitupun sebaliknya.

Jangan korbankan fitur penting di website Anda demi mencapai performa score yang tinggi. Contohnya seperti YSlow GTMetrix website Saya yang tidak maksimal karena Saya lebih mementingkan script Google Analytic dan Facebook Pixel tertanam di dalam website Saya.

Note: Jika Anda memiliki teknik lain, Saya persilahkan untuk komen di bawah. Agar Saya bisa ikut mencoba teknik tersebut dan meng-update-nya di tulisan ini.

Jika Anda merasa sulit menjalankan teknik ini, jangan khawatir karena DigitalPreneur.co.id memberikan layanan jasa optimasi Page Speed untuk website WordPress Anda. Kami berikan garansi 100% uang kembali jika Kami tidak sanggup menaikkan Page Speed Anda.

 

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Butuh Bantuan? Klik Disini