How to speed up websites and e-shops?

Don't lose customers due to slow website loading

Let's start with some statistics. It is known that slow pages pave the way to lower turnover, abandoned carts, and worse search rankings. For visitors to your site to be willing to make a purchase or complete another goal, they must find it easy to work with the website.

• 37% of visitors leave your page if its loading time exceeds 5 seconds,
• 70% of customers admit that page loading speed significantly affects their purchasing behavior,
• 49% of mobile users are deterred by slow website loading when shopping online and switch to a competitor's site.

6 factors that influence the speed of (not just your) page

Have you ever noticed that the same page loaded faster the second time? The loading time of a website depends on many factors. We have summarized the important ones into six points:

• Loading of website codes and styles
• Image sizes
• CSS
• JavaScript
• Web hosting
• Connection stability

Now let's explore each of these reasons in more detail. 

1. Accelerating the website with suitable content

Texts, images, videos – in short, content. The reason people visit your website. A few changes can significantly increase the loading speed of the webpage. First, we set up the loading of key parts of the website through preload (what the visitor sees first – menu, carousel,...). For the rest of the page, which you scroll to and can therefore appear a moment later, we use so-called lazy loading. 

We use lazy loading for images, videos, iframe maps, pdf files, or svg icons editable from the CMS. Its advantage is that it can automatically determine whether the browser can display the webp format. If not, it inserts the file in jpg or png format. It also checks the width of the device the visitor is using and uses an image in the ideal size accordingly.

Caching or enabling the cache

A visible change in the loading speed of the website is also due to caching the website content. What this means: when your webpage is first displayed, most of its appearance is stored in the cache of the computer device. When someone visits your website again, the page loads faster due to the previously stored data. It makes sense to cache any files on the file system (such as images, videos,...) and all content generated from the CMS.

Caching also reloads and resaves content at regular intervals. This is also why, as a website administrator, you do not see your changes immediately after saving, but with a slight delay. However, this minor inconvenience is worth the speed increase that caching can provide.

2. Image compression reduces website size

One of the most common issues we encounter with slow websites is uncompressed images. Therefore, we always prioritize optimizing image sizes. At PUXdesign, we have found the webp format effective and subsequently generate images based on device size. We use different formats for classic desktops, tablets, or mobile phones. While this means more work, trust that it is worth it.

It is also worthwhile to save images with a resolution tailored to the website's placement (you can get by with 72 DPI). And if the image is not the first thing a visitor sees on the page, we use the aforementioned lazy loading.

3. We perform CSS code minification

If you have ever downloaded or exported a zipped file, you can easily understand the usefulness of CSS source minification. It involves consolidating all CSS files into one central file. This step visibly speeds up website loading. The second step is to remove all non-functional characters or spaces in the code itself. They are unnecessary and only slow down website loading.

4. We also do not forget JavaScript minification

Similar to CSS code, JavaScript can also be minified. You combine all used files into one main JavaScript file. For smooth page operation, you only include the most important JavaScript. For all other additional plugins, if they are truly needed on the website, use insertion via requirejs.

Facebook Pixel or Hotjar also deserve attention 

It may not be immediately apparent, but measuring JavaScripts can also play a role in website speed. We set up Facebook Pixel or Hotjar on websites so that their functions activate only 1.5 seconds after the page loads. This delay ensures that the measuring codes do not negatively impact the initial loading time of the website's content.

5. You can speed up your website with suitable hosting

Hosting also plays a role in page loading speed. Do you want Czech pages focused on domestic visitors? Then it makes sense to have web hosting geographically located in the Czech Republic. Keep two things in mind: find out its history and carefully check how often outages occur. You definitely don't want a website that is down at regular intervals. Finally, verify how the hosting technical support operates. If things get tough, you will need it.

Fast website even with traffic from around the world

What if you are a client who requires a website that loads quickly not only in the Czech Republic but worldwide? We can handle that at PUXdesign as well. For hosting websites with international targeting, we use cloud services like Amazon AWS or Microsoft Azure in combination with a CDN (content delivery network).

Another option we work with is the headless CMS Orchard solution combined with the JavaScript framework Gatsby. This combination serves only static HTML to the CDN, which loads very quickly.

6. Website Speed vs. Mobile Devices

It is no secret that a significant portion of visitors access the web from mobile devices. In fact, mobile web traffic accounts for just over 50% of global web traffic. Therefore, it is crucial to have sufficiently fast page loading for phones. Also, consider that mobile visitors often connect via data – the sizes of images, documents, or even gifs should reflect this. Nothing frustrates a person more than when visiting a single webpage consumes data for the entire upcoming month.

How to Measure Your Website Speed?

You already know everything important. Now you just need to find out where you can measure your website speed, ideally for free. Tools such as Google Page Speed, WebPageTest, TestMySite, Pingdom Tools, or GTmetrix serve this purpose. In the Czech Republic, Google Page Speed is by far the most popular among users. At PUXdesign, we most often work with Google Page Speed or Pingdom.

These tools can not only measure speed but also identify problematic areas on the website that need fixing. Occasionally, even an optimized website may present new recommendations or rules, so we constantly strive to monitor and adapt to them.

Some considerations can be made during the website creation process: do I need a bunch of external scripts on the website? Do I have a poor source code structure? Are the images used compressed? Some of these tasks you can definitely handle yourself.