This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
122
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 Squoosh.app:
Compress images with Google 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.
1
For WordPress websites, the Autoptimize plugin is used:
Autoptimize plugin for WordPress
2
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
3
To speed up websites on Joomla, you can use JCH Optimize extension:
JCH Optimize extension for Joomla
4
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

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
SEO Audit in Serpstat
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

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5
Found an error? Select it and press Ctrl + Enter to tell us

Share this article with your friends

Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code Queries left

Something went wrong.

Contact our support team
Or confirm the registration using the Telegram bot Follow this link
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name

Email

Phone

We are glad of your comment
Upgrade your plan

Upgrade your plan

Export is not available for your account. Please upgrade to Lite or higher to get access to the tool. Learn more

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
View Editing

E-mail
Message
Optional
E-mail
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits