Bagaimana Aku Mempercepat Loading Blog & Wordpress Self-Hosted?

Metode untuk mempercepat loading blog

Posted by Jefry Dewangga on November 09, 2015

Hola! Kali ini aku akan berbagi pengalamanku mengenai bagaimana kiat-kiat sukses meringankan dan mempercepat loading blog sob. Blog secara umum sih, nggak cuman blogspot atau wordpress doang.

Tapi ntar aku bedain kok antara cara mempercepat blog berplatform blogspot dan wordpress. Oh ya, yang aku bahas di sini khusus wordpress self-hosted ya, tapi sebenarnya cara untuk wordpress self-hosted bisa juga diterapin di platform lainnya asalkan self-hosted.

Loading Blogspot

Hmmm sebenarnya metode yang biasa aku gunakan untuk mempercepat loading blogspot adalah dengan membuat beberapa kode bawaan blogger tidak terbaca oleh browser.

Kode tersebut adalah Blogger CSS Reset atau yang lebih dikenal dengan Widget Bundle CSS, dan yang kedua adalah Blogger Widget Javascript. Kedua kode tersebut dapat menambah berat blog kamu.

Apalagi kalau makannya banyak dan nggak pernah olahraga, kebayang kan betapa gendutnya blog kamu sob?

Widget Bundle CSS

  1. Langkah pertama yang harus kamu lakukan adalah membackup template kamu sob, jaga-jaga kalau ada maling eror.
  2. Pergi ke bagian edit HTML, cari kode <b:skin><![CDATA[
  3. Setelah menemukannya, di bawah kode tersebut kamu akan mendapati kode CSS templatemu kan? Cut semua kode CSS tersebut sampai sebelum kode ]]></b:skin> dan pastekan di notepad.
  4. Seharusnya setelah berhasil mengcut kode CSS templatemu, sisa kodenya akan menjadi seperti ini <b:skin><![CDATA[ ]]></b:skin>
  5. Hapus kode di poin nomor 4 tersebut dan ganti dengan kode ini &lt;style&gt;&lt;!-- /*<b:skin><![CDATA[]]></b:skin>
  6. Di bawah kode di poin nomor 5 tersebut, tambahkan kode ini <style>PASTEKAN KODE CSS YANG ADA DI NOTEPAD DI SINI</style>
  7. Simpan template.

Blogger Widget Javascript

  1. Seperti biasa, jangan lupa membackup terlebih dahulu templatemu sob.
  2. Pergi ke bagian edit HTML, cari kode </head>
  3. Ganti kode tersebut dengan kode ini &lt;!--</head>--&gt;&lt;/head&gt;
  4. Kemudian, cari kode </body>
  5. Ganti kode tersebut dengan kode ini &lt;!--</body>--&gt;&lt;/body&gt;
  6. Simpan template.

Loading Wordpress Self-Hosted

Seperti yang telah aku sebutkan di atas, cara ini nggak cuman dapat digunakan untuk wordpress self-hosted saja, tetapi juga platform lainnya asalkan self-hosted.

Metode yang digunakan adalah mengoptimalkan konfigurasi .htaccess untuk blog kamu sob.

  1. Login ke cPanel, kemudian masuk ke bagian file manager. Jangan lupa mencentang Show Hidden Files (dotfiles).
  2. Buat file baru dengan nama .htaccess. Jika sudah terdapat file tersebut, lewati langkah ini sob.
  3. Edit file tersebut dan pastekan konfigurasi berikut:
  4. FileETag None
    
    # Don't show any directory without an index file
    Options -Indexes
    
    # Dont list files in index pages
    IndexIgnore *
    
    # Block Libwww-perl Access
    RewriteCond %{HTTP_USER_AGENT} libwww-perl.* 
    RewriteRule .* ? [F,L]
    
    # Secure .htaccess file
    <Files .htaccess>
     order allow,deny
     deny from all
    </Files>
    
    <IfModule mod_deflate.c>
        <IfModule mod_setenvif.c>
            <IfModule mod_headers.c>
                SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
                RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
            </IfModule>
        </IfModule>
        <IfModule mod_filter.c>
            AddOutputFilterByType DEFLATE "application/atom+xml" \
                                          "application/javascript" \
                                          "application/json" \
                                          "application/ld+json" \
                                          "application/manifest+json" \
                                          "application/rdf+xml" \
                                          "application/rss+xml" \
                                          "application/schema+json" \
                                          "application/vnd.geo+json" \
                                          "application/vnd.ms-fontobject" \
                                          "application/x-font-ttf" \
                                          "application/x-javascript" \
                                          "application/x-web-app-manifest+json" \
                                          "application/xhtml+xml" \
                                          "application/xml" \
                                          "font/eot" \
                                          "font/opentype" \
                                          "image/bmp" \
                                          "image/svg+xml" \
                                          "image/vnd.microsoft.icon" \
                                          "image/x-icon" \
                                          "text/cache-manifest" \
                                          "text/css" \
                                          "text/html" \
                                          "text/javascript" \
                                          "text/plain" \
                                          "text/vcard" \
                                          "text/vnd.rim.location.xloc" \
                                          "text/vtt" \
                                          "text/x-component" \
                                          "text/x-cross-domain-policy" \
                                          "text/xml"
    
        </IfModule>
        <IfModule mod_mime.c>
            AddEncoding gzip              svgz
        </IfModule>
    </IfModule>
    
    <IfModule mod_expires.c>
        ExpiresActive on
        ExpiresDefault                                      "access plus 1 month"
        ExpiresByType text/css                              "access plus 1 year"
        ExpiresByType application/atom+xml                  "access plus 1 hour"
        ExpiresByType application/rdf+xml                   "access plus 1 hour"
        ExpiresByType application/rss+xml                   "access plus 1 hour"
        ExpiresByType application/json                      "access plus 0 seconds"
        ExpiresByType application/ld+json                   "access plus 0 seconds"
        ExpiresByType application/schema+json               "access plus 0 seconds"
        ExpiresByType application/vnd.geo+json              "access plus 0 seconds"
        ExpiresByType application/xml                       "access plus 0 seconds"
        ExpiresByType text/xml                              "access plus 0 seconds"
        ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
        ExpiresByType image/x-icon                          "access plus 1 week"
        ExpiresByType text/html                             "access plus 0 seconds"
        ExpiresByType application/javascript                "access plus 1 year"
        ExpiresByType application/x-javascript              "access plus 1 year"
        ExpiresByType text/javascript                       "access plus 1 year"
        ExpiresByType application/manifest+json             "access plus 1 week"
        ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
        ExpiresByType text/cache-manifest                   "access plus 0 seconds"
        ExpiresByType audio/ogg                             "access plus 1 month"
        ExpiresByType image/bmp                             "access plus 1 month"
        ExpiresByType image/gif                             "access plus 1 month"
        ExpiresByType image/jpeg                            "access plus 1 month"
        ExpiresByType image/png                             "access plus 1 month"
        ExpiresByType image/svg+xml                         "access plus 1 month"
        ExpiresByType image/webp                            "access plus 1 month"
        ExpiresByType video/mp4                             "access plus 1 month"
        ExpiresByType video/ogg                             "access plus 1 month"
        ExpiresByType video/webm                            "access plus 1 month"
        ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
        ExpiresByType font/eot                              "access plus 1 month"
        ExpiresByType font/opentype                         "access plus 1 month"
        ExpiresByType application/x-font-ttf                "access plus 1 month"
        ExpiresByType application/font-woff                 "access plus 1 month"
        ExpiresByType application/x-font-woff               "access plus 1 month"
        ExpiresByType font/woff                             "access plus 1 month"
        ExpiresByType application/font-woff2                "access plus 1 month"
        ExpiresByType text/x-cross-domain-policy            "access plus 1 week"
    </IfModule>
    
    <IfModule mod_headers.c>
    	# Enable Keep Alive
    	Header set Connection keep-alive
    		
    	# Prevent some browsers from MIME-sniffing the response.
    	Header set X-Content-Type-Options "nosniff"
    		
    	# Remove the `X-Powered-By` response header that:
    	Header unset X-Powered-By
    		
    	# Prevent intermediate caches or proxies (e.g.: such as the ones
    	# used by mobile network providers) from modifying the website's
    	# content.
    	Header merge Cache-Control "no-transform"
    		
    	# Remove `ETags` as resources are sent with far-future expires headers.
    	Header unset ETag
    </IfModule>
    
  5. Simpan.

Efek Samping

Menerapkan beberapa metode di atas untuk mempercepat loading blog dapat menyebabkan efek samping yang cukup baik. Hasil penerapan di setiap blog akan berbeda-beda tergantung dari konfigurasi template dan themes serta ukuran gambar yang digunakan.

Berikut screen capture hasil tes jefryd.com menggunakan GTmetrix dengan menerapkan metode di atas.

Bad SmellHasil tes jefryd.com menggunakan GTmetrix.