Back to Kursus

WordPress Bagi Pemula

0% Complete
0/0 Steps

  1. Wordpress

    Pendahuluan
  2. Tema
  3. Dashboard
  4. Plugins
    2 Topik-topik
  5. Content Editor
  6. Publishing
  7. Pengaturan Autoptimize Situs WordPress
    3 Topik-topik
  8. Optimization Plugin

Participants 204

Show more
WordPress Bagi Pemula Pengaturan Autoptimize Situs WordPress Opsi CSS
Pelajaran 7, Topik 2
In Progress

Opsi CSS

wpapps September 15, 2020
Pelajaran Progress
0% Complete
  1. Optimalkan Kode CSS

Di rekomendasikan untuk mengaktifkan opsi ini. Saat “optimalkan kode CSS” diaktifkan, Autoptimize akan memperkecil file CSS Anda.

  1. File CSS Gabungan

Opsi “file CSS agregat” Autoptimize akan menggabungkan semua file CSS Anda menjadi satu file.

  1. Agregat Inline CSS

Opsi ini akan memindahkan CSS sebaris ke file CSS Autoptimize. Meskipun memindahkan CSS sebaris ke file CSS yang dapat disimpan dalam cache browser dapat mengurangi ukuran halaman, sebaiknya biarkan opsi ini dinonaktifkan.

  1. Hasilkan Data: URI untuk Gambar

Jika opsi ini diaktifkan, Autoptimize akan mengenkode base64 gambar latar belakang kecil dan menyematkannya ke CSS.

  1. Inline dan Tunda CSS

Menyebariskan CSS penting dapat menghasilkan peningkatan kecepatan yang signifikan untuk beberapa situs.

Dalam praktiknya, CSS sebaris biasanya menargetkan elemen seperti elemen struktural, keluarga dan ukuran font global, dan gaya navigasi.

Dengan menyebariskan elemen kunci ini, file CSS lengkap yang lebih besar dapat dimuat di lain waktu tanpa mempengaruhi tampilan halaman. Meskipun dimungkinkan untuk mengekstrak gaya kritis secara manual, sebaiknya gunakan alat seperti ini untuk menghasilkan gaya sebagai titik awal.

Setelah membuat CSS penting, salin dan tempelkan ke pengaturan Pengoptimalan Otomatis.

Langkah selanjutnya adalah menguji pengalaman frontend situs. Jika Anda melihat beberapa kilasan aneh konten tanpa gaya (FOUC), Anda mungkin perlu mengidentifikasi elemen tanpa gaya tersebut dan menambahkan gaya yang sesuai ke Pengoptimalan otomatis untuk penyebaris.

6. Sebariskan semua CSS

Untuk sebagian besar situs, tidak disarankan agar semua CSS menjadi sebaris karena dapat meningkatkan ukuran halaman secara dramatis. Lebih jauh lagi, membuat semua CSS menjadi inline membuat browser web tidak mungkin menyimpan CSS.

7. Kecualikan CSS dari Autoptimize Secara default

Autoptimize mengecualikan direktori dan file CSS berikut dari agregasi. Jika Anda ingin mencegah Pengoptimalan Otomatis menggabungkan file CSS apa pun, Anda dapat menambahkannya ke daftar ini. Mirip dengan pengecualian JavaScript, perilaku default fitur ini tidak mencegah file CSS dikecilkan – hanya digabungkan.

  • wp-content/cache/
  • wp-content/uploads/
  • admin-bar.min.css
  • Dashicons.min.css