Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. WordPress
Webdesign

Uji Kinerja: Tema WordPress Terlaris di ThemeForest

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Kinerja adalah salah satu aspek terpenting dari situs web manapun, namun terkadang hal tersebut jarang diperhatikan saat membeli tema WordPress. Dalam roundup ini kita akan mengambil tema terlaris di Themeforest, dalam bentuk penampilan, menjalankannya melalui beberapa tes kinerja dasar, dan memberi peringkat dari atas ke bawah.

Tema-tema yang Terpilih

Daftar tema WordPress ThemeForest yang terlaris diperbarui setiap minggu, namun Anda sering melihat pemain akrab memegang posisi teratas untuk beberapa lama. Kami telah mengambil sepuluh besar (terlihat di bawah) dan mengadu mereka satu sama lain dengan beberapa tes kinerja umum.

2017s Best Selling WordPress Themes - updated weekly
Tema WordPress Terlaris - diperbarui setiap minggu

Pengujian

Ada banyak alat yang tersedia untuk menguji situs web, kami telah memilih beberapa alat bantu klasik: Google Pagespeed Insights, Webpagetest.org, Pingdom, dan alat dev Chrome. Sebagian besar akan memberikan umpan balik tentang seberapa cepat halaman web dimuat, bobot keseluruhannya, seberapa efisien asetnya disalurkan, akhirnya memberikan semacam skor. Kami menjalankan demo setiap tema melalui alat ini dan menyusun angka-angka (lihat tabel di akhir posting).

Selain tes ini, kami menggunakan plugin Accessibility Audit untuk alat dev Chrome. Ini tidak berhubungan dengan kinerja seperti itu, namun hasilnya selalu memberi wawasan bagaimana tema dibangun.

Beberapa hal yang perlu diperhatikan:

  • Demo ini semua dipandu oleh pencipta tema individual. Spesifikasi hosting tidak semuanya sama.
  • Demo acak dipilih dimana beberapa pilihan tersedia. WooCommerce, BuddyPress, atau plugin lainnya dihindari bila memungkinkan. Tidak ada tema bias gambar terang-terangan (seperti portofolio foto) yang digunakan.
  • Semua URL diuji dari California, jika memungkinkan.
  • Hasil yang tepat mungkin berbeda dari hari ke hari.
  • Demo tema sering dibuat untuk membuat dampak visual, penuh dengan citra berkualitas tinggi dan fungsionalitas sebanyak mungkin. Ini berarti bahwa demo adalah jarang mencerminkan dengan akurat tentang bagaimana sebuah situs web terlihat dan berperilaku. Kemungkinan, dengan salinan Anda sendiri, sebaiknya Anda menilai kinerja semua demo ini.

Avada

Creative demo
Avada: demo Creative
  • Pagespeed insights mobile: 46%
  • Pagespeed insights desktop: 48%
  • Webpagetest.org: Nilai A, kecuali F besar pada kompresi gambar. AAAFA☑
  • Pingdom: 91% (grade A)
  • Pingdom load speed: 1.94 detik
  • Chrome dev tools page weight: 2.8Mb
  • Accessibility audit: 94% score (sangat baik). Atribut ARIA mengikuti praktek terbaik, elemen terstruktur dengan baik, tag meta yang digunakan dengan benar.

Gambar berat merupakan kontributor besar terhadap skor pagespeed insights yang rendah; 77,2% dari berat halaman dikaitkan dengan gambar. File-file seperti avada-creative-home1.jpg bisa telah berkurang dari 344,6 KB ke ~40 KB tanpa banyak usaha. Tentu adil mengatakan bahwa, dengan akal sehat, instalasi Avada Anda sendiri bisa dibuat lebih ringan dan lebih cepat. Baik untuk melihat bahwa Avada dibangun dengan aksesibilitas dalam pikiran.

The7

The7 Construction demo
The7: demo Construction
  • Pagespeed insights mobile: 64%
  • Pagespeed insights desktop: 91%
  • Webpagetest.org: A di seluruh papan. AAAAA☑
  • Pingdom: 68% (grade D)
  • Pingdom load speed: 1.51 detik
  • Chrome dev tools page weight: 1.3Mb
  • Accessibility audit: 83% score (tidak buruk). Beberapa elemen gambar kehilangan atribut alt, rasio kontras warna bisa lebih baik pada beberapa teks (relatif terhadap latar belakangnya). Tapi secara keseluruhan, elemen terstruktur dengan baik dan aksesibilitasnya solid.

Secara umum, beban demo ini cukup cepat; gambar dan asetnya tidak terlalu berat, dan halamannya bisa digunakan segera setelah dimuat. Namun nilai Pingdom-nya tidak optimal. Perbaikan dapat dilakukan dengan menggabungkan beberapa JavaScript, demikian pula CSS, sementara caching dapat dibuat lebih mudah dengan memaksa nomor versi pada nama file (misal: /assets/css/settings.css?ver=5.4.5.2).

BeTheme

BeTheme 3D demo
BeTheme: demo 3D
  • Pagespeed insights mobile: 76%
  • Pagespeed insights desktop: 87%
  • Webpagetest.org: Nilai A AAAAA☑
  • Pingdom: 98 (grade A)
  • Pingdom load speed: 1.27 detik
  • Chrome dev tools page weight: 1.8Mb
  • Accessibility audit: 80% Jatuh pada rasio kontras (ini adalah tema yang sangat gelap dan merenung), dan penggunaan peran ARIA yang tidak sempurna.

Tema ini memuat dengan sangat cepat. Banyak konten yang terlihat diprioritaskan dengan memasukkan gaya inline yang penting di head, dan sebagian besar yang dimuat di-minified dan digabungkan. Seperti yang sering terjadi, gambar menjadi perhitungan untuk bagian terbesar dari berat halaman (69,5%), jadi tidak akan sulit untuk mendapatkan beranda demo ini di bawah ambang batas emas 1Mb.

Impreza

Impreza Restaurant demo
Impreza: demo Restaurant
  • Pagespeed insights mobile: 63%
  • Pagespeed insights desktop: 68%
  • Webpagetest.org: FAABF☒
  • Pingdom: 80% (grade B)
  • Pingdom load speed: 2.34 detik
  • Chrome dev tools page weight: 2.5Mb
  • Accessibility audit: 94% (sangat baik). Atribut yang digunakan dengan benar pada elemen, termasuk peran ARIA. Nama elemen yang dapat dikenali dan konten yang dijelaskan dengan baik.

Sementara kecepatan muat demo restoran Impreza tidak buruk, skor kinerjanya terhalang oleh gambar yang melebihi dari 2MB. Yang juga diperhatikan adalah kurangnya CDN dan waktu respon server yang buruk; dua aspek yang spesifik untuk hosting demo ini dan yang dapat Anda perbaiki dengan mudah.

Enfold

Enfold Gym demo
Enfold: demo Gym
  • Pagespeed insights mobile: 60%
  • Pagespeed insights desktop: 60%
  • Webpagetest.org: AAADB☒
  • Pingdom: 70% (grade C)
  • Pingdom load speed: 2.79 detik
  • Chrome dev tools page weight: 5.2Mb
  • Accessibility audit: 89% Salah satu demo tema dengan nilai tertinggi untuk aksesibilitas, menunjukkan kekuatan yang mendasari dalam kualitas pembangunannya.

Sekali lagi, tidak ada CDN yang digunakan untuk hosting demo ini, yang kehilangan beberapa poin di webpagetest.org. Kurangnya HTTPS mungkin juga memberi Enfold tanda hitam. Seperti biasa, demo ini jatuh ke dalam perangkap sebagai visual yang semenakjubkan mungkin, mengorbankan bobot halaman untuk kualitas gambar. Pada 5Mb ini adalah kelas yang sangat berat, tapi ukuran gambar adalah sesuatu yang selalu mudah diatasi.

X

X Church demo
X: demo Church
  • Pagespeed insights mobile: 77%
  • Pagespeed insights desktop: 74%
  • Webpagetest.org: DFAAB☒
  • Pingdom: 87% (grade B)
  • Pingdom load speed: 2.45 detik
  • Chrome dev tools page weight: 2.1Mb
  • Accessibility audit: 91% Skor A11y yang sangat sehat, dikecewakan hanya oleh kurangnya atribut alt pada beberapa gambar, rasio kontras rendah di beberapa area (tema church ini cukup diredam) dan tidak adanya atribut title pada iframe. Namun, mengingat iframe itu berasal dari sematan YouTube, yang tidak disertai atribut title sebagai standar, kami akan memaafkan pengawasan tersebut.

Demo ini adalah salah satu dari sedikit pekerjaan yang wajar yang menjaga overhead gambar tetap seminimal mungkin; webpagetest memberikannya 97/100 solid untuk kompresi gambar. Sebaliknya, nilai rendahnya sebagian besar berasal dari hosting; tidak ada CDN, tidak ada HTTPS, waktu respons awal yang buruk, dan kurangnya "keep alive"–atau yang lebih dikenal dengan koneksi HTTP yang persisten, sesuatu yang dapat dengan mudah diaktifkan. Seperti sebelumnya, perbaikan mudah yang bisa dilakukan Anda sendiri agar berpengaruh.

Bridge

Bridge Spa demo
Bridge: demo Spa
  • Pagespeed insights mobile: 70%
  • Pagespeed insights desktop: 83%
  • Webpagetest.org: DAAAF☒
  • Pingdom: 85% (grade B)
  • Pingdom load speed: 2.12 detik
  • Chrome dev tools page weight: 1.6Mb
  • Accessibility audit: 91% (sangat baik). Poin kecil membawa skor keseluruhannya turun, namun atribut ARIA mengikuti praktik terbaik, dan elemen halaman memiliki nama yang jelas, menggambarkan isinya dengan baik, dan terstruktur dengan benar.

Salah satu demo yang lebih ringan di sini, tapi slider gambar selalu akan membuat halaman menjadi berat, bahkan dengan gambar yang dioptimalkan dengan baik seperti ini. Meminimalkan HTML dan aset lainnya akan membantu skor pagespeed insights, dan meningkatkan hosting akan mengagumkan–waktu respons server yang lebih baik, sebuah CDN, dan caching akan menjadi mudah diraih.

Flatsome

Flatsome Go Explore demo
Flatsome: demo Go Explore
  • Pagespeed insights mobile: 53%
  • Pagespeed insights desktop: 57%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 96% (grade A)
  • Pingdom load speed: 1.02 detik
  • Chrome dev tools page weight: 3.7Mb
  • Accessibility audit: 83% Poin hilang di A11y di depan dengan gagal memberi nama tombol dengan benar (tombol ikon wishlist WooCommerce tidak dapat dibaca dengan benar oleh screenreader) dan beberapa tautan sama-sama tidak jelas. Kontras rendah pada beberapa elemen dan duplikat ID elemen juga merupakan perbaikan yang mudah.

Tidak terlihat baik melalui mata oleh Pagespeed Insights, meski metrik penilaian lainnya sangat menyukai Flatsome! Penyedia hosting yang baik melayani halaman secara efisien (pencipta tema mencatatnya), aset diminimalkan, dan pemuatan gambar lazy loading membantu apa yang seharusnya menjadi beban halaman berat pertengahan secara progresif.

Jupiter

Jupiter Bellona template
Jupiter: template Bellona
  • Pagespeed insights mobile: 38%
  • Pagespeed insights desktop: 44%
  • Webpagetest.org: AAAFA☑
  • Pingdom: 92% (grade A)
  • Pingdom load speed: 1.07 detik
  • Chrome dev tools page weight: 3.3Mb
  • Accessibility audit: 91% (sangat baik). Karena sifat grafis yang terpengaruh (yang saya suka, omong-omong), teks pada beberapa gambar membuat rasio kontras lemah. Struktur halaman dan penggunaan elemen secara deskriptif, bersamaan dengan penggunaan ARIA yang tepat, semuanya menutupi kekurangan yang kontras.

Saya akan terdengar seperti rekaman yang rusak di sini, namun lima menit pengoptimalan gambar akan sangat mengurangi biaya overhead pada demo ini. home-bg-08.jpg saja beratnya hampir mencapai satu megabyte; menjalankannya melalui TinyPNG mencukur 87% langsung. Kenapa tidak? Karena Pingdom dan Webpagetest menyarankannya, sebagian besar aspek lainnya sangat bagus.

Newspaper

Newspaper Tech news
Newspaper: Tech news
  • Pagespeed insights mobile: 76%
  • Pagespeed insights desktop: 77%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 93% (grade A)
  • Pingdom load speed: 1.19 detik
  • Chrome dev tools page weight: 1.5Mb
  • Accessibility audit: 86% Skor bagus–dapat ditingkatkan dengan mendeskripsikan tautan dan tombol yang benar-benar digunakan untuk kontrol JavaScript, toggle dan sejenisnya.

Skor besar di seluruh papan, perbaikan standar berlaku (optimasi gambar, kompresi/rangkaian JS dan CSS) namun ingatlah bahwa demo ini juga dilengkapi dengan penarikan besar yang mempromosikan versi tema lainnya (menambahkan komplikasi yang mungkin tidak diperlukan pada versi Anda sendiri). Tanpa banyak usaha, demo ini bisa masuk ke kelas berat sub-1Mb.

Tabel Hasil

Mengingat semua peringatan yang telah kami sebutkan di sepanjang jalan, tabel ini menempatkan tema dalam beberapa jenis urutan. Peringkat Pingdom menyajikan skor putaran yang adil untuk hal-hal mendasar; Anda akan melihat berat halaman, kecepatan muat, dan bahkan nilai Pagespeed Insights jatuh ke dalam pola yang serupa (sampai tingkat tertentu).

Pagespeed Insights (rata-rata) Pingdom Kecepatan Pemuatan Berat Halaman
BeTheme 81,5% 98% 1,27 det
1,8Mb
Flatsome 55% 96% 1,02 det
3,7Mb
Newspaper 76,5% 93% 1,19 det 1,5Mb
Jupiter 41% 92% 1,07 det 3,3Mb
Avada 46,5% 91% 1,94 det 2,8Mb
X 75,5% 87% 2,45 det
2,1Mb
Bridge 76,5% 85% 2,12 det
1,6Mb
Impreza 65,5% 80% 2,34 det 2,5Mb
Enfold 60% 70% 2,79 det 5,2Mb
The7 78% 68% 1,51 det 1,3Mb

Cara Membuat Tema WordPress Anda Lebih Cepat

Setelah membeli tema WordPress, bagaimana Anda bisa mengoptimalkannya?

Ini tidak akan mengejutkan Anda: tindakan panggilan pertama yang mudah saat mengoptimalkan situs web Anda adalah gambar Anda. Hapus gambar yang tidak diinginkan, kompres yang tidak Anda butuhkan, simpan JPEG sebagai "progressive" (sehingga setidaknya ada sesuatu yang bisa dilihat saat sedang dimuat) dan Anda akan memulai dengan baik. Anda mungkin juga ingin menginstal plugin Lazy Loading untuk mengambil langkah lebih jauh. Kami telah melihat bahwa sangat sedikit dari demo ini yang memprioritaskan pengoptimalan gambar, tapi setidaknya Anda bisa memperbaiki skor mereka.

Mengenai skor Pagespeed Insights yang terkenal, Anda akan menyadari bahwa semua demo ini (kecuali satu) lebih baik untuk versi desktop daripada versi mobile mereka. Ini tidak lagi mencerminkan cara web digunakan, jadi jagalah Google (dan pengguna) tetap senang hati memberikan pertimbangan yang cermat terhadap kinerja mobile. Sikap mobile first juga akan membantu SEO Anda.

Bagaimana Anda bisa melakukan ini? Mengkombinasikan dan meminimalkan CSS dan JavaScript bisa menjadi sulit dengan WordPress; menggunakan plugin pihak ketiga berarti file bisa banyak dan Anda tidak akan memiliki banyak kendali atas mereka tanpa bantuan. Tetap saja, lakukan yang terbaik untuk menyertakan gaya "tampilan awal" yang penting berada inline di <head> dan membuat situs web Anda dapat digunakan secepat mungkin dengan mencegah skrip "render-blocking" memperlambat proses pemuatan. Jika slider di bagian atas beranda Anda mengharuskan keseluruhan halaman dimuat sebelum muncul, Google akan menghukum Anda.

Selain itu, pertimbangkan hosting Anda. Aktifkan kompresi GZIP. HTTPS juga tidak membahayakan. Gunakan layanan caching juga; menginstal dan mengkonfigurasi W3 Total Cache adalah permainan yang mudah. Gunakan CDN jika konten Anda ditujukan untuk khalayak luas. Terakhir, lihat tutorial dan kursus ini untuk rincian lebih lanjut dan bantuan mengenai hal ini:

Sumber Daya Kinerja WordPress

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.