The saying “patience is a virtue” does not apply online.
Even a one second delay can be drastic Reduce pageviews, customer satisfaction and drop conversions. The speed of your website even affects your organic search rankings.
What is the biggest factor contributing to page speed?
Size.
The browser takes time to download the code that makes up your page. It needs to download your HTML code, your style sheets, your scripts and your images. It may take a while to download all of this data.
As web users expect more engaging website designs, the size of a website’s resource files will continue to grow. Every new function requires a new script or style sheet that only loads your website a little more.
How do you make sure your website is up to date?
There are some great resources to analyze this. PageSpeed Insights from Google, HubSpots website grader, and GTMetrix are some of the most popular. Both services analyze your website and tell you where you fall behind.
A little warning: the results can be a little daunting at times, but most fixes are fairly quick and easy. You may not fix everything that the Speed Service recommends, but you should fix enough to make the website better for your visitors.
Let’s learn how you can speed things up.
While Some modern content management systems like HubSpot The out-of-the-box options for speeding up require more common systems like WordPress and Joomla to be a little manual to keep up to date.
Now let’s look at some important speed solutions that every webmaster should consider.
How to reduce the loading time of pages
- Resize your pictures.
- Temporarily save your browser for data storage.
- Reduce the CSS loading time.
- Keep scripts under the fold.
- Add asynchronous pages.
- Minimize redirects.
1. Resize your pictures.
Images are one of the most common bandwidth wasters on the web. The first way to optimize your images is to scale them accordingly so that they don’t affect the page load time as much.
Many webmasters use huge images and then use CSS to shrink them. What they don’t notice is that your browser is still loading them in full image size. For example, if you have an image that is 1000 x 1000 pixels in size but has reduced it to 100 x 100 pixels, your browser will need to load ten times more than necessary.
Look at the size difference when we reduced one of our pictures:
However, sometimes your photos become blurred by scaling images. The clarity can be lost and the image is distorted. If this normally happens to you, choose the second option: Compress.
Compressing images dramatically reduces the image size without sacrificing quality. There are several free online image compression tools, e.g. tinypng.comThis can lead to a reduction in the image size. You can see size reductions between 25% and 80%.
For example, I took this first 133 KB image and compressed it with a free website app called Squoosh. When the picture was finished, it was 87% smaller and lost none of its original quality.
2. Temporarily save your browser for data storage.
Why should visitors download the same things every time they load a page? By enabling browser caching, you can temporarily store some data on a visitor’s computer so that the visitor does not have to wait for it to load each time you visit your site.
How long you save the data depends on your browser configuration and your server-side cache settings. To set up browser caching on your server, check the following resources or contact your hosting company:
3. Reduce the CSS loading time.
Your CSS will be loaded before users see your website. The longer it takes to download your CSS, the longer you wait. Optimized CSS means that your files download faster and your visitors can access your pages faster.
First ask yourself: “Do I use all of my CSS?” If not, remove the unnecessary code in your files. Every little piece of wasted data can add up until the snail’s pace of your website scares your visitors away.
Next, you should minimize your CSS files. Additional spaces in your style sheets increase the file size. CSS minimization removes these extra spaces from your code to ensure that your file is the smallest size.
Check if your CMS is already minimizing your CSS or if there is an option for it. HubSpot, for example, already minimizes your CSS by default, while WordPress websites have an additional plugin such as WP hummingbird to optimize these files.
If your CMS doesn’t have a collapse CSS option, you can use a free online service like CSS Minifier. Simply insert your CSS and click “Compress” to view your newly minimized style sheet.
Minimizing your resource files is a great way to reduce the size of your files. Trust me – these little rooms add up quickly.
4. Keep the scripts under the fold.
Javascript files can be loaded after the rest of your page. However, if you place them all in front of your content – as many companies do – they will be loaded in front of your content.
This means that your visitors will have to wait for your Javascript files to load before seeing your page. The simplest solution is to place your external Javascript files at the end of your page just before your body tag closes. Now more of your site can be loaded before your scripts.
Another method that allows more control is to use move or asynchronous Attributes when placing external .js files on your site. Both delayed and asynchronous are very useful, but make sure you understand the difference before using them.
Asynchronous tags load the scripts while the rest of the page loads. However, scripts cannot be loaded in the correct order. Basically, lighter files are loaded first. This may be fine for some scripts, but catastrophic for others.
Suppose one of your pages contains a video above the fold, text below it, and a few pictures below. When you run asynchronous tags on this page, the text is loaded first, then the images, and finally the video.
The largest file – the video file – is also the one that users should interact with first. If it is loaded last, it will not have the same effect. So use asynchronous tags if your page contains many of the same elements that don’t take long to load, e.g. B. Text or a carousel with pictures.
The defer attribute loads your scripts after your content is fully loaded. The scripts are also executed in sequence. Think of your homepage for illustration. All elements, including image fields, text fields and layout, are displayed in order, the rest of it is loaded afterwards.
Just make sure your scripts run without damaging your website. All you have to do is add a simple word in your
Add the little code to make sure it loads when you want:
The importance of your scripts determines whether they get an attribute and which attribute you add. More important scripts should probably have the asynchronous attribute so that they can be loaded quickly without stopping the rest of your content. The non-essential ones should wait until the end to ensure that visitors see your page faster.
However, always make sure you test each script to ensure that the attribute doesn't damage your website.
5. Add asynchronous pages.
Most websites gradually download content from various sources. For example, the main part of a website is loaded by the browser. However, the head is rendered from external sources, e.g. B. a stylesheet and a script to load text and images.
The browser, which loads the page from head to body from start to finish, takes a while, but many pages are rendered with this synchronous loading. If part of the page needs a certain function to load, but this component is already loading another part of the page, the initial loading must be completed before the next task can be started.
In the meantime, the visitor waits forever for a website to appear. So much is used by the processor of a computer in the backend that everything just seems to stop.
Instead, asynchronous loading recognizes the scripts that can be loaded at the same time and overwrites the synchronous functions. If certain pages are loaded at the same time and these previously explained function chain commands are omitted, other aspects of the page, such as e.g. B. the page head can be loaded together.
Asynchronous pages can be implemented simply by adding a few lines of code in your page's CSS. Read how to design them in this post.
6. Minimize redirects.
How many redirects are there on your website? If you've recently migrated a website or purchased subdomains, you probably have one or two HTTP requests. These redirects take a while to load pages.
Redirects such as "Error: 404 not found" appear when users enter an incorrect web address or are redirected to a broken page on a website. When a page is redirected, another page takes its place or a blank page with the error message replaces the screen.
Visitors would have to sit through the HTTP screen during the redirect, which increases the time it takes to load the page. For example, suppose your Info page has been moved to a different subdomain.
When visitors enter the website, e.g. B. mywebsite.com/about, you should be redirected to this page immediately. Instead, mywebsite.com/about leads to an HTTP page and leads a visitor to mywebsite.com> mywebsite.com/aboutus. This is an additional page that users have to go through to get to their intended destination.
Remove them instead of hosting multiple redirects. In this postYou will also learn how to find and especially remove all redirect pages and alternatives.
As online users want a more complete online experience, the size of our pages will continue to grow. There will be more eye-catching Javascript, more CSS tricks, and more third-party analytics to complain about our websites.
A little attention will do a lot - keep in mind that a one second delay is enough to lose a head start.