Speed up your website using minify

David Carr

Javascript Development CSS Tutorials HTML Tools

One of the factors to consider when improving your search engine ranking is page speed. Reducing the amount of HTTP requests your website uses will help improve your rank and page speed.

Using a tool called YSlow can help to determine to identify problem areas. 

Theme from http://graygrids.com/item/elevator-metro-ui-inspired-responsive-bootstrap-template

Moving all your CSS and JS files into single CSS/JS minified file can greatly improve the page loading time. A great tool for this is Minify this allows you to minify files on the fly whilst keeping the original files in tact.

<iframe frameborder="0" height="480" src="https://www.youtube.com/embed/vfLPt_jsmVg" width="853"></iframe>

To help improve the yslow rank further I included the following .htaccess file which removed unwanted tags, compresses the output and caches files. Place this on the root of the site in a .htaccess file:

# Remove ETags as resources are sent with far-future expires headers.
# http://developer.yahoo.com/performance/rules.html#etags.

# FileETag None doesn't work in all cases.
<IfModule mod_headers.c>
    Header unset ETag
</IfModule>

FileETag None

#move www.domain to domain
<IfModule mod_rewrite.c>
    RewriteCond %{HTTPS} !=on
    RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
    RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

# Force Internet Explorer to render pages in the highest available mode
<IfModule mod_headers.c>
    Header set X-UA-Compatible 'IE=edge'
    # mod_headers cannot match based on the content-type, however, this
    # header should be send only for HTML pages and not for the other resources
    <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$">
        Header unset X-UA-Compatible
    </FilesMatch>
</IfModule>

#turn off directory browsing
<IfModule mod_autoindex.c>
    Options -Indexes
</IfModule>

#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/ld+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>

# 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 such as style sheets and JavaScript
# files to something like one 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/ld+json                   'access plus 0 seconds'
    ExpiresByType application/xml                       'access plus 0 seconds'
    ExpiresByType text/xml                              'access plus 0 seconds'

  # Favicon (cannot be renamed!) and cursor images
    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>

Read articles directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Copyright © 2006 - 2024 DC Blog - All rights reserved.