Kompresi Gzip – Leverage Browser Caching untuk Menambah Kecepatan Website WordPress

Optimalkan kecepatan akses website anda dengan beberapa tips berikut ini.

Enable Compression


Menerapkan kompresi dapat dilakukan dengan mudah di settingan server Anda. Jika Anda tidak terlalu paham tengtang teknis, Anda dapat meminta tim dukungan teknis hosting untuk mengaktifkan kompresi GZIP untuk server Anda.

Di server Apache, Anda dapat menambahkan kode di bawah ini untuk memberi tahu server Anda agar mengaktifkan kompresi GZIP saat mengembalikan respons ke browser.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Optimasi Gambar

Kami mencoba mengoptimalkan gambar dengan membuat setiap gambar di wadah menjadi sesempurna mungkin.

Namun semua gambar tetap perlu dioptimalkan. Anda dapat menginstal plugin seperti wp-smushit untuk mengoptimalkan gambar.

atau jika Anda memiliki akses di server Anda, Anda dapat menggunakan perintah ini (Imagick perlu diinstal)

:

find /var/www/ilmuwordpress.com/wp-content/uploads -name "*.jpg" -exec convert {} -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace RGB {} \;
find /var/www/ilmuwordpress.com/wp-content/uploads -name "*.png" -exec convert {} -strip {} \;

Ganti alamat website dengan link website anda.

Jika terkendala hal teknis, Anda dapat meminta tim dukungan teknis hosting anda untuk menyiapkannya di server Anda.


Manfaatkan Cache Browser (Leverage Browser Caching)

Ketika browser web menampilkan halaman web Anda, ia harus memuat beberapa hal seperti logo Anda, file CSS Anda, file JS, dan sumber daya lainnya.

Apa yang dilakukan cache browser adalah “mengingat” sumber daya yang telah dimuat browser. Ketika pengunjung pergi ke halaman lain di situs web Anda, logo Anda, file CSS, dll. Tidak perlu dimuat lagi, karena browser telah membuatnya “diingat” (disimpan). Inilah alasan mengapa tampilan pertama halaman web membutuhkan waktu lebih lama daripada kunjungan berulang.

Kode di bawah ini memberi tahu browser apa yang harus disimpan dalam cache dan berapa lama untuk “mengingatnya”. Ini harus ditambahkan ke bagian atas file .htaccess Anda

# 1 YEAR
ExpiresActive On
<FilesMatch "\.(otf|ico|pdf|flv|ttf|eot|svg|woff|mp3|ogg|mp4|webm|ogv)$">
  Header set Cache-Control "max-age=29030400, public"
  ExpiresDefault "access plus 1 years"
  Header unset Last-Modified
  Header unset ETag
  SetOutputFilter DEFLATE
</FilesMatch>

# 1 MONTHS
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
  Header set Cache-Control "max-age=2419200, public"
  ExpiresDefault "access plus 1 month"
  SetOutputFilter DEFLATE
</FilesMatch>

<FilesMatch "\.(xml|txt|css|js)$">
  Header set Cache-Control "max-age=604800, public"
  ExpiresDefault "access plus 1 week"
  SetOutputFilter DEFLATE
</FilesMatch>

# 30 MIN
<FilesMatch "\.(html|htm|php)$">
  SetOutputFilter DEFLATE
</FilesMatch>

Selamat mencoba.

 

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *