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 🙂

Memiliki pertanyaan atau saran? Silakan klik disini untuk berkomentar :).

Masgani

Halo, perkenalkan nama saya Gani. Saat ini saya sebagai penulis sekaligus pemilik situs web masgani.com. Selain menulis di situs web ini, keseharian saya saat ini yaitu sebagai Developer di salah satu perusahaan Startup. Saya berharap tulisan saya situs web ini dapat bermanfaat dan menginspirasi. Terima kasih :)

Postingan Terkait

2 Respon

  1. EnjoyArch.com berkata:

    thanks banget om.. lagi nyari yang ginian.. tapi masih belum ngudeng.. nempatin posisinya paling atas atau gimana?thanks


    Header set Connection keep-alive

Tinggalkan Balasan

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

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.