8 Free Tips for Improving Website Performance : PT1

So you have decided to start a website or blog? You acquired a domain, had a website designed for you or you simply downloaded a theme and dove straight to churning out articles on a regular basis, maybe you have read all the blogs on content strategy but nothing seems to work. Your bounce rates remain very high and your traffic volumes are decreasing and your ad revenue is also waning, what might be the problem?

Well in this article, we will give you 8 free tips for improving website performance and some of the technical problems and the solutions to bring your website back to it’s glory days and hopefully increase your ad revenue whilst we are at it.

To be honest most of your problems are really to do with performance and accessibility of your website, it is that simple.

Website Performance

This is how the website is viewed from the viewpoint of the user, it deals with issues like speed and the size of the website which can really have a negative impact on the overall performance of the website.

Web Page Speed

Slow websites are the main reason behind high bounce rates, websites become slow because of a lot of issues but we are going to discuss the main reasons here which are namely

  •  Too many scripts making requests to the server
  •  Too many ”useless” plugins or modules running on the website
  • Amateur Coding – repeat styles
  • Huge Image files and many more

The Solutions

Gzip Compression

Ever wondered why some very big websites like Yahoo or CNN  load quickly in your browser, well gzip compression is the answer. The technology behind this is very similar to how you compress files on a local machine but the difference is that this one occurs on a network between the browser and the server.

You can implement this by copying the code below by Paul Irish and some other guys which is used on the html5 boilerplate. Make sure you have access to your .htaccess file, on the server, just paste this code after the last line of your existing code.

# ------------------------------------------------------------------------------
# | 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

    # 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 \


To check if your gzip compression has been activated visit  gzipwtf.com  to test if it has implemented successfully. Tip: time your pageload speed before and after the gzip installation.

Server-side Caching

Make sure that your websites avoids unnecessary requests to the server for frequently used files by enabling server-side caching just copy the code below and paste it right after the last line of code in your .htaccess file, this is an intelligent piece of code it basically handles communication between the browser and the server, thereby avoiding unnecessary traffic which amounts to a faster website.

# ------------------------------------------------------------------------------
# | 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"


Client-side Caching

This is file caching that occurs on the users’ browser and this is mainly facilitated by plugins and modules i am going to use wordpress as an example, you might find similar solutions on Joomla or Drupal. The latest wordpress release comes with a client side and serveside solution in the form of WP Super Cache plugin this handles all your client-side caching issues. Investigate further on which caching solution best suits your needs.

Lossless Image Optimization

Images contribute a lot to the speed of the website, the question is not really about how many images you are loading but how big are the images you are loading. The trick with images is that you still have to maintain a certain amount of detail in the image so as to maintain the quality standards of the websites imagery ye at the same time make sure your website performs, luckily there is the solution to this, if you have access to photoshop of fireworks you you should save you images using the Save for web and devices feature you can access it by clicking :File -> Save for Web and Devices -> or you can download a host of other tools you can use online which can do the job for you namely Kraken, Trimage and Yahoo’s Smush.it

Join us in the second part of this series, were we discuss the remaining solutions for your underperforming website.