7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS

Optimalkan Situs Anda Tanpa AMP: Daftar Periksa Optimal

Read Time: 7 mins

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Bila Anda ingin mengoptimalkan kinerja sebuah situs web secara manual, tanpa menggunakan pendekatan siap pakai seperti AMP, apa langkah-langkah kunci yang perlu Anda ambil?

Dalam video ini dari kursus saya Optimalkan Situs Anda Tanpa AMP, Anda akan menemukan daftar periksa sederhana yang dapat Anda gunakan untuk memastikan situs Anda dimuat secepat mungkin dengan AMP, jika tidak lebih cepat.

Optimalkan Situs Anda Tanpa AMP: Daftar Periksa Optimal

Daftar Periksa Pengoptimalan

Berikut adalah daftar periksa pengoptimalan dasar yang akan kami gunakan:

  • Sebaiknya muat secepat mungkin-atau lebih cepat dari versi AMP dari situs yang sama.
  • Muat font web sedini mungkin untuk membuat mereka masuk
  • Efisien, ukuran kecil CSS dimuat inline di bagian head.
  • Menulis CSS file eksternal untuk pengembangan lebih praktis.
  • Kombinasikan dan minikan JavaScript.
  • Siapkan proses pembuatan untuk membuat dua hal di atas terjadi (kami akan menggunakan Gulp).
  • Gunakan hanya JavaScript async.
  • Menunda JavaScript sehingga tidak memblokir rendering (jalankan JS pada waktu yang tepat).
  • Vanilla JS jadi tidak ada dependensi JS untuk meminimalkan jumlah kode yang akan dimuat.
  • Lebih suka JS sederhana.
  • Buat tidak ada fallback JS sedapat mungkin.
  • Gunakan lazy loading pada gambar dan iframe (video dll.).
  • Cegah reflow untuk menghindari perhitungan ulang tata letak.

Seperti yang dapat Anda lihat, daftar periksa ini adalah tugas bagian yang perlu kita selesaikan, itu adalah prinsip bagian yang harus kita ikuti, dan ini juga merupakan bagian tujuan yang ingin kita capai. Mari kita lihat masing-masing secara lebih rinci.

Sebaiknya muat secepat mungkin-atau lebih cepat dari versi AMP dari situs yang sama.

Hal pertama dalam daftar kami adalah sebuah tujuan, dan kami ingin situs kami memuat secepat atau lebih cepat daripada versi AMP dari situs yang sama. Sebaiknya Anda terus mengecek waktu muat Anda saat mengikuti proses pengembangan Anda, jadi itulah yang akan kami lakukan saat mengerjakan semuanya.

Muat Font Web sedini mungkin

Sekarang mari kita masuk ke hal-hal teknis yang perlu kita lakukan. Pertimbangan pertama adalah kita ingin mendapatkan font web yang akan kita gunakan dimuat secepat mungkin.

Font web sering merupakan file yang relatif besar, dan Anda tidak dapat menampilkan konten Anda dengan benar sampai font web tersebut dimuat. Jadi kita akan memastikan bahwa kita mendapatkan font web yang dimuat sangat awal dalam gambar, mungkin sebagai hal pertama yang mulai dimuat.

CSS yang Efisien dimuat Inline di Bagian Head

Hal berikutnya yang akan kita lakukan adalah memastikan bahwa CSS kita sangat efisien dan sangat kecil ukurannya.

Terkadang Anda bisa tergoda untuk mengambil jalan pintas dan menyertakan library CSS yang besar ke dalam situs Anda untuk membantu mempercepat proses pengembangan, walaupun sebagian besar CSS itu tidak diperlukan.

Melontarkan file CSS yang besar mungkin membantu mempercepat pengembangan Anda, namun mungkin akan memperlambat situs Anda dan mengurangi kinerja situs Anda di mesin telusur. Saya mengatakan bahwa karena load speed sekarang menjadi faktor peringkat. Jadi penting bagi CSS Anda untuk menjadi sekecil dan sehemat mungkin.

Anda juga akan mengambil CSS itu dan memasukkannya ke bagian head situs. Ini adalah teknik yang digunakan AMP, dan ini adalah teknik optimasi yang hebat. Jadi itu adalah salah satu yang pasti akan kita pegang dengan proses pengoptimalan kita sendiri.

Tuliskan CSS di File Eksternal

Meskipun CSS kita akan menjadi inline di bagian head, kita masih ingin mengerjakan CSS kita di file terpisah. Mencoba menulis CSS langsung ke bagian head file HTML sebenarnya tidak terlalu praktis. Jadi kita akan menyiapkan semuanya agar kita bisa mengerjakan file CSS kita secara eksternal, dan kemudian memilikinya di file HTML nanti, jadi kita mendapatkan yang terbaik dari keduanya.

Kombinasikan dan Minikan JavaScript

Hal berikutnya yang akan kita lakukan adalah memastikan bahwa setidak-tidaknya JavaScript yang kita gunakan digabungkan dan diminimalkan.

Salah satu kelemahan bekerja dengan AMP adalah Anda memiliki beberapa file JavaScript yang harus Anda bawa, dan masing-masing harus disertakan secara terpisah. Tapi semaksimal mungkin, kami akan mengambil JavaScript kami dan menggabungkannya ke dalam satu file, sehingga kami memiliki jumlah minimum permintaan browser yang absolut.

Mempersiapkan Proses Build

Untuk membuat kedua hal itu terjadi—mengerjakan CSS secara eksternal dan menggabungkan dan meminimalkan JavaScript—kami akan menyiapkan proses pembuatan yang akan membuat kedua hal ini terjadi secara otomatis.

Kami akan menggunakan Gulp untuk melakukan itu. Itu berarti Anda harus menginstal Node di sistem Anda, dan Anda juga perlu mencoba-coba sedikit menggunakan terminal. Tapi selama kursus saya akan mengarahkan Anda melalui apa yang harus dilakukan, bahkan jika Anda belum bekerja dengan terminal, Anda seharusnya baik-baik saja.

Gunakan hanya Async JavaScript

Selanjutnya ialah kita hanya akan menggunakan async (asynchronous) JavaScript. Apa artinya ini ialah bahwa cara kita memuat JavaScript kita tidak akan mencegah hal lain pada halaman loading pada saat bersamaan.

Menunda JavaScript

Hal lain yang akan kita lakukan dengan JavaScript kita adalah kita akan menundanya. Itu berarti bahwa kita akan mendorong JavaScript kita sampai akhir proses rendering. Kami akan memastikan semua yang ada di situs kami terisi penuh sebelum kami melakukan apapun dengan JavaScript sama sekali.

Vanilla JavaScript Saja

Kami juga akan memastikan bahwa setiap bit JavaScript yang kami gunakan adalah JavaScript vanila, dan kami melakukan ini untuk memastikan bahwa kami tidak memiliki dependensi. Jika kita menggunakan, katakanlah, lightbox yang bergantung pada jQuery, sekarang kita harus memuat jQuery ke situs kita, dan itu lebih banyak ukuran file dan lebih banyak pemrosesan agar browser bisa menangani.

Seringkali tidak perlu menggunakan beberapa pustaka JavaScript. Anda sering dapat mencapai fungsi yang Anda inginkan sama baiknya dengan JavaScript vanilla.

JavaScript yang lebih sederhana

Kami juga akan memilih JavaScript yang sederhana. Jadi kita akan mencoba untuk menjaga ukuran file JavaScript kita sampai minimum absolut. Kami tidak ingin banyak lonceng dan peluit; kami ingin menjaga segala sesuatunya seketat dan seefisien mungkin.

Buat No-JavaScript Fallbacks

Dan poin terakhir pada JavaScript adalah kami ingin memastikan bahwa sampai tingkat terbaik, kami melayani orang-orang yang menonaktifkan JavaScript.

Dengan versi AMP dari situs yang akan kami ciptakan, jika kami menonaktifkan JavaScript, Anda dapat melihat bahwa kami tidak memiliki banyak konten untuk dilihat.

AMP site cover imageAMP site cover imageAMP site cover image
AMP site with messages about lack of JSAMP site with messages about lack of JSAMP site with messages about lack of JS

Ada sedikit lagi yang bisa kita lakukan dengan situs ini untuk membuatnya sedikit lebih ramah lingkungan. Tapi untuk sebagian besar, AMP sepenuhnya bergantung pada JavaScript untuk memberi Anda jenis konten sama sekali.

Dengan versi non-AMP kami, kami masih memiliki tampilan latar belakang yang bagus, dan sebenarnya kami juga memasukkan beberapa fallback untuk ikon font di sini juga, karena sering kali orang-orang yang memblokir font blok JavaScript juga.

No AMP siteNo AMP siteNo AMP site

Kami memiliki pesan yang memungkinkan orang tahu mengapa video YouTube tidak dapat muncul, dan hal yang sama di bawah tempat CodePen kami berada.

Message explaining lack of YouTube videoMessage explaining lack of YouTube videoMessage explaining lack of YouTube video

Galeri kami masih menunjukkan hal yang sama, dan kemudian turun di bagian bawah, kami hanya memiliki versi teks tweet kami yang menunjukkan sebagai fallback jika tidak ada JavaScript.

Lightbox gallery with no JavaScriptLightbox gallery with no JavaScriptLightbox gallery with no JavaScript

Gunakan Lazy Loading

Kita juga akan memastikan kita menggunakan lazy loading pada kedua gambar dan iframe. Jika Anda memiliki situs yang cukup panjang, orang tersebut biasanya akan melihat apa yang ada di bagian atas situs web itu terlebih dulu, dan kemudian mereka akan scroll ke bawah dan melihat konten lainnya.

Tapi Anda tidak ingin membuat mereka menunggu konten lainnya dimuat sebelum mereka dapat mulai melihat apa yang ada di bagian atas konten. Jadi, dengan lazy loading, Anda hanya memuat apa yang ada di urutan teratas, dan kemudian Anda secara bertahap memuat sisa konten saat orang tersebut scroll ke bawah.

Mencegah Reflow

Akhirnya, kita juga akan memastikan bahwa kita mencegah reflow. Sesuatu yang sering Anda lihat, terutama di ponsel, adalah elemen yang lebih lambat dimuat, seperti gambar misalnya, tata letak halaman lainnya harus menyesuaikan diri dengan gambar yang baru dimuat.

Ini buruk karena beberapa alasan:

  1. Ini benar-benar menjengkelkan bagi pengguna. Mereka akan mencari di satu tempat, dan kemudian seluruh tata letak berubah, dan mereka kehilangan teks yang mereka baca, dan mereka harus menemukannya lagi. Kemudian reflows kembali, dan seluruh pengalaman itu sangat buruk.
  2. Salah satu hal termahal yang harus dilakukan browser adalah menghitung tata letak, dan Anda ingin memastikan bahwa peramban hanya harus menghitung tata letak sekali. Jadi sebelum gambar Anda dimuat, Anda ingin memastikan bahwa Anda telah mengalokasikan ruang yang benar untuk gambar itu. Jadi tata letak pertama yang memuat adalah tata letak yang benar.

Lihat Kursus Full

Dalam kursus full, Optimalkan Situs Anda Tanpa AMP, Anda akan memasukkan daftar periksa ini ke dalam praktik. Anda akan belajar bagaimana cara mengambil situs berbasis AMP yang ada dan mengubahnya menjadi setara dengan non-AMP. Dengan kata lain, Anda akan belajar bagaimana membuat situs Anda berjalan dengan cepat, dengan teknik pengoptimalan yang Anda putuskan sendiri.

Anda bisa langsung mengikuti kursus ini dengan berlangganan Envato Elements. Dengan biaya bulanan yang rendah, Anda mendapatkan akses tidak hanya ke kursus ini, tetapi juga perpustakaan kami yang berkembang dari lebih dari 1.000 kursus video dan eBook terdepan di Industri Envato Tuts +.

Plus sekarang Anda mendapatkan download tak terbatas dari perpustakaan Envato Elements yang besar dengan 400.000+ aset kreatif. Buat dengan font, foto, grafik dan templat yang unik, dan berikan proyek yang lebih baik dengan lebih cepat.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.