Master Your Website Speed with these Free Tools

Speed matters! At least as far as getting the right information at the right time is concerned. When surfing the Internet, one of the most noticeable aspects about a website is its loading speed. After typing in a URL or clicking on a link, everyone expects to be directed to their desired website in under a second, or if not, in at most 2 seconds. And any website that takes more than that to serve information starts getting on a user’s nerves. End result – the user switches to another website that serves the data he’s looking for faster. After all, in this busy world no one has the time to wait around for webpages to finish loading.

That need to get hands on information in the shortest possible time has given rise to quite an apt website design requirement – if it’s not quick enough, it’s not good enough. But this mantra is often a tough one to live up to, especially for websites that have a lot of dynamic content on their homepages. Designers and developers in the field keep struggling with strategies to bring the time needed to load websites to as low as possible so that their potential customers don’t turn away without even checking out their content.

Huge shout out to all you guys out there who’re doing this every day. We understand the kind of pressure you have to live up to in order to make your website as content-rich, engaging, unique, and light-weight as possible while ensuring that it opens up in under a second every single time.
But we also give due credit to the fact that Internet users in general are not very patient; doubly so when they’re surfing through their mobiles. Thus, as a designer, you’ve got to make sure your website is as nimble as it can be so that your organic traffic doesn’t get redirected to another website due to loading lag. And helpful as we are, in order to assist you with this little predicament we’ve compiled a list of easy ways that you can use to improve your website’s loading speed. Check these out and try them when you can. We’d be thrilled to know how they worked for you.

Why quick response is an absolute must for websites?

Regardless of how novel your product or how reliable your services, if you’re unable to showcase your stuff to the world within a couple of seconds, you will most certainly end up with loss of incoming business. At any point in time, there are more than one companies offering the same line of products and services (in other words, you always have competition). If you don’t make sure your product is the one a customer views first when buying, well, you’re practically landing your competitors the deal gift-wrapped!

Let’s take a quick look at the core statistics that prove our point:

• As per a study conducted by Amazon¹, for every 100ms of improved page load time, revenue increased by at least 1%
• Reports¹ claim that Shopzilla started making about 12% more revenue by simply cutting its page load time from 6 seconds to 1.2 seconds. Plus it helped bump up their page traffic by 25%
• On the adverse side, an experimental deliberate¹ 2 second slow down of search query results by Bing resulted in a 4.3% decrease in revenue per user

Sufficient to say that a website that takes too much time to load is bound to suffer from a reduction in conversion rate and loss of new customers. This fact is restated by a survey result¹ which says that to 39% of everyday Internet users, performance is more important than the functionality of a site.

Impact on organic traffic

Page loading speed is a significant factor in determining your website’s Google ranking. A while ago Google started to consider page speed when evaluating websites; as a result, a website that is too slow to load isn’t considered that useful. So even if your website content is great, it won’t show up within the first few search result pages if it is taking too long to load.

Now that you know the why, we’re sure you want to know about the how.

Tricks & Tools to help you speed up your website’s loading time

There are a whole bunch of articles out there that can help you with tips for enhancing your website’s loading speed. Herein we’re making you privy to the actual tools which can help you apply the tricks you’ve read about to bring in some real change. Every tip is accompanied with the names of tools you can use to really experience the effect of that the tip.

Measure your website’s current loading speed

First, you need to know your starting point (a.k.a. how bad it is). Find out your website’s current loading speed using any of these tools:

• Google Page Speed Insights & their Mobile Website Speed Test module – Online page speed test site which provides some great insights on what you need to do to improve your site’s performance. These tools help you detect the exact pain points which play the role of bottlenecks to your website’s loading speed. On running the test your website will get a score from 0-100. If it ranks above 90, you’re in good shape. Otherwise it might do you good to heed Google’s suggestions on why your page is loading slowly and how you can improve it.
• WebPageTest.org – One of the most versatile page load testing tools which can test your website from multiple locations worldwide, using real browsers. By default it makes 3 runs and then displays loading times, detailed waterfall chart, request details, and of course, optimization suggestions. It also has its own grading scheme (6 grades from F to A). It can even capture a video of your website loading.
• GTmetrix – Provides a great analysis of websites by giving grades on both Page Speed and YSlow. In addition to measuring speed, this tool also gives you info about why your page speed is slow.

After you’ve found out if your page speed is slow, use one or more of the below mentioned methods to pump it up a notch. Also, during the entire process ensure that you verify the impact every modification has on your website’s speed by repeating this step.

Optimize Images

It’s a no-brainer that the heaviest component of a post is its images. Large sized images are the prime contributor to slow loading websites. But that doesn’t mean you shouldn’t be using them to enhance your text. You just need to compress them with the right tools to ensure they reduce in size and load much quicker. You can decrease the size of bitmap files with lossless compression using:

• TinyPNG (works for JPG as well)
• Optimizilla
• Compressor

And while you’re at it, you may also want to optimize animated GIFs and SVG vector images using tools specific to those kind of images. A great tool to optimize GIF images is ezGIF and SVG Optimizer by Peter Collingridge works great for SVG images.

Bonus Tip: While compressing is a great idea, you should probably keep evaluating the real need of all those high-res images on your website.

Optimize Site Code

In addition to reducing the size of images, you can also reduce the overall size of your code. Known as “code optimization”, this mechanism reduces the load that is sent to the browser by removing unnecessary characters like spaces, tabs, end of line, etc. You can minify any kind of code that’s sent to the browser – HTML, CSS, or JavaScript. Also, you can apply smart techniques like moving web resources such as fonts, CSS files, and JavaScript to the bottom of the page to facilitate the loading of text before other web components; that way if by chance your images or videos take a couple of seconds to load, at least the user can read your content and be engaged. You can optimize website code manually or use a tool like Refresh-SF or Minify Code for the purpose.

Use Caching

Browsing caching is primarily applicable to websites with a database connection such as content management or ecommerce platforms but it can be used for all websites in general. The idea behind the concept is to set an expiry date, or a maximum age limit, in the HTTP headers for static resources like images, CSS, JavaScript, PDF files, etc. Caching basically saves “snapshots” of your webpages and delivers them as static HTML which is the fastest way to access data on the web. Thus by enabling caching, browsers automatically load previously downloaded static resources from local disks rather than over the network thus avoiding direct data requests to the database, which in turn contributes to a quicker loading time for your website. Check if your website makes use of caching with Browser Caching Checker. To enable caching on your website you could either make direct code changes through scripts or use a plugin like W3 Total Cache for WordPress or WP Super Cache.

Bonus Tip: In quite a few cases, a not-so-great hosting provider can impact page speed for websites with databases. Thus, before you spend time on caching optimization, it would be a good idea to think about choosing a better hosting provider.

Generate CSS Sprites

Another great way to ease some load off your website is to use CSS Sprites. This technique essentially combines multiple small images (icons, buttons, etc.) into a single file called “sprite” and displays them at once. By combining smaller images into a single larger one and requesting for that single large image you’re effectively reducing the number of HTTP requests the browser has to make and thus contributing to a faster loading website. You can easily generate such merged files and obtain CSS code at the same time with CSS Sprites Tool or CSS Sprites Generator.

Check GZIP Compression

GZIP is a file format and an algorithm used for file compression and decompression. It is widely known to save 50 to 80% bandwidth, significantly increasing website loading speed and is thus recommended by page speed tools like Google Page Speed. In fact if GZIP compression is turned off for your website, these speed testing tools will tell you that and suggest you to switch it on. With Check GZIP Compression you can check really quickly if the compression is present and see how much transfer is saved thanks to it.

Use a Content Delivery Network (CDN)

While the Internet is one big invisible “connection” of networks spread across the globe for which distances shouldn’t matter, the ground reality is that, the farther your website visitors are from the server returning the information, the slower your website loads for them. This is because data needs to go through more “Internet nodes” to get to those visitors. That’s why Content Delivery Networks (CDNs) were first thought of. A CDN is a high-performance network of servers that replicates the static assets of your website and serves them to visitors from the closest POP. Simply put, a CDN includes proxy servers located throughout the world. When visitors view your website, they will be shown content from the mega server that’s geographically closest to their location. This “clone-and-relay” action results in a much quicker serving of a website and it is this ability of CDN networks that has made them one of the most effective ways to supercharge your website’s speed.
You can check what CDN providers are used on a website with CDN Finder.

Edit .htaccess file to speed things up

Now here’s a real winner of a tip. A large portion of the server configuration required for speeding up a website is done via editing the .htaccess file. In fact, editing this file is the main way to implement GZIP compression and website caching. We didn’t find an on-line .htaccess file generator that would focus (or include) pro-speed code. Instead, we collected some of the best code snippets that repeatedly appear on many blogs and combined into kind of a boilerplate²:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
php_flag zlib.output_compression on
</IfModule>
<Files *.php>
SetOutputFilter DEFLATE
</Files>
<IfModule mod_headers.c>
Header unset ETag
Header unset Last-Modified
</IfModule>
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/cgi-php5
AddOutputFilterByType DEFLATE application/cgi-php53
AddOutputFilterByType DEFLATE application/cgi-php54
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:pdf|doc)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:avi|mov|mp3|mp4|rm)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
</IfModule>
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
</ifModule>
FileETag None

Just copy and paste this at the beginning of your .htaccess file and check the results.

Wrapping things up

We’re hoping the tricks and tools listed above will help you make your website significantly faster. It’s a great feeling when you’re closing in to a 100/100 Google Page Speed result. But don’t forget that your website is a live entity. It changes, so can its loading speed. Monitoring loading times is a smart move. It lets you react before users start voting with their feed and before Google decreases your website grade.

¹ Statistic data source: https://www.fldtrace.com/why-a-fast-loading-website-is-good-for-your-business
² .htaccess file based mostly on magento-htaccess