Tips Mempercepat Load Web dengan Setting Htaccess

Jurus 2

Barusan coba kode yang dipaparkan sama mas Gian mengenai bagaimana mempercepat loading web / blog hanya sekedar melakukan editing di bagian htaccess. Ternyata bener, blog saya ini awalnya cuman dapat C + C, sekarang bisa A + C skore GT Metrixnya. Berikut kode htaccess yang aku pakai:

RewriteEngine On RewriteBase / RewriteRule ^index\.php$ – [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] # 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/ # # Header set Access-Control-Allow-Origin “*” # # —————————————————————————— # | 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/ <FilesMatch “\.(gif|ico|jpe?g|png|svgz?|webp)$”> SetEnvIf Origin “:” IS_CORS Header set Access-Control-Allow-Origin “*” env=IS_CORS # —————————————————————————— # | Web fonts access | # —————————————————————————— # Allow access from all domains for web fonts <FilesMatch “\.(eot|font.css|otf|ttc|ttf|woff)$”> Header set Access-Control-Allow-Origin “*” # ################################ # # 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. 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 # —————————————————————————— # | Cookie setting from iframes | # —————————————————————————— # Allow cookies to be set from iframes in IE. # # Header set P3P “policyref=\”/w3c/p3p.xml\”, CP=\”IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\”” # # —————————————————————————— # | 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 | # —————————————————————————— # 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 # —————————————————————————— # | 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. AddCharset utf-8 .atom .css .js .json .rss .vtt .webapp .xml # —————————————————————————— # | 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`. # # RewriteCond %{SERVER_PORT} !^443 # RewriteRule ^ https://example-domain-please-change-me.com%{REQUEST_URI} [R=301,L] # # —————————————————————————— # | 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. # # Header set Strict-Transport-Security “max-age=16070400; includeSubDomains” # # —————————————————————————— # | 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 | # —————————————————————————— # Force compression for mangled headers. # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping 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 # 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 “ and “ lines # as `AddOutputFilterByType` is still in the core directives). 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 # —————————————————————————— # | 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. # # Header set Cache-Control “no-transform” # # —————————————————————————— # | 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. Header unset ETag 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. 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” # —————————————————————————— # | 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 # # RewriteCond %{REQUEST_FILENAME} !-f # RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L] # # —————————————————————————— # | File concatenation | # —————————————————————————— # Allow concatenation from within specific CSS and JS files, e.g.: # Inside of `script.combined.js` you could have # # # and they would be included into this single file. # # <FilesMatch “\.combined\.js$”> # Options +Includes # AddOutputFilterByType INCLUDES application/javascript application/json # SetOutputFilter INCLUDES # # <FilesMatch “\.combined\.css$”> # Options +Includes # AddOutputFilterByType INCLUDES text/css # SetOutputFilter INCLUDES # # # —————————————————————————— # | 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! # # Header set Connection Keep-Alive #

Bener bener josh margandos. Yang kesulitan buka buka area htaccess, pakai plugin wordpress aja namanya Wp htaccess editor. Cara pakainya tinggal install plugin itu di wordpressmu, lalu kalau sudah aktif cek di area sebelah kiri bawah ada menu baru wp htaccess editor. Copas isi awalnya, simpan di notepad kalau kalau eror. Lalu, Isi htaccessnya yang tampil di plugin itu delete semua, lalu kopaskan script di atas.

WARNING, aku ndak tanggung jawab kalau webmu jadi eror misal ada ketidak sesuaian antara script yang ada di atas dengan default scrip yang dirimu pakai buat membangun webmu. Kebetulan, scriptku di web ini pas banget dan sesuai. Kalau udah terlanjur eror? seperti aku bilang tadi, kembalikan aja isinya seperti semula, kan udah aku minta simpan di notepad tadi. Sekian, Tips Mempercepat Load Web dengan Setting Htaccess.

Tags:
Panduan Cpanel Ratakan

2 Responses

  1. author

    Boneng21/10/2014 at 3:18 amReply

    Kampret, tutorial gak mutu blog saya jadi error…!

    • author Author

      Anjrah Web24/10/2014 at 9:18 amReply

      makasih mas kampret 🙂 …

      kan sudah sy tulis di atas:
      WARNING, aku ndak tanggung jawab kalau webmu jadi eror misal ada ketidak sesuaian antara script yang ada di atas dengan default scrip yang dirimu pakai buat membangun webmu. Kebetulan, scriptku di web ini pas banget dan sesuai. Kalau udah terlanjur eror? seperti aku bilang tadi, kembalikan aja isinya seperti semula, kan udah aku minta simpan di notepad tadi. Sekian, Tips Mempercepat Load Web dengan Setting Htaccess.

      clear yah. USE WITH YOUR OWN RISK.
      kebetulan beberpa blogku lancar lancar saja dipasang scrip di atas.

Dapat ide baru? Apa Komenmu?