Lihin Belawa

Hanya Celoteh Guru | Belawa to The World

Pasang Iklan

Cara Mempercepat Loading Blog WordPress

Cara Mempercepat Loading Blog WordPress

Celoteh saya kali ini, khusus membahas mempercepat loading blog wordpress saja dengan self hosted, atau blog wordpress yang menggunakan hosting peribadi. Bahwa kecepatan loading sebuah blog sangat menentukan betahnya pengunjung pada sebuah blog. Bisa dibayangkan, hanya karena blog lambat loading, seorang pengunjung harus mengorbankan waktunya hanya untuk melihat satu artikel saja. Akibatnya, tak jarang akhirnya pengunjung memilih pidah ke situs lain.

Banyak sekali tutorial cara mempercepat loading blog, baik blogspot, maupun wordpres. Untuk wordpres dengan hosting pribadi, yang umum dilakukan adalah dengan menggunakan plugin seperti W3 Super Chace, Smush.it, WP Super Chace, dan plugin lainnya. Pengalaman saya, dengan plugin memang sedikit mempercepat loading blog, namun bukan berarti tidak memiliki kekurangan. Banyak sekali kekurangan penggunaan plugin, yang umum menguras CPU, dan terkadang fitur sebuah plugin bentrok dengan plugin lain. Bahkan pengalaman terakhir, plugin bisa menghalangi validasi feed url.

Akhirnya saya menemukan cara terbaik, dan tanpa plugin, yaitu melalui .htaccess dan CDN Google. Kesempatan kali ini saya hanya membahas mempercepat loading blog wordpress dengan .htaccess. Cara memuat loading website lebih cepat dengan htaccess dianggap lebih efisien karena htaccess dapat mengaktifkan beberapa fitur pada server dan cache yang lebih baik , seperti header kadaluarsa dan lain-lain. Caranya;

1. Sebelum aksi silahkan backup wp_config.php Anda dan file .htaccess
2. Pergi ke wp_config.php dan menempatkan script ini :

define ( ‘ WP_CACHE ‘ , true) ;

Masukan kode yang setelah :

< ? php
Cara ini mudah, login ke cpanel, pada bagian public_html buka .htaccess. Tampilan default .htaccess biasanya seperti ini;

# BEGIN WordPress

<IfModule mod_rewrite.c>

RewriteEngine On

RewriteBase /

RewriteRule ^index\.php$ – [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.php [L]

</IfModule>

# END WordPress

Tambahkan dengan kode di bawah ini, sebelum kode tadi;

# Apache Server Configs v1.1.0 | MIT License
# https://github.com/h5bp/server-configs-apache

# (!) Using `.htaccess` files slows down Apache, therefore, if you have access
# to the main server config file (usually called `httpd.conf`), you should add
# this logic there: http://httpd.apache.org/docs/current/howto/htaccess.html.

# ##############################################################################
# # CROSS-ORIGIN RESOURCE SHARING (CORS) #
# ##############################################################################

# ------------------------------------------------------------------------------
# | Cross-domain AJAX requests |
# ------------------------------------------------------------------------------

# Enable cross-origin AJAX requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
# Header set Access-Control-Allow-Origin "*"
# </IfModule>

# ------------------------------------------------------------------------------
# | CORS-enabled images |
# ------------------------------------------------------------------------------

# Send the CORS header for images when browsers request it.
# https://developer.mozilla.org/en/CORS_Enabled_Image
# http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/

<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
<FilesMatch "\.(gif|ico|jpe?g|png|svgz?|webp)$">
SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "*" env=IS_CORS
</FilesMatch>
</IfModule>
</IfModule>

# ------------------------------------------------------------------------------
# | Web fonts access |
# ------------------------------------------------------------------------------

# Allow access from all domains for web fonts

<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>

# ##############################################################################
# # INTERNET EXPLORER #
# ##############################################################################

# ------------------------------------------------------------------------------
# | Better website experience |
# ------------------------------------------------------------------------------

# Force IE to render pages in the highest available mode in the various
# cases when it may not: http://hsivonen.iki.fi/doctype/ie-mode.pdf.

<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=edge"
# `mod_headers` can't match based on the content-type, however, we only
# want to send this header for HTML pages and not for the other resources
<FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe?g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svgz?|ttf|vcf|webapp|webm|webp|woff|xml|xpi)$">
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>

# ------------------------------------------------------------------------------
# | Cookie setting from iframes |
# ------------------------------------------------------------------------------

# Allow cookies to be set from iframes in IE.

# <IfModule mod_headers.c>
# Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""
# </IfModule>

# ------------------------------------------------------------------------------
# | Screen flicker |
# ------------------------------------------------------------------------------

# Stop screen flicker in IE on CSS rollovers (this only works in
# combination with the `ExpiresByType` directives for images from below).

# BrowserMatch "MSIE" brokenvary=1
# BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
# BrowserMatch "Opera" !brokenvary
# SetEnvIf brokenvary 1 force-no-vary

# ##############################################################################
# # MIME TYPES AND ENCODING #
# ##############################################################################

# ------------------------------------------------------------------------------
# | Proper MIME types for all files |
# ------------------------------------------------------------------------------

<IfModule mod_mime.c>

# Audio
AddType audio/mp4 m4a f4a f4b
AddType audio/ogg oga ogg

# JavaScript
# Normalize to standard type (it's sniffed in IE anyways):
# http://tools.ietf.org/html/rfc4329#section-7.2
AddType application/javascript js
AddType application/json json

# Video
AddType video/mp4 mp4 m4v f4v f4p
AddType video/ogg ogv
AddType video/webm webm
AddType video/x-flv flv

# Web fonts
AddType application/font-woff woff
AddType application/vnd.ms-fontobject eot

# Browsers usually ignore the font MIME types and sniff the content,
# however, Chrome shows a warning if other MIME types are used for the
# following fonts.
AddType application/x-font-ttf ttc ttf
AddType font/opentype otf

# Make SVGZ fonts work on iPad:
# https://twitter.com/FontSquirrel/status/14855840545
AddType image/svg+xml svg svgz
AddEncoding gzip svgz

# Other
AddType application/octet-stream safariextz
AddType application/x-chrome-extension crx
AddType application/x-opera-extension oex
AddType application/x-shockwave-flash swf
AddType application/x-web-app-manifest+json webapp
AddType application/x-xpinstall xpi
AddType application/xml atom rdf rss xml
AddType image/webp webp
AddType image/x-icon ico
AddType text/cache-manifest appcache manifest
AddType text/vtt vtt
AddType text/x-component htc
AddType text/x-vcard vcf

</IfModule>

# ------------------------------------------------------------------------------
# | UTF-8 encoding |
# ------------------------------------------------------------------------------

# Use UTF-8 encoding for anything served as `text/html` or `text/plain`.
AddDefaultCharset utf-8

# Force UTF-8 for certain file formats.
<IfModule mod_mime.c>
AddCharset utf-8 .atom .css .js .json .rss .vtt .webapp .xml
</IfModule>

# ------------------------------------------------------------------------------
# | Secure Sockets Layer (SSL) |
# ------------------------------------------------------------------------------

# Rewrite secure requests properly to prevent SSL certificate warnings, e.g.:
# prevent `https://www.example.com` when your certificate only allows
# `https://secure.example.com`.

# <IfModule mod_rewrite.c>
# RewriteCond %{SERVER_PORT} !^443
# RewriteRule ^ https://example-domain-please-change-me.com%{REQUEST_URI} [R=301,L]
# </IfModule>

# ------------------------------------------------------------------------------
# | HTTP Strict Transport Security (HSTS) |
# ------------------------------------------------------------------------------

# Force client-side SSL redirection.

# If a user types "example.com" in his browser, the above rule will redirect
# him to the secure version of the site. That still leaves a window of oppor-
# tunity (the initial HTTP connection) for an attacker to downgrade or redirect
# the request. The following header ensures that browser will ONLY connect to
# your server via HTTPS, regardless of what the users type in the address bar.
# http://tools.ietf.org/html/draft-ietf-websec-strict-transport-sec-14#section-6.1
# http://www.html5rocks.com/en/tutorials/security/transport-layer-security/

# (!) Remove the `includeSubDomains` optional directive if the subdomains are
# not using HTTPS.

# <IfModule mod_headers.c>
# Header set Strict-Transport-Security "max-age=16070400; includeSubDomains"
# </IfModule>

# ------------------------------------------------------------------------------
# | Server software information |
# ------------------------------------------------------------------------------

# Avoid displaying the exact Apache version number, the description of the
# generic OS-type and the information about Apache's compiled-in modules.

# ADD THIS DIRECTIVE IN THE `httpd.conf` AS IT WILL NOT WORK IN THE `.htaccess`!

# ServerTokens Prod

# ##############################################################################
# # WEB PERFORMANCE #
# ##############################################################################

# ------------------------------------------------------------------------------
# | Compression |
# ------------------------------------------------------------------------------

<IfModule mod_deflate.c>

# Force compression for mangled headers.
# http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping
<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>

# Compress all output labeled with one of the following MIME-types
# (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
# and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
# as `AddOutputFilterByType` is still in the core directives).
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/x-web-app-manifest+json \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml
</IfModule>

</IfModule>

# ------------------------------------------------------------------------------
# | Content transformations |
# ------------------------------------------------------------------------------

# Prevent some of the mobile network providers from modifying the content of
# your site: http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9.5.

# <IfModule mod_headers.c>
# Header set Cache-Control "no-transform"
# </IfModule>

# ------------------------------------------------------------------------------
# | ETag removal |
# ------------------------------------------------------------------------------

# Since we're sending far-future expires headers (see below), ETags can
# be removed: http://developer.yahoo.com/performance/rules.html#etags.

# `FileETag None` is not enough for every server.
<IfModule mod_headers.c>
Header unset ETag
</IfModule>

FileETag None

# ------------------------------------------------------------------------------
# | Expires headers (for better cache control) |
# ------------------------------------------------------------------------------

# The following expires headers are set pretty far in the future. If you don't
# control versioning with filename-based cache busting, consider lowering the
# cache time for resources like CSS and JS to something like 1 week.

<IfModule mod_expires.c>

ExpiresActive on
ExpiresDefault "access plus 1 month"

# CSS
ExpiresByType text/css "access plus 1 year"

# Data interchange
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"

# Favicon (cannot be renamed!)
ExpiresByType image/x-icon "access plus 1 week"

# HTML components (HTCs)
ExpiresByType text/x-component "access plus 1 month"

# HTML
ExpiresByType text/html "access plus 0 seconds"

# JavaScript
ExpiresByType application/javascript "access plus 1 year"

# Manifest files
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
ExpiresByType text/cache-manifest "access plus 0 seconds"

# Media
ExpiresByType audio/ogg "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 video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"

# Web feeds
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"

# Web fonts
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"

</IfModule>

# ------------------------------------------------------------------------------
# | Filename-based cache busting |
# ------------------------------------------------------------------------------

# If you're not using a build process to manage your filename version revving,
# you might want to consider enabling the following directives to route all
# requests such as `/css/style.12345.css` to `/css/style.css`.

# To understand why this is important and a better idea than `*.css?v231`, read:
# http://stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring

# <IfModule mod_rewrite.c>
# RewriteCond %{REQUEST_FILENAME} !-f
# RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L]
# </IfModule>

# ------------------------------------------------------------------------------
# | File concatenation |
# ------------------------------------------------------------------------------

# Allow concatenation from within specific CSS and JS files, e.g.:
# Inside of `script.combined.js` you could have
# <!--#include file="libs/jquery.js" -->
# <!--#include file="plugins/jquery.idletimer.js" -->
# and they would be included into this single file.

# <IfModule mod_include.c>
# <FilesMatch "\.combined\.js$">
# Options +Includes
# AddOutputFilterByType INCLUDES application/javascript application/json
# SetOutputFilter INCLUDES
# </FilesMatch>
# <FilesMatch "\.combined\.css$">
# Options +Includes
# AddOutputFilterByType INCLUDES text/css
# SetOutputFilter INCLUDES
# </FilesMatch>
# </IfModule>

# ------------------------------------------------------------------------------
# | Persistent connections |
# ------------------------------------------------------------------------------

# Allow multiple requests to be sent over the same TCP connection:
# http://httpd.apache.org/docs/current/en/mod/core.html#keepalive.

# Enable if you serve a lot of static content but, be aware of the
# possible disadvantages!

<IfModule mod_headers.c>
Header set Connection Keep-Alive
</IfModule>

 

Cara ini saya dapatkan dari ahli membuat theme wordpress dengan tampilan keren dan fast loading, alamat url-nya http://kentooz.com dan sudah dibuktikan di situs ini. Dan untuk menguji kecepatan loading blog Anda, silahkan masuk ke situs ini.

Tags: , ,

Subscribe

Berlangganan gratis bersama 1000+ lainnya. Masukan e-mail, masukan kode, "submit." cek e-mail, klik link konfirmasi. Mari berbagi :)

17 Responses

  1. Pegilola SucesAugust 27, 2013 at 03:53Reply

    Alhamdulillah, akhirnya nemu yang membahas ini. makasih ya. Do`ain moga sukses saat menerapkannya.

    • Author

      MushlihinOctober 18, 2013 at 13:02Reply

      Amin, terapin yang benar yah 🙂

  2. dinilOctober 18, 2013 at 10:56Reply

    saya coba dulu haha, semoga aman dan lancar

    • Author

      MushlihinOctober 18, 2013 at 13:03Reply

      Insya Allah Aman, karena sebenarnya .httcess itu adalah penjabaran dari plugin percepat loading, yang melahap hosting itu 🙂

  3. AsadiyahOctober 24, 2013 at 21:16Reply

    Tapi kok .httcess saya gk ada isinya, kalau saya isi dengan tampilan default jadinya error 505 > 🙂

  4. GandosDecember 11, 2013 at 03:39Reply

    woalah pakde … tak terapke malah bobrok websiteku

    • Author

      MushlihinDecember 11, 2013 at 13:17Reply

      Tanyakan penyedia hosting Anda, memang banyak hosting yang tidak mendukung htcess itu 🙂

  5. abdul azizDecember 16, 2013 at 01:55Reply

    sip mas terima kasih informasinya, sudah saya terapkan dan insya allah cepat.

    regard’s
    abdul aziz

  6. Kaos BanyumasJanuary 7, 2014 at 23:12Reply

    Terimakasih, sudah saya coba

  7. Made SumitreMarch 19, 2014 at 18:35Reply

    sangat membantu om,, Biar loadingnya secepat kilat,,kayak dilocahost..

    • Author

      MushlihinMarch 23, 2014 at 07:42Reply

      Kalau kek di local host bisa sih, tapi kalau kita punya semuanya termasuk gugel wkwkwk

  8. TifkomSeptember 24, 2015 at 02:42Reply

    Terimakasih atas infonya mas sangat bermanfaat sekali.

    Teman – teman yang ingin mengetahui tips dan informasi seputar komputer, teknologi dan website, anda bisa berkunjung ke http://www.tifkom,net (ganti koma menjadi titik).

    Salam blogger.

  9. ilmudesSeptember 30, 2015 at 16:54Reply

    link nya gak bisa dibuka nih mas, trus gimana ya?

  10. urusanduniaJune 8, 2016 at 16:24Reply

    saya pake cloudflare dan wp super cache, apa itu sudah cukup?

    • Harlinah RaufJune 9, 2016 at 10:43Reply

      Sebenarnya pemakaian plugin saya gak terlalu sepakat, wong plugin sendiri mengambil jatah lemotnya blog web

  11. augmentin genericJune 16, 2016 at 02:11Reply

    Iya mas, dari pengalaman saya dulu, beberapa plugin untuk mempercepat blog emang sering menggunakan resource yg lebih banyak. Seperti W3 Total Cache itu.

Leave a Reply

one + two =