Improve loading times for better rankings, conversions, and sales.
A good page speed is essential for the success of an online store. Because good loading speeds are not only important to improve Google's ranking and thus increase traffic. Fast loading times also increase the user experience and can thus significantly and sustainably increase the conversion and sales of the store.
In this article, we have put together 15 tips for you that can significantly optimize the page speed of your eCommerce store.
15 Tips for Page Speed Optimization for e-commerce stores
1. Compress images for better page speed
Images that are too large and uncompressed are often largely responsible for poor loading times in online stores. Therefore, you should not only adjust the size and compression but also remove irrelevant meta information in order to minimize the data volume of the images. Here are the details on size, resolution, and data format in detail:
- The recommended size for product images: is 2800 x 2800 px, 72 dpi, JPEG format
- The recommended size for other images (e.g. headers): max. 1920 x 1080 px, 72 dpi
- Image format: JPEG or PNG (in the case of transparent areas in the image)
You can resize and resize images using free tools like GIMP. To compress images, we recommend the TinyJPG tool, which is also free and automatically compresses images. TinyJPG also removes unnecessary meta information during compression (e.g. photographer's name for photos).
Incidentally, TinyJPG is also available as a (fee-based) plugin for some shop systems, for example, Magento or Shopify. If this plugin is installed in the store system, it automatically compresses new images that you upload. The manual and time-consuming compression of the images before uploading them to the respective shop systems is then no longer necessary.
2. Optimize web hosting
In general, you should host your online store with a hoster that offers high-performance hosting packages for online shops. For example TimmeHosting or Mittwald . If you have a contract with a smaller host that only hosts web shops on the side and does not offer a high-performance web server ( Apache or Nginx), you should consider changing the server.
If your shop loads slowly, it often helps to switch from one hosting package to a more powerful one that has more processor cores and offers more RAM and storage space. Changing the hosting package can already optimize the page speed, for further improvements in the loading time, detailed settings may have to be made with the hosting provider.
3. If necessary, change the store system
Many all-in-one store systems offer all services from a single source, from ready-made shops to hosting. It is often the case that no settings can be made with integrated hosting. If this is the case, you should switch to a shop system where you can freely choose the hosting provider and make the necessary configurations. For small stores with few products, we recommend WooCommerce, for stores that are large and offer many products, we recommend larger solutions such as Magento or Shopify.
4. Use AMP
AMP stands for Accelerated Mobile Pages and is a standard for websites and online stores that are used on mobile devices. To put it simply, AMP strips the HTML code of information that is irrelevant for mobile devices. This can significantly improve the loading time when using your shop on mobile devices. With this standard, it is possible to load online shops relatively quickly with a smartphone and a slow internet connection.
Especially in times of increasing mobile Internet users, especially in online shopping, you should use this standard for your shop. Most professional shop systems can be expanded with a corresponding plugin, e.g. B. with the AMP for Magento.
5. Reduce HTTP requests
When a user calls up your online store, he must send an HTTP request (HTTP request) to the server for each new source. A source can be images, text, or tables. Each call costs loading time and reduces the page speed of the store.
In order to optimize the page speed of the shop, the necessary calls should be reduced. Appropriate means of reducing HTTP requests are the compression of images, the summary and outsourcing of CSS in external CSS files, or the use of AJAX. AJAX enables the asynchronous loading of content elements (e.g. texts) e.g. B: when scrolling down in a shop. Only part of the shop page needs to be reloaded, which saves resources and improves loading time.
6. Use External CSS
CSS contains information about the layout, colors, font, and other design details of websites and online stores. It is possible to keep a CSS file (inline/internal CSS) with information for each subpage of a shop. This costs loading time and slows down the shop. It is better to integrate all information about the design and layout in a separate CSS file (external CSS). This way your online store will run faster.
If you want to speed up your e-commerce store
get in touch with our team, please fill out the form.
7. Reduce CSS and JavaScript files
CSS and JS files can contain unnecessary information (e.g. spaces) that are ballast for the online store source code. Online stores with bulky source code load more slowly. By removing z. B. spaces, the source code can be reduced to just one line, which is beneficial for page speed.
There are various tools for compression. For example the YUI Compressor for CSS files and the Closure Compiler for JavaScript.
8. Load JavaScript at the end of the source code
Your web store will not be fully displayed in the browser until all JavaScript files and CSS files have been fully loaded. Placing JavaScript files at the end of the HTML code improves loading time. However, the CSS files must be placed in the head area of the source code so that all graphic elements of the shop are displayed correctly.
9. Use CSS sprites
CSS sprites are CSS files that consist of multiple individual images. In CSS sprites e.g. B. several icons or all background images can be combined on one page. CSS sprites can optimize the loading time of an online shop since the browser only needs one request instead of many individual requests to load and display all the images on a subpage. CSS sprites can be created with generators. For example with the sprite generator from Toptal.
10. Use server-side caching
With server-side caching, HTML documents containing important elements of the stores are cached on a server. If a customer calls up a sub-page of your shop a second time, less content has to be loaded because the most important elements of the page are already in the cache.
11. Minimize external scripts
Share buttons for Facebook and Pinterest or tracking codes from e.g. B. Analysis tools contain scripts that can have a negative effect on the page speed of the online shop. Therefore you should only install scripts that you really need.
So if no user shares an article in your blog via share buttons for Facebook or Facebook touch nobody shares a product photo of your shop via Pinterest, share buttons in these places make little sense. Tracking codes should also be reduced where possible.
Additional tips for the sensible use of external scripts
- You should use asynchronous scripts in your online shop that only load when the page is fully rendered
- If you use the Google Tag Manager, only a code snippet needs to be integrated into the HTML page (various tracking services can run via the Tag Manager)
- Use iframes in moderation (e.g. YouTube videos over an iframe)
12. Use a GZip compression
GZip is a compression program with which e.g. B. a complete online store can be compressed. Thanks to GZip compression, a web browser needs less time to display the online store. This improves the loading time of the online shop.
Online stores and of course websites can be compressed relatively easily with GZip. To do this, some code passages must be written to the server's Apache or Nginx module and to the .htaccess file. If you have any questions about the technical details of GZip compression, please feel free to contact us. To the contact page.
13. Use prefetching and prerendering
With the prefetching technique, certain elements (photos, backgrounds, CSS) of the online store are loaded in the cache before the shop is fully rendered. In this way, these elements can be loaded without worsening the overall loading time of the shop. In order to use prefetching in the online shop, the source code must be supplemented with a few lines of code.
With pre-rendering, all the content of an online shop or website is completely downloaded and cached. The already preloaded page is then displayed very quickly when the user visits it. In order to use prerendering, a coded passage must be inserted in the source code of the online shop. We would be happy to show you exactly how this works. To do this, contact us via our contact page.
14. Use a Content Delivery Network (CDN)
On a content delivery network (CDN), certain elements of an online shop (e.g. product photos) are stored decentrally on different servers. The servers are distributed worldwide and, if possible, close to the respective customer who calls up your online shop. With a CDN, the loading time of the store can be significantly reduced, since the content with high data volume is no longer loaded via the shop server, but via external servers. In addition, different data (texts, photos, backgrounds) can be loaded from different servers in parallel, which would not be possible without a CDN.
To use a content delivery network, you need to register with a provider. For example, at Amazon CloudFront, the use of the CDN is free of charge for the first year under certain circumstances. After registering, you have to generate a code in the Amazon CDN and integrate it into your online shop via a plugin. We would be happy to show you how this works.
15. Streamline the source code of the online store
When a customer visits your online store, the web browser reads the store's HTML code line by line. Unnecessary characters such as line breaks or spaces are also read out. This unnecessary code ballast can worsen the loading time of the online shop, so the source code should be cleaned up.
This way the source code can be cleaned up
- All unnecessary white spaces and line breaks should be removed
- Unnecessary comments in the source code should also be removed
- Unnecessary formatting in the source code (e.g. <h2></h2>) without content should be deleted
How exactly you can free the HTML code from unnecessary ballast, we will be happy to explain to you in a non-binding consultation.
Contact us for advice on page speed optimization
We would be happy to discuss the possibilities of loading time optimization for your online store with you in detail. After the consultation, we would be happy to create a catalog of measures to improve the page speed of your store. Here is our contact page. We look forward to talking to you!