How to boost loading of the page header
In order to boost page loading, it is necessary to modify the code, leaving only the most important functioning components in the beginning that are added directly to the HTML markup. Loading JS scripts and other slow elements should be used last.
How a website header should look like
Fast website loading has a positive effect on ranking, behavioral factors, and conversion. According to Google Analytics statistics, most users leave the website if its loading speed exceeds 3 seconds.
However, as of 2018 mobile page averagely load for about 15 seconds. For this reason, most websites lose customers due to too slow loading of the mobile version.
That's why it is critical that all content placed on the first screen, in particular, the area that the user sees first is loaded quickly. The website header is displayed in this area; thus, it must be composed in such a way that it doesn't slow down the page loading.
In case of commercial projects, the following information is usually added to the website header:
However, as of 2018 mobile page averagely load for about 15 seconds. For this reason, most websites lose customers due to too slow loading of the mobile version.
That's why it is critical that all content placed on the first screen, in particular, the area that the user sees first is loaded quickly. The website header is displayed in this area; thus, it must be composed in such a way that it doesn't slow down the page loading.
In case of commercial projects, the following information is usually added to the website header:
- main menu;
- company logo and advertising slogan;
- contacts: it must include a phone number; you can also add e-mail, messenger usernames, and links to social network communities;
- working hours;
- thematic image or an advertising banner; it is necessary to take into account the format and size of the image so that it doesn't slow down the loading speed;
- links to sections related to terms of delivery, payment, return and warranty service;
- key conversion buttons: order a callback or subscribe to news:
As an alternative, you can use a minimalistic design, in which the header of the website consists of a few elements:
In the following example, the header is overloaded with pictures within the framework and many menu items, which further complicates the usability of the fancy font:
Loading website header: ways to boost it
Modifying the client part of the code can significantly increase the speed of loading the website. When optimizing the code, you should pay attention to several points.
Load JS scripts last of all
Most modern web pages host many bulky files with JavaScript codes that slow downloading speed. The user's screen remains blank until all scripts are loaded. To avoid such delays, use asynchronous loading, in which JS scripts run last.
You can implement this using the special extsrc.js library, developed by Google specialists, to ensure that all scripts are loaded after the page is displayed to the user. First, you need to download this script to your server and connect it to the HTML code of the page. After that, add all the scripts in the following format:
You can implement this using the special extsrc.js library, developed by Google specialists, to ensure that all scripts are loaded after the page is displayed to the user. First, you need to download this script to your server and connect it to the HTML code of the page. After that, add all the scripts in the following format:
<script extsrc="url/some-js-file.js"></script>The standard attribute of the src script is replaced by extsrc.
For those scripts that don't explicitly use the document.write method, you can use asyncsrc = "url / some-js-file.js" to make loading even faster.
For those scripts that don't explicitly use the document.write method, you can use asyncsrc = "url / some-js-file.js" to make loading even faster.
CSS file transfer
Extra CSS files are also better to transfer to the footer, all the rest should be merged into a single file and attached at the very beginning of the page in the <head> section:
Deleting unnecessary plugins and reducing code
When you develop a website using visual editors, there are often extra lines of code added that needs to be deleted. In the same way, you need to make sure that no extra plugins, themes or extensions are loaded. To make the code shorter, you can use the online tools, for example, the Minifycode compressor:
Optimization of connected fonts
- It's unnecessary to load many fonts, and it's desirable to limit the number of available style options for each font;
- it is recommended to divide fonts into subsets;
- well-designed loading of an optimized font allows you to increase the page processing speed. To boost font rendering, you can use the Font Loading API script interface, which allows you to change the initial settings for delayed loading:
Considering the fact that fonts rarely change, they need to be cached as long as possible.
What images to use on the website header
The website header should load as quickly as possible, so you should not place heavy graphic elements on it. In those cases when graphics cannot be replaced with text or CSS effects, you should use images in a format that depends on the type of image, i.e. raster or vector.
For raster images without bulk details would be ideal to use the JPEG2000 format, which ensures the best image quality even after compression. If you need to add a picture that has many details or transparent background, you should use PNG. For vector images, the SVG format is suitable, which can be compressed through GZIP. Animated images are saved with the GIF extension.
You can compress the image size by removing digital junk: unnecessary metadata, as well as compressing the file or changing its format. You can do this in various online tools, for example, the Google service Squoosh.app:
For raster images without bulk details would be ideal to use the JPEG2000 format, which ensures the best image quality even after compression. If you need to add a picture that has many details or transparent background, you should use PNG. For vector images, the SVG format is suitable, which can be compressed through GZIP. Animated images are saved with the GIF extension.
You can compress the image size by removing digital junk: unnecessary metadata, as well as compressing the file or changing its format. You can do this in various online tools, for example, the Google service Squoosh.app:
You should not use rules in CSS to resize images since scaling images slows down the page loading speed. It's better to add an image to the server in several sizes that will allow you to adapt the page to devices with different screen resolutions.
Plugins that speed up a website loading
There are plugins and extensions that allow you to automatically speed up page loading in different CMS systems.
How to check a website loading speed
The service not only shows the loading speed but also generates a report with recommendations allowing to boost website loading speed on mobile devices:
To analyze the site loading speed on both mobile devices and computers, you can use another popular online service Google PageSpeed Insights. This tool also gives detailed recommendations on accelerating the resource:
Conclusion
1
Slow website loading speed causes users to leave after a few seconds when they see only the blank screen. Therefore, the page header should be loaded as fast as possible.
2
To speed up loading, you need to minimize the code, move the CSS stylesheet to be loaded along with the header, and load JS at the end.
3
To quickly load the first screen of a website, it is important to use compressed images of the appropriate size and format in this area without scaling them with CSS rules.
4
Using many fonts can significantly slow down the page loading, so you should minimize the number of fonts following the recommendations of specialists.
5
To quickly accelerate page loading, it is convenient to install special modules and plugins developed for all popular CMS.
6
Use Google's online tools to check the download speed and get individual recommendations on how to boost it.
This article is a part of Serpstat's "Site Audit" tool
" title = "How to boost loading of the page header 16261788346510" /> Audit all the site or page in one click. A complete list of errors, sorted by severity, ways to resolve them and recommendations. Any frequency of verification and automatic email reports.
| Run Site Audit |
Speed up your search marketing growth with Serpstat!
Keyword and backlink opportunities, competitors' online strategy, daily rankings and SEO-related issues.
A pack of tools for reducing your time on SEO tasks.
Found an error? Select it and press Ctrl + Enter to tell us
Discover More SEO Tools
Tools for Keywords
Keywords Research Tools – uncover untapped potential in your niche
Serpstat Features
SERP SEO Tool – the ultimate solution for website optimization
Keyword Difficulty Tool
Stay ahead of the competition and dominate your niche with our keywords difficulty tool
Check Page for SEO
On-page SEO checker – identify technical issues, optimize and drive more traffic to your website
Recommended posts
Cases, life hacks, researches, and useful articles
Don’t you have time to follow the news? No worries! Our editor will choose articles that will definitely help you with your work. Join our cozy community :)
By clicking the button, you agree to our privacy policy.