Your website operates slowly mainly due to suboptimal content, excessive resource usage, and inefficient technical practices, but there are effective solutions that can significantly improve its speed and performance. In this article, we will present three main categories that affect the performance of your website. Understanding them will help you take appropriate steps to speed up your website.
How to approach website optimization?
It's worth starting website optimization by removing or changing problematic elements before improving performance. Consider whether these elements are absolutely necessary. Sometimes simpler solutions can yield better results without harming the marketing message. Answer the question of whether these elements are really needed, or can your offer be presented in a more accessible way.
- Is this element really necessary?: Consider whether you can give up certain elements or replace them with less demanding solutions. Are pop-ups necessary on every page? Are videos on the first screen really necessary, or can they be placed in another section of the page?
- Optimize: If after analysis you determine that certain elements must remain, then focus on their optimization.
Effectively chosen content
It is important to make design decisions that bring the most benefits to users, without excessively loading the loading time. In this section, we will focus on three basic aspects that have a significant impact on website performance: placing videos, choosing fonts, and using pop-ups.
Do not use videos on the first screen of the site
A 5 MB movie can extend page load time by several seconds, especially for users with slower internet connections. For people using mobile internet, where stability and speed of connection are often worse, it can result in significant delay and resulting frustration.
Attractive graphics or animations can provide an excellent alternative to movies, attracting the viewer's eye with visual effects, with minimal impact on page load time.
- Replace videos with graphics: Use attractive static images or lightweight SVG animations that load quickly and do not burden the page.
- Use attention-grabbing banners: Design banners that can effectively convey the same message as a movie, but are much lighter for the page.
- Optimize videos: If you must use a movie, make sure it is properly compressed without significant loss of quality.
Limit yourself to a maximum of 2 fonts
Too many different styles and font weights can significantly slow down your site, as browsers have to download each of them before displaying content. Choosing two readable fonts and limiting yourself to 3-4 thicknesses greatly simplifies the page and reduces its loading time.
For example, downloading one font in four variants can take less than 200 KB, while downloading ten different fonts in many variants can exceed 1 MB. Therefore, we recommend careful selection of fonts that will support the clarity of the message and at the same time maintain the lightness of the page.
- Choose universal fonts: Go for fonts that are widely available and display well on different devices and browsers.
- Use variants sparingly: Choose a maximum of 3-4 variants of the thickness of a given font to avoid unnecessary page load.
Do not use too many pop-ups
Although pop-ups can effectively increase engagement or conversions, their excess can negatively affect the user's perception and page performance.
Each pop-up is an additional resource that must be loaded, which can delay access to the main content. When using pop-ups, bear in mind that it is best when they appear at the right time and are easy to close.
Simple, discreet pop-ups that do not require a lot of data to load and are optimized for speed can be a compromise between marketing effectiveness and page performance.
- Plan smart timing: Set pop-ups to appear only after the user spends a certain amount of time on the page, instead of popping up immediately.
- Keep it simple: Design pop-ups in a simple and clear way, so they are easy to close, preferably with a clear close button.
- Limit the use of pop-ups on mobile devices: On mobile devices, where the screen is smaller, pop-ups can be particularly invasive. Consider disabling them or adjusting them to a smaller screen size.
Technical optimization of the page
Technical optimization of the page is a process of adapting its structure, code, and content to optimize loading speed and availability for search engines.
It differs from other types of optimization, such as content SEO, which focuses on keywords and content quality, or conversion optimization, which aims to increase user actions on the site. Technical optimization directly affects the page's code - from minimizing CSS and JavaScript files, through image optimization, to improving server response speed.
This is the foundation on which all other strategies aimed at improving the visibility and effectiveness of a website are built.
Use preloading for faster content loading
Using the <link rel="preload" ...> element when loading resources can speed up the loading of key resources by 20-30%, significantly improving user interaction time.
Using this option is a hint for the browser to treat a given resource (e.g. script, image, stylesheet) with higher priority than others while loading and caching. For example, if this applies to an image and the user scrolls the page in search of further content, this image will be shown immediately, not just loaded.
- Use the
<link rel="preload">tag for critical resources: Use this tag for important scripts, stylesheets, and fonts in the<head>section of your page to reduce waiting time for their loading. - Limit preloading to necessary resources: Loading too many resources with the "preload" option can backfire. Focus on those that are critical for quickly displaying page content.
Unused compression techniques
Using tools such as Gzip for compressing HTML, CSS, and JavaScript files can reduce their size by up to 70%, which translates into faster data transmission over the internet and shorter page load time. For example, compressing a 100 KB CSS file can reduce its size to 30 KB. This makes the user's browser faster to download and interpret content, speeding up access to the page.
- Enable Gzip or Brotli compression on the server: Check if your web server supports Gzip or Brotli compression and enable it for all textual page resources.
- Minify CSS, JavaScript, and HTML files: Use minification tools to remove unnecessary white spaces, comments, and other elements not needed to execute the code.
Images without optimization
Uncompressed images can significantly load page load time, accounting for up to 50% of the total size of a webpage. Optimizing images by reducing their size without significant loss of quality, for example using the WebP format, can reduce their size by 25-35% compared to traditional JPEG or PNG formats. This directly translates into a shorter page load time.
- Use the WebP format: Where possible, use the WebP format, which offers better compression than traditional formats, while maintaining image quality.
- Optimize images before placing them on the page: Use image optimization tools to reduce their size before posting on the page.
Excessive number of HTTP requests
Each HTTP request to the server is additional time that the browser has to devote to downloading resources. Reducing the number of requests, for example by combining several CSS or JavaScript files into one larger file, can significantly reduce page load time. Pages that generate over 100 requests can extend the loading time by several seconds. Reducing this number to 50 requests can cut loading time by 20-40%.
- Combine CSS and JavaScript files: Reduce the number of HTTP requests by combining smaller CSS and JavaScript files into one large file.
- Use spriting for images: Combine smaller images, such as icons, into one large sprite file to reduce the number of HTTP requests.
- Use HTTP/2: Make sure your pages are served by HTTP/2, which allows for more efficient loading of multiple resources simultaneously.
Loading unnecessary code
Removing unused code, such as inactive JavaScript functions or excessive CSS styles, can significantly reduce file size and thus page load time. Techniques such as "tree shaking", which allow for automatic detection and removal of unnecessary code, can reduce the size of JavaScript packages by 30-50%. Regular audits and code cleaning are essential for maintaining high website performance.
- Use tree shaking in your bundler: If you use Webpack or Rollup, enable tree shaking options to automatically remove unused code.
- Optimize dependencies: Regularly review project dependencies, removing those that are unnecessary or replacing them with lighter alternatives.
Server-related optimizations
The speed of a website is not only determined by its content and structure, but also by the way it is hosted and served to users. Hosting problems, ineffective use of analytics tools, lack of caching strategy, or ignoring the benefits of content delivery networks (CDN) can significantly affect page load time.
Hosting problems
Hosting problems can include insufficient server resources, such as RAM and bandwidth, which are unable to handle the load generated by visitors to the site. This can lead to slow page loading or even its unavailability during peak traffic.
- Choose a server location close to your users: A server located geographically closer to your site's users can significantly speed up loading.
Inappropriate use of tracking scripts
Tracking scripts, such as Google Analytics or various advertising tools, are used to collect data on user behavior on the site. Although they are necessary for analysis and optimization of the site, their excess can significantly burden the loading time. Some of these scripts can block page rendering, delaying the appearance of content for the user.
- Limit the number of analytical and advertising tools: Each additional script extends the loading time. Try to use only the most necessary ones.
- Optimize script loading: Make sure scripts are loaded asynchronously so as not to block the loading of other elements of the page.
Lack of caching techniques
Caching is the process of storing copies of certain elements of the site, such as HTML, CSS, JavaScript files and images, on the server or in the user's browser, allowing them to load faster at subsequent visits. The lack of application of appropriate caching strategies means that the browser has to re-download the same resources with each entry to the site, which extends the loading time.
- Enable server-side caching: Set appropriate cache headers for static resources, which will allow browsers to store file copies for longer.
- Use browser-side caching: Make sure user browsers can effectively cache content, reducing the need for re-loading.
Not using CDN (Content Delivery Network)
A CDN is a network of servers located in different geographical locations that deliver website content to users with less latency, because data is transferred from the server located closest geographically to a given user. Not using a CDN can lead to longer page load times for users located far from the server where the site is hosted.
- Consider using a CDN: A CDN network can significantly shorten the time to deliver content to the user, storing copies of your site in many locations around the world.
Summary
Remember, the speed of your site matters a lot. Good server optimization is the basis for users not having to wait for content to load. Finding solid hosting, limiting tracking scripts to a minimum, smart use of caching, and taking advantage of the possibilities offered by CDN, can work wonders for your site's speed. Every saved second is a step towards a satisfied user and a better place in search engines. Don't forget to regularly review and improve your site from a technical point of view.
FAQ
How fast should my page load?
Your page should load in 2-3 seconds to keep the user's attention and encourage further browsing. With each second of delay, you risk losing about 7% of potential conversions. Pages that load in less than 2 seconds have higher user satisfaction rates and better SEO results.
What tool can I use to check the speed of my site?
Google PageSpeed Insights is a free tool that not only measures your page load time, but also suggests specific changes you can make to speed it up. It provides results for both mobile and desktop versions of the site, allowing for comprehensive optimization.
Is it worth using a CDN?
Using a CDN is definitely recommended, especially for sites with a global reach. A CDN can speed up the delivery of content to users, reducing the loading time by even 50%. This allows for faster content display, regardless of the user's location, improving the overall performance of the site.
How can I reduce the number of HTTP requests?
You can reduce the number of HTTP requests by combining multiple CSS or JavaScript files into one larger file. Another way is to use image spriting, which combines several small images into one larger file. Also, make sure your site is served over HTTP/2, which allows for more efficient simultaneous loading of multiple resources.
How to compress website resources?
Compressing website resources by using Gzip or Brotli can reduce their size by up to 70%. You can do this through the appropriate server configuration or through online tools before publishing on the site. File compression is essential for speeding up the data transfer time to the user.
Does too many tracking scripts affect the speed of the site?
Too many tracking scripts can negatively impact the speed of your site. Each script requires time to load, which can delay the display of content. Minimize their use, opting only for those that are absolutely necessary. For those you have to have, use asynchronous loading so they don't block the display of the page.
Adam Dowgird
