Black Friday sale is now on! 50% off Laravel: The Modular Way. Learn more

Speed up your website using minify

David Carr

Javascript HTML CSS Tutorials Tools Development

    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.

    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>

    Laravel Modules Book by David Carr

    Help support the blog so that I can continue creating new content!

    Subscribe to my newsletter

    Subscribe and get my books and product announcements.

    © 2009 - 2022 DC Blog. All code MIT license. All rights reserved.