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
135
How-to 9 min read September 24, 2019

How to reduce page size on your website

The website page size is important in the first place for its loading speed. If you don't optimize the loading speed, you risk losing traffic. SEO optimization considers this phenomenon a priority.
One of the most common website "illnesses" is the HTML page size. Today, the page weight is growing rapidly because of the growing competition, and it's necessary to respond to a user's request as best and effectively as possible.

Video content and images that pull up the most weight to the pages have become extremely popular. It is unlikely that a visitor will like a web page with text content only. Visual content has become a must-have for any website. As a result of this, we face the problem of slow loading speed of the pages.

How to check page size online

Serpstat helps to check the loading speed. The Site Audit module provides a detailed analysis of errors. Go to "Loading speed", as in the screenshot, and examine the report:
Checking download speed in Serpstat
If you checked the loading speed and found out that the maximum allowable speed was exceeded on the PC or mobile device, then your next step should be to fix errors and implement recommendations.

If you want to know the webpage weight without analyzing the entire resource, you can use the Sitechecker service. Follow the link and paste the page URL in the field bar. If it's in the green zone, the weight size will be shown in green. The service checks the size of the HTML code without taking into account external JavaScript and CSS files.
Checking page size online Sitechecker

Reasons for slow page loading

The increase of webpage size is influenced by several factors:

  • HTML;
  • CSS;
  • Java Script;
  • images;
  • fonts;
  • video;
  • ads.

Mobile Internet connection is a bit lower than it is on a computer; however, smartphones bring more traffic in some niches. Therefore, it's important to correctly configure the loading speed not only for PCs but also for mobile devices.

There are several approaches to optimizing page weight. They are usually divided into internal and external measuring. The server optimization refers to internal measuring. For instance, they increase hosting resources, optimize the volume of database server requests, analyze the effect of plugin code fragments on the overall speed, conduct server caching, etc.

These methods are effective because they fix the issue and allow you to monitor their effectiveness from the inside.

External measuring includes adjusting the settings of web fonts, CSS and JS paths, images and header caching, Gzip, and more. Such approaches solve the entire problem, specifically related to loading speed optimization. Use the methods below to reduce the page weight.

Page size optimization methods

#1

Gzip

Gzip activation means that files will be compressed and restored. This utility compresses the text without any loss, and when the user requests for the page, the browser shows him a compressed version of the page. Next, the browser independently unpacks it and shows it to the visitor.

The key drawback here is that the main source of the load is not compressed; images, video, advertising, and other files are not compressed, except the text content.

Technically, once Gzip is activated, it adds a special piece of code to the .htaccess and index.php files, which allows you to compress the data.

To enable Gzip on WordPress CMS, just download and install this plugin. You can find it in the "Add Plugins" section:
Gzip WordPress Plugins
Most used plugins for these purposes:


These solutions are available for most platforms, so you can download ready-made extensions directly from the CMS marketplace. Search for Gzip and install the appropriate plugin. Next, activate the plugin and configure it according to the internal instructions.

Since the compression of text content is not enough, you should compress the images as well. Check out how to do this below.
#2

Enable browser caching

Today, browsers are able to cache pages themselves. This makes our task easier.

To configure browser caching, you insert a piece of code on your web resource:
<ifmodule mod_expires.c>
ExpiresActive on
<filesmatch ".(jpg|jpeg|gif|png|ico|svg)$">
ExpiresDefault "access plus 1 month"
</filesmatch>
</ifmodule>
Code these instructions in the .htaccess file, and the visitor's browser will cache the page itself, without losing time and loading speed.
#3

CDN

Some websites use the Content Delivery Network (CDN). The content includes:

  • JavaScript libraries;
  • CSS files;
  • multi-format images;
  • archives and other stuff.

The core of this method is that this content is synchronized across different servers throughout the globe. When a user requests a page, the network determines the closest server and starts loading files. Thus, it reduces the load and balances the response rate.

The drawback is that if the file is not cached, for example, an HTML document, this leads to a delay caused by the CDN. Moreover, you should also take into account malfunctions or possible instability, like in any other system.

Additional recommendations

1
Remove unnecessary components. Some plugins make page loading more difficult, so you should get rid of those that you don't use. The plugin code also increases the total page size; when a user requests to open a page, it's loaded with all other files. Remove everything that is not used: widgets, plugins, and other files.
2
Combine CSS and JavaScript. If the CSS components are in the same file, there will be fewer HTTP requests. The same goes for JS: if these files are loaded simultaneously, this will increase the loading speed of the entire page.
3
Pay attention to the image format. It also matters for page weight. JPEG format is good for photos, while other image files should be in PNG format.
4
Check the image size. Large images add weight to the page. Try to limit the size based on the block in which the picture is placed; it shouldn't go beyond. If the block is designed for a 500-pixel image, then it's better not to go beyond the standards.
5
Compress pictures. At the beginning of the article, we discussed how to compress text content using Gzip. But since images add most to the webpage weight, it's worth paying attention to it. Use image caching. There are special plugins in most popular CMS systems:
WordPress Image Compression Plugins
6
Do not use fonts that are not needed. Try to minimize beautiful and heavy font types. They increase page size and thus, affect loading speed. Using multiple stylized fonts also adds weight to the page.
7
Analyze the share and like buttons. If these buttons are not really needed on the website, don't keep them. This is the same piece of code on the page that is loaded with the rest of the files and slows loading speed.
8
Optimize the effects. It's better to use CSS3 effects. They are more appropriate for web page size and allows you not to use picture collages or embedding fragments in JavaScript.
9
Use vector graphics. Give preference to graphics that you can mark up through the SVG markup language. Vector images are much lighter than raster, and they don't lose quality upon scaling.

Conclusion

The page weight affects its loading speed. Slow loading speed means you lose customers who won't wait till the page is loaded and would prefer going to the competitors' websites.

The website loading speed can be tested in Serpstat, and special online services such as Sitechecker helps determine the page size.

Use GZIP and CDN to optimize the page size, and also activate browser caching.

Additional ways to reduce page size are the following: removing unnecessary code components and fonts, compressing and caching images, and others.

This article is a part of Serpstat's Checklist tool
Checklist at Serpstat
Checklist is a ready-to-do list that helps to keep reporting of the work progress on a specific project. The tool contains templates with an extensive list of project development parameters where you can also add your own items and plans.
Try Checklist now

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