Resources

Page Size

Image optimization for SEOimage optimizationHTTPS websites and SEOhtml tagpage sizepage size in web developmentwebsite sizeCSS SpritMinify codeCode minifyingJavaScript minifyingCSS minifying
Updated November 4, 2020 Lucia Sumichrastova

Page size is the overall size of a specific web page and it varies based on the contents inside it. Simply put, web pages, like the folders in your computer, comprise of different files, such as HTML documents, JavaScript and CSS folders, media files, text files or any other content, and so on.

 

As with anything, the more files you have in a webpage the heavier it is. And the heavier the page is, the more time it takes the browser to read and display the results to the end-user. So, the page size is important for two main reasons – SEO and mobile search.

 

Why is page size important in SEO?

In SEO, the page size is one of the key factors influencing the ranking of your website. And the main reason for this is that page size has a detrimental impact on your website’s overall performance, thus reducing loading speed, adding to a bad user experience, slowing down crawlers when indexing pages, and so on.

 

Basically, it touches every aspect that is taken into consideration when ranking a site, thus driving your score down. But most importantly, it affects page loading speed which is one of the important factors that will keep a visitor on your site, especially on mobile devices.

 

Users today have no patience nor tolerance for slow loading websites, and a bad performing page will increase your bounce rate, as users will become frustrated quickly and leave. Moreover, page speed also affects traffic, as Google measures the speed of each page and prioritizes faster loading pages over slower ones.

 

So not only you’re losing existing users, but you have fewer chances of getting new ones too.

 

Why page size is important for mobile search

The smartphone era also changed the browsing way rapidly. Due to its comfort and access to anything you want through your phone, the page size display and loading time is pivotal in order to succeed. Moreover, mobile search via 3G and 4G takes more time to search according to think with Google than on the desktop version.

 

In order not to lose your visitors, the reduction of unnecessary files such as images in original size to smaller dimensions can improve the loading process. That is a crucial step to consider for your SEO. If you want to get further insights regarding the recommended picture dimensions, Forster web marketing article will help you.

 

Page size best practices

Media is an incredibly powerful way to transmit your message simply, quickly, and efficiently as words are often misunderstood or misinterpreted. It’s as they say, an image is worth a thousand words, a video is worth a million.

 

As a result, the growing popularity of media on websites has also pushed web owners to both increase the amount used on each page, as well as raise their quality standards for better images and videos.

 

How page compression works
Source: tinypng.com

 

In addition to text and visual elements such as images or videos, we also have fonts which are also essential. This also comes on top of colors, and overall style which is defined within the CSS file and adds more weight to the page, and more time to rendering. 

 

And if that’s not enough, today’s pages are dynamic and animated, they contain various interactive elements, such as menus and other functionality, which are stored in files that visitors must also download. So what can we do to minimize the effect of page size?

 

1. Image Optimization

Images that are too large can significantly slow down the website, sometimes with just a few seconds other times with enough time to make your user leave the page. Therefore, always consider which image you will use for your site and make sure you optimize it.

 

In other words, will the image bring value, and is the image under 100kb. If the answer is yes to both, it’s a safe image to use. If not, maybe reconsider using it. On the bright side, there are many online and offline image compression programs today you can use, such as JPEGmini, Compressor, Kraken, or Compressjpeg.

 

Another factor to consider is the image format. For example, SVG images, which are vector images, are more or less a cluster of curves that are rendered based on coordinates. So, before they can display an SVG image, browsers read these coordinates one by one and try to “recreate” the curves one by one.

 

Therefore, the more complex the SVG used the longer it takes the browser to read and render it. As a consequence, SVG files are usually used only for icons and logos that need to keep their quality no matter their resolution. The rest of the images on a website should be in formats like PGN or JPEG.

 

Another good practice is the so-called CSS sprites, which are definitely worth mentioning. A CSS sprite is more or less a process of combining several images in a single file. After creating such a sprite, we can use CSS and coordinates to get the exact area where each image needs to be displayed.

 

So because all images are in one place, this will significantly improve the loading time of the website, because it only sends one HTTP request for the entire file, instead of a request for each image.

 

Redundant font sizes

We know that typography is important. Not just having a good website structure and properly defined headings and subheadings, but the right fonts for your business as well. And the truth is that adding fancy fonts looks appealing on your site.

 

However, this may result in prolonging your website’s loading time and unfavorable display. There are thousands of free or paid for fonts to choose from, available online on platforms like Dafont, Adobe Fonts, or Google Fonts, for example. However, just because you use that font on your website, it doesn’t mean the browser can read it.

 

For example, the font you use may miss some characters specific to foreign languages, like the danish “æ”, “å” or “ø”. If the font doesn’t support these characters, the browser will do what we call a default fallback. In other words, the browser will try and display the text in the assigned font, but since it misses the special characters, it will show what it can.

 

example of fallback font
Source: CSS Tricks

 

For the rest of the characters, it will fall back to a default preset font that is more common, like Arial. Similarly, if the browser doesn’t support the font altogether, it will still try to read it. But once it fails, it will do a default fallback and load – again – a font that it can read. In either situation, using uncommon or unsupported fonts my double your text rendering time.

 

So, the moral of this story is, as fancy as a font seems, make sure your targeted browsers support it and make sure it supports all of your characters. This will save you time and face in your users’ eyes.

 

Minifying JavaScript and CSS files

Finally, and probably the most important step is minifying JavaScripand CSS files. The term “minify” is a programming term for the process of removing unnecessary characters in the source code. These characters include spaces, lines, comments, and block separators, which are very important to us but play no role for the computer.

 

By minifying the JS and CSS files, we will speed up the website’s loading speed. And while we’re not talking about cutting loading speed in half, it will definitely help quite a lot, since every second matters for your users.

 






Leave a Reply

Your email address will not be published. Required fields are marked *