Speed not only impacts search engine results, but it also provides the user with a better experience. This significantly increases the chance of conversion. Large online market leaders have each tested what the influence of loading time is on online conversions and transactions. From these studies, the same conclusion has emerged: every second improvement in page loading time corresponded, on average, to a 2 percent extra conversions. Moreover: every 100 milliseconds improvement even led to an average of 1 percent growth in revenue.
With a website that loads faster, you hit multiple birds with one stone: more traffic is generated through better indexing and additional appreciation from Google, and the people visiting your website are more inclined to make a purchase. A third benefit is the cost savings due to reduced data consumption.
Why is a website slow?
A website can be slow due to several factors. One factor is the server environment. When there is significant cost-cutting on the server environment, there is a good chance that the server your website is running on also hosts many other websites. This means that all requests and calculations from these websites must also be processed. This adversely affects the overall server speed.
A second cause is the size and structure of the content on the website. By content, I do not mean plain text, but particularly images, videos, and scripts. For every page that loads, the server must load the content from a database. The more and the larger the content on the page, the more frequently the server must request the data from the database, and the larger that data is. You can probably guess: due to the many and large requests the page loads slower than if you just had one sentence and no formatting on a page. But yes, on such a page, conversion is not possible. The way to make your website faster, aside from choosing a good server environment, is to reduce the number of server requests, or in other words, the data the server must retrieve once the page is loaded.
If the visitor to your website has a slow internet connection, an outdated browser, or a slow computer, it also affects the loading time that your user experiences. There is always a difference between the loading time from the server and the loading time experience of the user. Unfortunately, these are uncontrollable factors.
Measuring the loading time of your website
There are various tools and web-based programs that allow you to measure the loading time of your website. These tools not only provide insight into the loading time but also show exactly where the bottlenecks are and what you can do to speed up loading time.
Yslow: you can download a Mozilla or Chrome extension for this
Google Analytics: Behavior -> Sitespeed -> Overview (NB: Be aware that 1 percent sampling data is used, you can set this. It is also possible to get all data visible)
How you can (have) make your website faster
To return to my first paragraph, where I indicated that you have the option to make your website faster: if you have the right programming skills, that is absolutely possible. Are you a business owner who depends on a web developer? Then they will have to take care of it for you.
As few http requests as possible
As noted above, it is important to reduce the number of server requests. But how do we do that without compromising the content of the website? I have a top ten tips for this, which are explained one by one below. There are of course many other ways to improve speed. More will be available on the Easy Blog about this in the near future.
1. Use as few CSS and JavaScript files as possible
CSS (stylesheets) and .JS (JavaScript) files can be combined, per type. By using fewer files, the server needs to retrieve fewer files. This benefits the loading time for other components. The best scenario means 1 CSS and 1 JS file, but that is often a utopia. Two to three files of each is often already a significant improvement.
2. Place CSS in the header of your website and JS in the footer
JavaScript often influences the style of a website and can therefore override rules from a CSS. To prevent this and to ensure that loading the often heavy JavaScript doesn't slow down the rendering of the rest of the website, JavaScript is better placed at the bottom of the webpage. Additionally, it is also possible to load all JavaScript directly with Headjs.com.
3. Minimize the CSS and JavaScript files
CSS and JavaScript files often contain a lot of pagebreaks, whitespace, spaces, and comments. These items unnecessarily enlarge such files. No matter how minimal it seems, if a CSS file has 2,200 lines, of which 20 percent is whitespace and 10 percent comments, that saves 680 lines already. When all the lines are then placed sequentially, resulting in effectively one long line in the CSS file, that also saves a large percentage. It's logical that this makes the files smaller and therefore lighter to retrieve.
4. Remove all comments from the HTML
Just like the CSS and .JS files, all comments and unnecessary lines can be removed from the HTML/PHP pages. This also reduces the size of the data to be retrieved significantly.
5. Remove all inline styles from the HTML/PHP
All rules related to styling should be in a CSS and not in the HTML. Styling rules in HTML are called ‘inline styles’. These inline styles are a mess in the website's code, because the CSS files are intended for styling.
6. Create standard images as sprites instead of separate images
A sprite is a file that holds all standard images of a page, and through CSS rules, it determines which part of the image is visible where. On Spriteme.org overviews can be created of which items can be included in a sprite. Do pay attention to the repeating images: do you need a vertical sprite or can everything be in one file? This way, only one image needs to be loaded instead of, for example, 12 separate files:
7. Optimize images to the proper format and provide dimensions in the code
The other images can also be optimized in size to save more space on the server and the page. By uploading the images in the exact correct size and providing the dimensions of each image in the code, fewer large files need to be loaded. Tools are available on Tinypng.org and Jpegmini.com to automate this.
8. Load static elements, files or images from a content delivery network (CDN)
It is also possible, and advisable, to host various components of the website not on your own server but on a cloud-based delivery network. The images, CSS files, page templates, etc., that are not on the website's server, do not need to be retrieved through your own network. By using a CDN, such as Cloudflare.com, elements load from an external environment that is also close to the users. This is relatively simple and significantly reduces data consumption. More information about CDNs can be found here.
9. Use as few (to no) cookies as possible
For every element on the website, it checks whether cookies have been set. The server is constantly searching for data in the communication to the user and therefore also requests the cookies each time. This check takes place during each load on each component on the website. Ensure that these cookies are not set to minimize the number of requests. This can be done through Apache header manipulation:
To disable the placing of cookies, you place the line:
This does not apply to third-party cookies, so web statistics are still measured.
