Cara mempercepat loading situs atau blog WordPress
Kecepatan loading atau pemuatan halaman menjadi sangat penting bagi sebuah situs web. Karena situs web yang cepat adalah situs web yang baik dan bagus disisi SEO. Kalau website atau blog kita lambat dan berat kecepatanya saat dimuat, pasti pengunjung kita jadi tidak berminat untuk melihat halaman kita dan ingin segera meninggalkan halaman kita karena terlalu lama dimuat. Ini juga sangat berpengaruh terhadap nilai SOE. Mesin telusur juga senang jika merayapi suatu situs web yang loading nya cepat. Berikut adalah beberapa cara yang perlu kita ketahui.
Pilih web hosting yang tepat
Memilih hosting yang tepat adalah langkah awal untuk memulai usaha kita. Hosting yang kita pilih sangat berpengaruh juga terhadap kecepatan situs web kita, karena data-data yang kita simpan pasti di server atau web hosting yang kita sewa. Pastikan sebelum menyewa layanan tersebut, kita sudah tahu apakah layanan tersebut baik dan terbukti ampuh dalam menangani resource pada situs web kita.
Mengaktifkan Gzip Compression dan Lavelarge Browser Caching
WordPress menyediakan Plugin yang dapat kita gunakan untuk melakukan hal-hal tersebut dengan sangat mudah tanpa pengetahuan atau keahlian lebih untuk menerapkannya.
Ada dua plugin yang Saya rekomendasikan untuk mengaktifkan Gzip Compression dan Lavelarge Browser Caching, yaitu:
- WP Super Cache : Plugin ini sangat populer dan banyak digunakan oleh para pengguna ataupun pengembang WordPress. Plugin ini sangat mudah digunakan dan tidak terlalu banyak dalam melakukan pengaturannya. Dengan beberapa pengaturan kita sudah bisa menikmati hasilnya.
- W3 Total Cache : Plugin ini juga sama populernya dengan plugin di atas. Plugin ini mempunyai banyak fitur-fitur yang bisa kita gunakan, tetapi ada beberapa fitur yang tidak bisa kita gunakan jika Web Hosting yang kita sewa tidak mensupport. Kalau menurut saya, plugin ini lebih cocok apabila kita menggunakan server sendiri(bukan shared hosting) atau menggunakan vps agar hasilnya lebih maksimal. Tapi kita tetap bisa menikmati fitur-fitur pada plugin ini walau kita menggunakan shared hosting. Kita juga bisa memperkecil css, javascript dan html secara otomatis dengan bantuan plugin ini.
Optimasi Gambar
File-file gambar juga mempengaruhi kinerja server kita, apabila kita tidak melakukan optimasi pada file-file tersebut, maka situs web kita akan tetap terasa berat saat di muat.
Untuk melakukan optimasi gambar kita bisa menggunakan bantuan plugin WP Smush. Cara penggunaanya bisa Anda lihat pada postingan: Mengoptimalkan gambar dengan plugin WP Smush.
Minify CSS, Javacript dan HTML
Mmeperkecil ukuran file CSS, Javacript dan HTML agar tidak terlalu membebani kinerja situs web kita. Kita bisa memperkecil ukuran file-file tersebut dengan bantuan Online YUI Compressor. Fitur ini juga ada pada Plugin W3 Total Cache jika Anda menggunakan plugin tersebut.
Inline CSS dan Javascript
Terlalu banyak menggunakan file css dan javascript external juga akan memperlambat kinerja situs web kita. Jika css dan javascript yang kita gunakan tidak terlalu besar atau hanya beberapa baris, lebih baik kita inline-kan atau kita tempatkan langsung kedalam satu berkas dengan dokumen HTML.
Baca: Cara menambahkan inline CSS dan javascript
Enable Keep Alive
Mempertahanan koneksi antar klien dan server agar tetap hidup. Hal ini perlu dilakukan agar tidak selalu meminta koneksi baru pada setiap permintaan baru. Pada koneksi HTTP standar biasanya ditutup setiap permintaan telah selesai, server menutup koneksi setelah memberikan respon.
Jika ingin mengaktifkan, kita perlu menambahkan kode ini ke dalam file .htaccess
<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>
Dengan menerapkan cara-cara di atas, seharusnya situs web atau blog kita sudah menjadi lebih cepat dari sebelumnya. Untuk mengeceknya Anda bisa menggunakan GTMetrix atau Page Speed Insights.
Jika nilai yang didapat belum mencapai target. Sebagai tambahan, Anda bisa tambahkan kode di bawah ini ke dalam file .htaccess Anda.
<IfModule mod_mime.c>
AddType text/css .css
AddType text/x-component .htc
AddType application/x-javascript .js
AddType application/javascript .js2
AddType text/javascript .js3
AddType text/x-js .js4
AddType text/html .html .htm
AddType text/richtext .rtf .rtx
AddType image/svg+xml .svg .svgz
AddType text/plain .txt
AddType text/xsd .xsd
AddType text/xsl .xsl
AddType text/xml .xml
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType image/bmp .bmp
AddType application/java .class
AddType video/divx .divx
AddType application/msword .doc .docx
AddType application/vnd.ms-fontobject .eot
AddType application/x-msdownload .exe
AddType image/gif .gif
AddType application/x-gzip .gz .gzip
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType application/json .json
AddType application/vnd.ms-access .mdb
AddType audio/midi .mid .midi
AddType video/quicktime .mov .qt
AddType audio/mpeg .mp3 .m4a
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
AddType application/vnd.ms-project .mpp
AddType application/x-font-otf .otf
AddType application/vnd.oasis.opendocument.database .odb
AddType application/vnd.oasis.opendocument.chart .odc
AddType application/vnd.oasis.opendocument.formula .odf
AddType application/vnd.oasis.opendocument.graphics .odg
AddType application/vnd.oasis.opendocument.presentation .odp
AddType application/vnd.oasis.opendocument.spreadsheet .ods
AddType application/vnd.oasis.opendocument.text .odt
AddType audio/ogg .ogg
AddType application/pdf .pdf
AddType image/png .png
AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
AddType audio/x-realaudio .ra .ram
AddType application/x-shockwave-flash .swf
AddType application/x-tar .tar
AddType image/tiff .tif .tiff
AddType application/x-font-ttf .ttf .ttc
AddType audio/wav .wav
AddType audio/wma .wma
AddType application/vnd.ms-write .wri
AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A29030400
ExpiresByType text/x-component A29030400
ExpiresByType application/x-javascript A29030400
ExpiresByType application/javascript A29030400
ExpiresByType text/javascript A29030400
ExpiresByType text/x-js A29030400
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType text/xml A3600
ExpiresByType video/asf A29030400
ExpiresByType video/avi A29030400
ExpiresByType image/bmp A29030400
ExpiresByType application/java A29030400
ExpiresByType video/divx A29030400
ExpiresByType application/msword A29030400
ExpiresByType application/vnd.ms-fontobject A29030400
ExpiresByType application/x-msdownload A29030400
ExpiresByType image/gif A29030400
ExpiresByType application/x-gzip A29030400
ExpiresByType image/x-icon A29030400
ExpiresByType image/jpeg A29030400
ExpiresByType application/json A29030400
ExpiresByType application/vnd.ms-access A29030400
ExpiresByType audio/midi A29030400
ExpiresByType video/quicktime A29030400
ExpiresByType audio/mpeg A29030400
ExpiresByType video/mp4 A29030400
ExpiresByType video/mpeg A29030400
ExpiresByType application/vnd.ms-project A29030400
ExpiresByType application/x-font-otf A29030400
ExpiresByType application/vnd.oasis.opendocument.database A29030400
ExpiresByType application/vnd.oasis.opendocument.chart A29030400
ExpiresByType application/vnd.oasis.opendocument.formula A29030400
ExpiresByType application/vnd.oasis.opendocument.graphics A29030400
ExpiresByType application/vnd.oasis.opendocument.presentation A29030400
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A29030400
ExpiresByType application/vnd.oasis.opendocument.text A29030400
ExpiresByType audio/ogg A29030400
ExpiresByType application/pdf A29030400
ExpiresByType image/png A29030400
ExpiresByType application/vnd.ms-powerpoint A29030400
ExpiresByType audio/x-realaudio A29030400
ExpiresByType image/svg+xml A29030400
ExpiresByType application/x-shockwave-flash A29030400
ExpiresByType application/x-tar A29030400
ExpiresByType image/tiff A29030400
ExpiresByType application/x-font-ttf A29030400
ExpiresByType audio/wav A29030400
ExpiresByType audio/wma A29030400
ExpiresByType application/vnd.ms-write A29030400
ExpiresByType application/vnd.ms-excel A29030400
ExpiresByType application/zip A29030400
</IfModule>
<IfModule mod_deflate.c>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json
<IfModule mod_mime.c>
# DEFLATE by extension
AddOutputFilter DEFLATE js css htm html xml
</IfModule>
</IfModule>
<FilesMatch ".(css|htc|js|js2|js3|js4|CSS|HTC|JS|JS2|JS3|JS4)$">
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public"
Header unset Set-Cookie
</IfModule>
</FilesMatch>
<FilesMatch ".(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|XML)$">
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public"
</IfModule>
</FilesMatch>
<FilesMatch ".(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|WAV|WMA|WRI|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public"
Header unset Set-Cookie
</IfModule>
</FilesMatch>
Selamat mencoba 🙂
thanks banget om.. lagi nyari yang ginian.. tapi masih belum ngudeng.. nempatin posisinya paling atas atau gimana?thanks
Header set Connection keep-alive
Halo mas,
maaf baru balas, komentarnya masuk spam. hehe
bebas nempatin dimana saja, diatas juga tidak apa2. 🙂