18532
How-to 10 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" title = "How to reduce page size on your website 16261788342059" />
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

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 1 people on average 5 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.

Name

Email

Phone

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

Cancel
Open support chat
mail pocket flipboard Messenger telegramm