Start Exploring Keyword Ideas
Use Serpstat to find the best keywords for your website
How to boost loading of the page header
How a website header should look like
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:
![How to boost loading of the page header 16261788346501 Site menu in the header](/img/blog/how-to-boost-loading-of-the-page-header/1569847172image3.jpg)
![How to boost loading of the page header 16261788346502 Minimalistic header of the site](/img/blog/how-to-boost-loading-of-the-page-header/1569847173OenyP2n.jpg)
![How to boost loading of the page header 16261788346503 Overloaded site header](/img/blog/how-to-boost-loading-of-the-page-header/1569847175IWn7My1.jpg)
Loading website header: ways to boost it
Load JS scripts last of all
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>
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
![How to boost loading of the page header 16261788346503 Moving СSS files to the start of the page](/img/blog/how-to-boost-loading-of-the-page-header/1569847176noroot.png)
Deleting unnecessary plugins and reducing code
![How to boost loading of the page header 16261788346504 Minify HTML, CSS, and JS code](/img/blog/how-to-boost-loading-of-the-page-header/1569847178image7.jpg)
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:
![How to boost loading of the page header 16261788346505 Font loading API on the site](/img/blog/how-to-boost-loading-of-the-page-header/1569847179szLn294.png)
What images to use on the website header
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:
![How to boost loading of the page header 16261788346505 Compress images with Google Squoosh.app](/img/blog/how-to-boost-loading-of-the-page-header/1569847180bvivdtD.png)
Plugins that speed up a website loading
![How to boost loading of the page header 16261788346506 Autoptimize plugin for WordPress](/img/blog/how-to-boost-loading-of-the-page-header/1569847181image8.jpg)
![How to boost loading of the page header 16261788346506 JS, CSS, HTML code minification for Opencart](/img/blog/how-to-boost-loading-of-the-page-header/1569847183image12.jpg)
![How to boost loading of the page header 16261788346507 JCH Optimize extension for Joomla](/img/blog/how-to-boost-loading-of-the-page-header/15698471848pFQ63I.png)
![How to boost loading of the page header 16261788346507 Image Optimize module for Drupal](/img/blog/how-to-boost-loading-of-the-page-header/1569847185kuJpVtu.png)
How to check a website loading speed
![How to boost loading of the page header 16261788346508 Google Test My Site checking](/img/blog/how-to-boost-loading-of-the-page-header/1569847187vLHkqhx.png)
![How to boost loading of the page header 16261788346509 Google Test My Site speed test report](/img/blog/how-to-boost-loading-of-the-page-header/1569847189lLzC6bP.png)
![How to boost loading of the page header 16261788346509 Site loading speed analysis with PageSpeed Insights](/img/blog/how-to-boost-loading-of-the-page-header/1569847190image15.jpg)
Conclusion
![SEO Audit in Serpstat](/img/blog/how-to-boost-loading-of-the-page-header/1569847191_30-01.png)
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.
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.