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 ecommerce or content management 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

Guest Post

Google PageSpeed helps you to optmize your web design in order to improve both your users experience and your sites SEO ability due to faster page loading times. It’€™s a solution and set of tools that analyze the way websites run, enhancing operation and loading times significantly.

The Internet has become a day to day survival tool. Whether it’€™s for business or personal usage, people around the world are using the web to get a message across or to promote a product or service. It has become a vital component in marketing. Fast, optimized web pages are essential to getting high visitor engagement, conversion and retention. PageSpeed solutions can identify practices that should be applied to any site and aid in automating the process.

What Does PageSpeed Do?

Google PageSpeed captures content on servers and rewrites them. It does this by applying the best practices in web performance and provides that to end users through Google’€™s servers. Google doesn’€™t need specific information, administrative access or confidential data to effectively analyze a website. Instead, site traffic is directed through Google servers, allowing the analytical process and improvement to take place.

PageSpeed tools like Insights are an excellent way to examine websites and receive recommendations for manual improvement. It caches portions of HTML, grabbing non-cacheable components from original servers as needed. This takes place while other parts render to the user’€™s browser. PageSpeed prioritizes content above the fold of the browser.

Google PageSpeed Insights

Insights measures web page performance on both desktop and mobile devices, looking for ways to increase page speed loading time. Utilizing agents for each device, PageSpeed Insights scores individual web pages on a series of criteria. Insights will provide ideas for increasing the score and page optimization. Regardless of how high or low the score, if there’€™s room for greater performance, Insights will offer suggestions on what enhancement steps can be taken.

When assessing the speed of any web page, PageSpeed considers that the network connection always has an impact and differs from user to user. PageSpeed only factors in independent criteria in regard to page performance, including:

• Configuration of the server
• A page’€™s HTML structure
• Use of external resources
  • Images
  • JavaScript
  • CSS

While the performance of any web page will ultimately depend on the individual user’€™s network connection, Google PageSpeed offers solutions for improving the overall relative performance of web pages. The platform bases its suggestions on:

• Elapsed time between a user’€™s page request and the moment the browser renders the above the fold content.
• Elapsed time between a user’€™s request for a new page through the moment the page is rendered fully by the browser.

Once Insights has assessed the performance, its offered suggestions are graded on a priority basis. Red exclamation points indicate important fixes for optimizing page performance. A yellow exclamation point is a low priority suggestion, a fix that can be implemented if so desired. Green check marks means no major issues were found and no action needs to be taken.

PageSpeed Insights Mobile Analysis

While some might argue that the difference between a three second and one second load time isn’€™t significant, they would be mistaken. A faster load time indicates efficiency and professionalism and a user always takes note. Research shows even the slightest delay can interrupt the user’€™s train of thought. Google PageSpeed looks to hold user engagement, delivering pages rapidly, regardless of type of network and device.

What Insights does is allow users to interact with any given page sooner by delivering and rendering any above the fold content in under a second. This way, the user is already viewing content as the rest of the page is delivered in the background.

Engineering a one second above the fold page load is a unique challenge. It’€™s not only a matter of different browsers and devices, there’€™s also a variety of networks in play like 2G, 3G and 4G. 4G deployments is easily becoming the dominant network connection for mobile devices, but there is still plenty of market for the slower ones.

With that in mind, PageSpeed takes into account the communication sequence between servers and browsers. It looks to budget the milliseconds that occur between user requests and page loads. It gauges render response time, execution of client-side application and browser layout with content rendering.

Server response time is that time the initial HTML’€™s return takes. Redirects can add unnecessary hundreds of milliseconds to a page request, especially on a slower network. PageSpeed encourages minimizing redirects or eliminating them completely.

Another consideration is round trips to the first render. For the sake of speed, these should also be minimized. Often, a new TCP connection may not use full available bandwidth between server and client right away. This can result in the server sending almost 10 TCP packets for a new connection in the first trip. Now it will wait until the client acknowledges this action before delivering additional data. Fewer round trips can significantly decrease the render delay.

Optimizing content to minimize round trips is critical to the delivery of necessary data for that first render of the web page. Any content under 14kb can get a page painted after a single trip. Also, before browsers render pages, it has to parse that web page. Unfortunately, each time that happens, there is another network round trip which delays the page render time. PageSpeed can offer potential solutions to bypass these issues and get the average page loading time down to a single second.

Using PageSpeed Insights

For now the service is invite only. Fill out a form and request access. Once your registration has been approved, log in and agree to the Terms of Service.

On the Google Developers website, go to the main PageSpeed tools. From here, click on the Analyze Your Site Online option. Now, this does not mean the site in question has to be yours. PageSpeed will analyze any website that allows it. This means a site that is publicly accessible.

Enter a URL and select Analyze. The platform then provides a ‘€œdesktop’€ and ‘€œmobile’€ analysis of the site’€™s web pages. It will provide a score between one and 100 for speed and performance. This number doesn’€™t reflect actual load time. It indicates how the page could go faster.

One doesn’€™t need to be an ace webmaster or developer to work with PageSpeed’€™s results. The results suggest changes for site optimization ranked by scales of High, Medium and Low. There will be links like Learn More for gathering helpful information. There is also an option called Already Done! that shows what has been accomplished to improve performance.

Google PageSpeed attempts to keep its suggestions as simple as possible. It might suggest Leverage Browser Caching or Combine Image into CSS Sprites. If one isn’€™t clear about the procedures, the link will definitely help.

What’€™s best about the process is nothing is required of you. If one is comfortable with the way their website is running, any PageSpeed suggestions can be taken with a grain of salt. On the other hand, only suggestions with the red exclamation points need serious consideration if one is interested in improving web performance. Yet, even then, ignoring the suggestion won’€™t impact any part of the site’€™s current performance.

Google strongly suggest any changes be thoroughly tested in development before final application. One should also familiarize themselves with terminology by reviewing the Google PageSpeed Insights guidelines.

Conclusions

Site optimization is critical to maintaining one’€™s presence on the Internet. The tools provided by Google PageSpeed analyze and offer suggestions for optimal performance. Currently, PageSpeed is a free trial. One can test its potential on your own website or any other public website, getting a strong idea of how it works. It won’€™t take long to see how Google PageSpeed can effectively and efficiency improve the performance of a website and one’€™s overall Internet presence.

About the Author

James Patterson is Simple iD’s lead online marketing consultant. Simple iD is a full service online marketing agency that offers clients everything that they need to succeed online, from web design and development to a complete tailor-made online marketing package. Come and check us out on Facebook.