Why Speed is Important

And how your web hosting affects it

There are numerous reasons why the speed of your website is very important, if you would like it (the website that is) to be a successful and well visited one, but we can usually narrow them down to just three:

• SEO and organic search traffic
• Better user experience
• Better user conversion and retention.

How speed affects your SEO ranking

Undoubtedly, the best source of new visitors for a website are search engines. It is also considered the cheapest way to drive organic, natural (i.e. no bots, crawlers or any automated software) traffic to your website, but it is also undoubtedly the hardest one to achieve. This is mainly due to the fact that your site ranking is calculated using many different factors. One of those factors is how fast your website is loading, both in terms of initial reply (the so called TTFB or time-to-first-byte) and in terms of structure and content (i.e. how much time does it take for a browser to do its first/largest paint for example).

While the structure and content is mainly a design/development issue, the time to first byte (TTFB) depends entirely on your web hosting infrastructure. To better explain why this is the case, we need to look at what TTFB actually represents. It is the total time required by a visitor to perform the following actions:

• Resolve your domain name to an IP address. 
• Initiate a network connection to the resolved IP address.
• Send a request for a specific page.
• Receive a response with the web page contents.

On the hosting server side, after the request has been sent and before response is received, we also have the following processes taking place:

• The web server software (i.e. Apache/Nginx/Litespeed etc.) receives the request.
• It sends it to the underlying dynamic language used (for example, in case of WordPress that would be PHP).
• PHP, or whatever language is used, will then need access to the file system to read, parse and compile the files of your website.
• It will (usually) also require an external connection to remote APIs or databases to fetch any required data to render your page.
• Finally it will compile an HTML response, send it back to the web server, which in turn will send int back to the visitor.

All of the above steps will require the server to have a fair amount of resources available to handle the request. What I can recommend you (and what we have included in our WordPress hosting package at Infinyhost.com) is to look for a hosting package containing:

• As much CPU/cores as possible. It's a no-brainer. The CPU is the heart of the computer and the more of it you have, the faster each operation will perform.
• A sufficient amount of RAM. While physical memory is not directly tied to the speed of your website, you might (and should) want to optimize the performance a bit further and cache some of your pages. The cache is usually stored in the memory, since it allows blazingly fast read/write access to the data and thus having more RAM means you can cache more pages and more cached pages means your website will eventually be much faster.
• An SSD based storage. The time of mechanical drivers (unless we are talking about some cold-storage backup archive system, but we are not) is long over. SSD provides enormous performance improvement in accessing and reading files and your website will feel much faster when hosted on a server with SSD storage. Why this is very important: PHP (or whatever language you are using) will read all of your website files, parse them and compile them to internal byte code, each time a page is visited in order to generate a response. A fairly modern website can consist of well over 10,000 files, which means that each time someone opens your website, 10k files are being read (roughly speaking, not taking into account any FS caching or opcaching) so the simple math shows us that the faster the files are read, the faster PHP will compile them and the faster your web page will be rendered.

Better UX, conversion and retention

The other very important reason you would want your website to be as fast as possible is the overall user experience. This is especially true in the e-commerce sector or if you are trying to sell something to your visitors. We, as a human beings, are guided by our impulses, even though most of us will deny that. It is the time between "I want that!" impulse and the inevitable question "Do I really need this?" that makes a sale and if your website is slow and is wasting that time, you will end up with a lot of abandoned shopping carts. 

When it comes to user experience however, we must mention that the speed is not an exact measurement, but instead we are talking about 'perceived' speed and how fast we think a website is, rather than how fast it actually is. This is usually measured by a so called 'Largest Contentful Paint' time or to put it simply, how fast your browser will paint the largest chunk of your website contents. It's affected by many different factors, but to improve it you would usually:

• Reduce as much as possible the TTFB, since it happens before any additional resources are being loaded.
• Reduce or eliminate CSS files being loaded in the section of your page. These are render-blocking resources and will not allow your browser to render the page before the files are fully loaded. Some ways you can optimise this: 
  • Combine multiple CSS files into a single file. A process also called uglyfication, because it usually makes the otherwise readable CSS files, almost unreadable to human beings. Please note, however, that loading order matters and you should try to combine them in the same order as they are loaded or some elements on your page might be styled using different rules.
  • Eliminate unused styles. You can easily see which styles are being used by a page in Chrome's developer tools. Eliminating those you do not use will reduce the CSS files size and thus the time it is needed to load it.
  • If the style sheet rules number isn't really that large, replace the CSS rules with inline rules. This however will make it impossible for subsequent request file caching to be applied so it must be used with caution.
  • Async load the CSS files. The method I prefer to defer-load css files is by setting the media type to 'Print' until the resource is loaded and then use the onload method and set the media back to 'All'. By doing this, the CSS files are no longer blocking the rendering of the page and will be applied only when they are fully downloaded by the browser. One downside of this method is that it will probably trigger a re-render of the page, resulting in a "screen-flicker" on slower devices.
  • Finally, but probably the easiest solution is to set the resources to be loaded from a CDN. Loading data from a geographically closer location to your visitor is providing tremendous improvement in the perceived speed.
• Reduce or eliminate the JS files being loaded in your <head> section of your page. Just like CSS files, the JS files in <head> are also blocking the page rendering. It is usually fine to move them just before the closing </body> tag, since most of the time the code will fire only on full page load, so it doesn't really matter if its in the <head> or not.

How your web hosting infrastructure and software can help you with the above? Naturally, the TTFB affects the perceived speed, but we already covered that in the SEO section above, so the same apply here. Apart from that, your hosting software should allow you to easily manage your CSS and JS files. Tools like https://www.npmjs.com/package/uglify-js and uglify-css should either be readily available or at least installable on your hosting account. A static caching mechanism should be made readily available to you so static files (i.e. js, css, images, etc) can be cached and serviced much faster. Finally, an option to enable CDN should also be available in someway.

Needless to say, our WordPress hosting package at Infinyhost.com has all of the above and more. You can take advantage of the pre-installed NodeJS and have both uglify-js and uglify-css installed with a simple 'npm install' command and our LiteSpeed integration, together with QUIC.cloud provides unmatched 'speed-buff' to your WordPress based websites.