Web at full throttle. How to handle loading speed.
If you decided to open this article, you probably ran out of patience with the slow loading of your website. That's okay. We'll tell you exactly why it's happening and what you can do about it.
Let's take a look at what all you should review on your site:
Images.
Images are one of the most used elements on any website and have a major impact on its speed. Properly sized images can help you save up to 80% of your data usage. Solidpixels automatically optimizes images for you - in short, this means that it generates responsive image sizes (creates thumbnails of images suitable for different resolutions on different devices) and minifies them (reduces their data size). But there are definitely things you can look out for yourself to help your site run even faster.
Keep to the maximum size allowed for the image you upload. Upload images with a maximum resolution of 2600 x 2600 pixels and a data size of up to 10 MB.
Do not upload images with ICC profiles and with print settings. Yes, dear graphic designers, this applies especially to you. The ICC profile puts unnecessary data load on your files, which can then slow down your site. So does setting image colors to CMYK.
Follow the format rules. Solidpixels supports jpg, webp, png, gif, svg formats, but they need to be used for the right purpose. Take a look at what each format is suitable for:
JPEG (JPG) - Best for photos
The JPEG format is ideal for photos. This format uses lossy compression, effectively reducing file sizes without noticeably reducing the visual fidelity of the photos for the user. It is suitable for live photo galleries and product images where you want to achieve fast loading times, but not at the expense of sacrificing details.
PNG - Basic graphics and transparent backgrounds
If transparency or sharp lines are your priority, nothing beats PNG. This format excels for logos, icons, and images that require transparent backgrounds or maintaining sharp detail. Unlike JPEG, PNG uses lossless compression, which means there is no loss of quality when saving the file. It is ideal for graphics where a clean, crisp result is key, even at the expense of larger file sizes.
WEBP - The smallest and the best - our favourite!
Designed by Google, the WEBP format is a game changer in web images and offers superior compression algorithms. It supports both lossy and lossless compression, making it incredibly versatile for a wide range of visuals on your site. It's even suitable for animated formats, making it an absolutely ideal alternative to data-intensive GIFs. Expect up to 30% smaller files compared to JPEG, PNG or GIF formats without compromising quality. It's ideal for everything from high-quality banners to complex web graphics, ensuring your site stays fast and visually appealing.
SVG - The highest quality graphics
SVGs are vector graphic files, which means they consist of points, lines and shapes, not pixels. This makes them scale flawlessly to any size without sacrificing quality, making them ideal for logos, icons, and detailed illustrations. SVG graphics also support interactivity and animation, enhancing the user experience with scalable and crisp graphics. They're especially beneficial for responsive designs, ensuring your visuals look sharp on any screen.
GIF - Animation
GIFs are a fun format. This is because they support, among other things, simple animations with a limited palette of 256 colors, which keeps the file size small. Therefore, they are suitable for this exact use case. Animations make your content more engaging and memorable. However, for more complex or longer animations, consider video formats so you don't have to sacrifice quality. Solidpixels can work with GIFs, but we recommend using the WEBP format instead to improve web speed.
If you don't have your image in the most ideal format, don't despair. There are a number of online format converters, such as cloudconvert.
Our automatic optimization is set to the best ratio of data size versus image quality so you don't have to worry about a thing. But if you want to reduce the data size of your images at all costs and as much as possible, you can of course use external optimization tools (for example TinyPNG) before uploading the file to the web. However, this may be at the expense of the quality of the image.
Tip: For more information on how exactly solidpixels works with images, see our article Automatic image optimization.
Video.
If we were to ask you which elements on a website can reduce its loading speed, we are sure video would be one of the first culprits you'd think of. And you're right. But what to do about it? If loading speed is a top priority for you, it's obviously best not to work with video directly in your website content at all. If your site can't do without it, you basically have the following three options.
The most ideal option is to only load the video if the user actually wants to play it, for which it's best to load the video in a layer above the page.
The other option is to hide the video under a link that takes visitors to an external video platform - YouTube, Vimeo, etc. But consider if you want to take users off-site.
If neither option works for you, upload the video directly to the site. For longer videos, use embedding via YouTube, Vimeo, or upload it directly to the site, but optimize it properly.
What does an ideally optimised video look like?
MP4 format (codec: H.264, frame rate: 25 fps)
1920 × 1080 px resolution
without audio track
video length ideally around 20 s
data size up to 20 MB, (for larger videos we will have to optimize them at more cost on our side)
centered composition, in case of using a background video section the edges will be automatically cropped depending on the browser resolution
preview introduction image directly from the video at 1920 × 1080 px resolution
ideally optimize the video for fast streaming (faststart function)
Solidpixels automatically helps to reduce the data consumption of videos in mobile view. Therefore, when first loaded, it displays a placeholder image instead of the video itself, which only becomes a video later when the user interacts (for example, clicks on the image).
In our article you will learn how to work with the video block. In all cases, however, it is important to remember that the more data-intensive the video format, the slower the site.
Typography.
I'm sure you wouldn't have thought of that. But it's true. The number of individual fonts uploaded to a site also reduces its loading speed, so if speed is really important to you, keep the number of fonts to a necessary minimum. The ideal is to use 1-2 fonts for the entire site. Therefore, go through your design settings from typography to navigation to citations and set your chosen font everywhere to avoid unwanted use of multiple fonts. Hosted fonts will be less likely to slow loading speeds than Google fonts, as they will be downloaded from our servers (which are most likely closer to you than Google's servers) when the site opens. So if you want to speed up your site to the max, upload your own fonts.
Embed applications.
If you have third-party applications embedded on your site , every time you open the site, scripts must be loaded that slow down the site. These include using Google or List maps, embedded players from Spotify or YouTube. So try to keep their use to a minimum.
Google Tag Manager and external scripts.
Make sure you are actually using all the analytics tools you have deployed. If not, and you'd prefer a faster site, it may be time to do some housekeeping. Go through all the external services like Google Tag Manager, Hotjar, etc. and think about whether they are really serving you or just slowing you down. Most users only actively use these aforementioned services for a limited period of time, after which it is advisable to remove the service from the site. It will have a noticeable effect on the loading speed of your site.
How else does solidpixels help you make your website faster?
Conditional stylesheet loading. A website needs a number of resources to render and function properly. Solidpixels speeds up load times by using only those necessary to render a given page and ignoring the rest.
Lazy loading. To render a page, the first screen of the site just needs to load, and the rest is additionally loaded in the background as the user scrolls through the site.
HTTP2 protocol. Allows you to load the resources needed to render the site in one moment, and thus does not create a queue for loading these elements.
Script Minification. In addition to images, the web uses a number of scripts and helper files that can also be automatically minified - called minification.
Scalable infrastructure. All websites on the solidpixels platform are hosted on an infrastructure of servers that always have plenty of space and performance - no matter how many visits to your website come in at any one time.
Continuous speed tests. You need to constantly work to maintain and improve your site speed. That's why we're constantly running speed tests.
More inspiration for a better web
This year, you're gonna make it. The 7 most common website resolutions that are not worth your eternal procrastination.
We all know it. How many times have we put off a plan for so long, only to find out in hindsight that the hardest step of all was taking that first step - forcing ourselves to do it. Let's take a look at a list of the most common web resolutions that users struggle with on a regular basis, always for much longer than they had planned. And usually to no avail. We'll give you tips on how to achieve your goals quickly and easily, and show you that these resolutions aren't worth the eternal remorse at all.
Think about SEO when choosing your administration
Choosing an administration that takes SEO requirements into account can make your optimization work much easier. Read on to find out what to consider.