What is page speed optimization?
Page speed optimization means improving the loading time of web pages. This is done by serving less files, and making sure the files are as light as possible, without cutting into the quality or functionality of a web page's web design.
Our websites and webshops all get a page speed optimization, because a good page speed is an important part of search engine optimization (SEO) and conversion.
User experience, besides page speed, is also important for SEO. Google's new ranking factor Core Web Vitals is all about page speed, interactivity and visual stability. Those are two extra factors that are part of conversion rate optimization (CRO).
How we help
Page speed depends on a lot of different factors, but not all factors are worth the effort to optimize a website's page loading speed. We would like to explain to you what we do to optimize the page speed of your website/webshop.
IntroductionOur approach
Optimizing images
We make sure that your website serves images in a modern file format, and the images are not larger than necessary.
This way, web pages on your website or webshop will not get as heavy and will thus load faster, especially for visitors with a limited downloading speed, such as 3G, 4G or 5G (mobile network).
Step 1
Lazy loading images
Lazy loading images means that images are only downloaded when they enter the viewport (with a threshold).
Normally, all images of a web page are downloaded - even images that you don't even see yet. That is inefficient, because then you would have to wait longer for a web page to completely load.
Step 2
Combining files
Combining files to a single file, makes it so that your web browser has to send only a single request to the website's server, instead of 15 seperate requests to be awaiting a response for. We apply this optimization to CSS and JavaScript files.
Step 3
Minifying files
Minifying files means that we remove all the characters and data from a file that is not necessary for the file to be functional. Developers make use of spaces, line breaks, quotation marks, and other characters. This way they make it more readable for themselves, but this does not matter for the web browser. The web browser will ignore the unnecessary data anyways.
By removing all unnecessary characters and data from a file before sending it to your web browser, we end up sending you a file that is not as heavy as a file with all the unnecessary characters and data. This will have an impact on the weight of the web page.
Step 4
Preloading files used by all pages
Websites often have files that will appear on every single page. Therefor we can send those files alongwith the main document, which is the HTML file, so that the web browser does not need to send a seperate request for that file that we just preloaded.
This will cause the first package to be a little heavier, but as long as the preloaded file is not very large, this will do more good than harm; it will make sure that the process of loading a web page will run smoother and faster.
This method (preloading) is only available for websites that make use of HTTPS with a valid SSL certificate.
Step 5
How do we measure page speed?
We use tools that are specialized for testing speed of websites and webshops at desktop devices as well as mobile devices.
We use the following tools for measuring page speed: PageSpeed Insights and GTmetrix.
PageSpeed Insights
PageSpeed Insights offers the possibility to test page speed not only on desktop devices, but also mobile devices - for free. However, the test results of PageSpeed insights can fluctuate. The tool tests from the United States, so the measured loading time may be lower if the server of your website is located outside of the United States. This is called latency.
PageSpeed Insights is a tool developed by Google. Since April 2020, Google has a new kind of quality signals that they will use as a ranking factor for their search engine: Core Web Vitals. They are planning to use these signals in ranking in June 2021.
GTmetrix
GTmetrix offers free testing of the page speed of your websites and webshop, with a choice between locations where the tests would be taken from. They have many more options on top of that. The downside of GTmetrix is that testing page speed on a mobile device is not free, and that you need an account (which is free, though) to be able to use options like testing from a different location.
We notice that the test results of GTmetrix are more stable. GTmetrix gives a clear overview of many different possibilities for optimizing the page speed of your website or webshop. GTmetrix also offers you the ability to take snapshots with film strips, and even a video of their tool loading a web page of your website or webshop.
GTmetrix also keeps a history of all of your tests, so that you can compare older test results to newer ones.
What causes loading time?
Seeking server and sending a request
If you enter the address (URL) of a website or click a link, then your browser will first figure out which server it needs to send a request to in order to receive a web page as a response. This process is part of the Domain Name System (DNS).
You can basically compare it to a contact list of the internet – you can't just enter Jennifer as a phone number to call, because your phone needs a phone number. However, you linked Jennifer to a phone number, because she is in your contact list.
It works the same way for URLs (addresses of websites) – a recognizable name gets converted to an address that your web browser understands. Your web browser will browse the contact list and will call the number when it has found the right number.
Your web browser will make it's request by calling the right server.
This sounds like a long lastig process, but this only takes between 20 and 120 milliseconds (0.02 - 0.12 seconds).
Waiting for a response
After the server of the website has received your request, it will generate a response. Waiting for a response of a server takes, on average, between 200 and 500 milliseconds (0.2 - 0.5 seconds). This depends on how busy the server is, how powerful the server is, the configuration of the server, and whether or not the server uses caching.
We use LiteSpeed Cache for our clients' WordPress websites, which is the most advanced caching tool available for WordPress.
Web browser receives an incomplete package
The server send an HTML file to your web browser as a response. That file contains the content of the page with references to all files that the web browser needs to style the bare content and to give it additional functionalities.
Web browser downloads the necessary files
CSS files are responsible for the styling of websites/webshops. JavaScript files offert additional functionalities, such as an expandable menu for mobile devices. Besides those files there are images, which are also files, that need to be downloaded by your web browser to be able to show them. If the file size of images are not optimized, then the loading time of the web page can increase rapidly. If a web page requires lots of files, then it costs the web browser extra time to download these.
Your web browser send a request to the server for every single file. This will not cause a great impact when it comes to one file, but when it comes to sending 50 seperate requests to a server, and awaiting a response for each of those, will take lots of extra time.
Web browser will draw for you
Your web browser now has both the content of the page and all files, which when put together will determine how the page will look.
Your web browser uses the CSS files to style the bare content from the HTML file: the web browser will now draw the page for you.
CSS files contain queries for elements such as paragraphs, headings, links, and buttons. Every query also has a description of what styling will get applied to elements that are found through the query. When written in an understandable way, for instance:
Search for all links, underline them, and make them dark blue.
If the visitor hovers on this element, then remove the underline temporarily.
This is not litteraly what is written in those CSS files, since this is a translation from code to something understandable.
If a CSS file contains a lot of queries with a lot of changes to a lot of elements at the same time, that will cost your web browser extra time to be able to draw the web page for you. CSS files by themselves do generally not create a huge impact on the page load time.
This is where JavaScript is good at, slowing down pages. JavaScript can make changes to the HTML file, which carries all the elements that will be styled by using the CSS files. Some changes will change the outcome of the styling, because certain queries will apply to new elements or elements that suddenly got a new class name due to execution of a certain JavaScript file.
CSS files refer to class names in their queries, so if class names are removed or added to elements in the HTML file, then the web browser has to redraw the web page, because the web browser does not know exactly what changes will affect what part of the web page. It is not a good idea either for the web browser to somehow find out what part of the web page to redraw, because that would be sensitive for errors, bugs, so the web browser would be better off just redrawing the whole web page.. thanks JavaScript..