Start Exploring Keyword Ideas

Use Serpstat to find the best keywords for your website

15552 1
How-to 9 min read September 30, 2019

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:

  • 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:
Site menu in the header
As an alternative, you can use a minimalistic design, in which the header of the website consists of a few elements:
Minimalistic header of the site
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:
Overloaded site header

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:
<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.

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:
Moving СSS files to the start of the page

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:
Minify HTML, CSS, and JS code

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:
Font loading API on the site
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
Compress images with Google
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.
For WordPress websites, the Autoptimize plugin is used:
Autoptimize plugin for WordPress
For OpenCart websites, you can use a module that minimizes code and increases loading speed according to the results of the Google Speed test:
JS, CSS, HTML code minification for Opencart
To speed up websites on Joomla, you can use JCH Optimize extension:
JCH Optimize extension for Joomla
You can speed up the website running on Drupal by enabling the built-in CSS and JavaScript aggregation in the settings, as well as reducing the size of images through the Image Optimize module:
Image Optimize module for Drupal

How to check a website loading speed

To check the loading speed of the mobile version of the website in a specific country, you can use the Google Test My Site service:
Google Test My Site checking
The service not only shows the loading speed but also generates a report with recommendations allowing to boost website loading speed on mobile devices:
Google Test My Site speed test report
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:
Site loading speed analysis with PageSpeed Insights


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.
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.
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.
Using many fonts can significantly slow down the page loading, so you should minimize the number of fonts following the recommendations of specialists.
To quickly accelerate page loading, it is convenient to install special modules and plugins developed for all popular CMS.
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
SEO Audit in Serpstat" 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.

Get free 7-day trial

Rate the article on a five-point scale

The article has already been rated by 6 people on average 2.67 out of 5
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

Share this article with your friends

Are you sure?

Introducing Serpstat

Find out about the main features of the service in a convenient way for you!

Please send a request, and our specialist will offer you education options: a personal demonstration, a trial period, or materials for self-study and increasing expertise — everything for a comfortable start to work with Serpstat.




We are glad of your comment
I agree to Serpstat`s Privacy Policy.

Thank you, we have saved your new mailing settings.

Report a bug

Open support chat
mail pocket flipboard Messenger telegramm