We are increasing traffic and rankings in search results. You get sales and pay only for real results, only for targeted transitions from search engines
Order honest and transparent promotion
Get our book, Social Media Content Marketing: How to Get Inside Your Followers' Heads and Make Them Fall in Love with Your Brand.
Subscribe to the newsletter and receive a book as a gift!
This is a very simple question, but finding a normal answer turned out to be wildly difficult. So that you do not repeat my difficult path through ancient forums and dubious collections, I have collected the juice. In the article: one simple but time-consuming way to do everything by hand and three really useful services that help you find out the site page size in kilobytes.
How to set page size in HTML?
In the browser, you can do this: press CTRL and - sequentially. After this, the page
will decrease while maintaining the width of the document.
Interesting materials:
What photocopies are needed for registration? What benefits are given for 3 children? What are the benefits for newlyweds? What benefits are there for large families? What benefits does a single mother have? What benefits are available to large families in the Moscow region? What benefits are provided for a young family? What benefits does a father of three children have? What cars are considered luxury? What environmental protection measures can be proposed?
How much do the pages of your site weigh?
Many of us have good, high-speed Internet. Therefore, many webmasters do not think about how much a website should weigh. However, I often face the fact that I have a weak Internet connection. An example is that living at a sufficient distance from the city of M, we do not have 4G, and I do not notice the 3G speed at all on my phone. Most likely, the article will not reveal anything new to you, we’ll just look at how much the main pages of popular sites “weigh”, and also try to figure out acceptable numbers.
Websites
We will load the main pages of the site and find out how much they weigh. For analysis, I took the first 50 sites from liveinternet statistics. I compiled the remaining 30 from foreign ratings and personal use. In this article we will not divide sites by type, but simply take a look at the general picture of the world. List of sites
vk.com www.odnoklassniki.ru mail.ru www.avito.ru www.gismeteo.ru www.rbc.ru www.drom.ru auto.ru rutracker.org www.wildberries.ru rian.ru lenta.ru hh.ru kp.ru vesti.ru kinopoisk.ru www.irr.ru lice-mer.ru tiu.ru directadvert.ru www.sotmarket.ru www.liveinternet.ru www.superjob.ru smi2.ru slando.ru fotostrana .ru www.gazeta.ru www.sberbank.ru ngs.ru www.spishy.ru www.sportbox.ru www.championat.ru www.rg.ru www.e1.ru www.echo.msk.ru www.allbest .ru www.woman.ru www.job.ru www.consultant.ru newsru.com www.rabota.ru www.babyblog.ru zona.ru pulscen.ru utro.ru www.sport-express.ru farpost.ru baby .ru planeta-online.tv nsportal.ru facebook.com google.com youtube.com yahoo.com wikipedia.org baidu.com live.com armazon.com qq.com twitter.com taobao.com blogspot.com msn.com ebay .com yandex.ru bing.com wordpress.com tumbir.com microsoft.com apple.com paypal.com ask.com imdb.com www.artlebedev.ru habrahabr.ru bash.im forum.searchengines.ru thepiratebay.se dribbble. com play.google.com/store
Browser and machine
To take readings, I used Firefox 20 on a machine with xUbuntu 12.04.
On other machines and browsers, sites may differ, but not much. To automate the process, addons were taken: Linky - through it I immediately opened all sites into new tabs NoScript - to disable scripts and analyze the size of pages, in fact, without them UnMHT - to save all open tabs with content in separate files, the name of which coincides with open site
Preservation
MTH saves slightly larger files, but the error is not too high, at least in my measurements between UnMTH and the Firefox save file.
Redpanda was opened in private mode so that my kukukes and other things did not interfere with the pure result. Therefore, all social networks should weigh little, due to the fact that no one is logged in there. Let's see if this is true.
Websites with everything included
I opened all the tabs and saved them. Both Flash and HTML5 things were saved, which significantly increases the size of the site. The result is a graph like this
I built everything in LibreOffice Calc, just because I can.
The average was obtained by calculating the arithmetic mean of 4 neighbors, just for clarity. It can be seen that almost everyone invests in 3 MB, and the average weight of a site is about 1.4 MB.
Websites with disabled Javascript and Flash/Html5 objects
Now we have no scripts, so the sizes should decrease quite significantly. Some sites immediately throw out a window with a message that they do not work without JS, they weigh very little.
It can be seen that the entire graph is shifted to the left, the average size of sites is about 0.9 MB.
General schedule
results
| Websites | JS included (Mb) | JS disabled (Mb) |
| accounts.google.com | 0,3 | 0,3 |
| allbest.ru | 0,1 | 0,1 |
| amazon.com | 1,3 | 0,6 |
| apple.com | 1,1 | 0,5 |
| artlebedev.ru | 2 | 1,3 |
| ask.com | 1,1 | 0,6 |
| auto.ru | 2,3 | 0,9 |
| avito.ru | 0,5 | 0,3 |
| baby.ru | 1,5 | 1,2 |
| babyblog.ru | 1 | 0,8 |
| baidu.com | 0,1 | 0,05 |
| bash.im | 0,7 | 0,1 |
| bing.com | 0,4 | 0,05 |
| championat.com | 3,2 | 1,4 |
| consultant.ru | 0,4 | 0,2 |
| directadvert.ru | 1,3 | 0,5 |
| dribbble.com | 1,8 | 1,3 |
| drom.ru | 0,8 | 0,5 |
| e1.ru | 0,5 | 0,4 |
| ebay.com | 1,5 | 0,9 |
| echo.msk.ru | 3,5 | 2,3 |
| facebook.com | 0,9 | 0,5 |
| forum.searchengines.ru | 0,8 | 0,3 |
| fotostrana.ru | 3,4 | 1,7 |
| gazeta.ru | 2,7 | 1 |
| gismeteo.ru | 0,6 | 0,4 |
| google.ru | 0,9 | 0,2 |
| habrahabr.ru | 2,7 | 1,8 |
| imdb.com | 0,9 | 0,9 |
| irr.ru | 1 | 0,5 |
| jobs.ru | 2 | 1 |
| kinopoisk.ru | 3,1 | 1,7 |
| kp.ru | 7,6 | 5,8 |
| lenta.ru | 1,8 | 0,7 |
| liveinternet.ru | 0,5 | 0,1 |
| login.live.com | 0,4 | 0,3 |
| mail.ru | 0,8 | 0,6 |
| microsoft.com | 1,7 | 1,1 |
| news.sportbox.ru | 2,4 | 1,4 |
| newsru.com | 0,9 | 0,8 |
| ngs.ru | 1,3 | 1,2 |
| nsportal.ru | 2,2 | 2,1 |
| odnoklassniki.ru | 1 | 0,1 |
| paypal.com | 0,7 | 0,7 |
| planeta-online.tv | 1,9 | 1,5 |
| play.google.com | 2,6 | 2,5 |
| pulscen.ru | 1,3 | 0,6 |
| qq.com | 2 | 0,9 |
| worka.ru | 1,4 | 0,5 |
| rbc.ru | 0,9 | 0,5 |
| rg.ru | 2,5 | 1,8 |
| ria.ru | 9,4 | 1,3 |
| ru.msn.com | 2,2 | 0,8 |
| www.yahoo.com | 1,1 | 1,1 |
| rutracker.org | 0,4 | 0,3 |
| samara.hh.ru | 0,7 | 0,3 |
| sberbank.ru | 1 | 0,4 |
| slando.ru | 2,1 | 0,8 |
| smi2.ru | 1,7 | 1,9 |
| sotmarket.ru | 3,4 | 0,4 |
| spishy.ru | 1 | 2 |
| sport-express.ru | 2,9 | 0,8 |
| superjob.ru | 1,1 | 1,6 |
| taobao.com | 2,6 | 0,1 |
| thepiratebay.se | 0,1 | 1,6 |
| tiu.ru | 2,6 | 0,6 |
| topface.com | 1,5 | 0,05 |
| twitter.com | 1 | 0,7 |
| ulyanovsk.farpost.ru | 0,8 | 0,5 |
| utro.ru | 2,6 | 1,3 |
| vesti.ru | 2,3 | 1,4 |
| vk.com | 0,6 | 0,1 |
| wikipedia.org | 0,2 | 0,2 |
| wildberries.ru | 2,1 | 1 |
| woman.ru | 3,4 | 2,6 |
| wordpress.com | 0,6 | 0,2 |
| yandex.ru | 1 | 0,5 |
| youtube.com | 1,4 | 1,3 |
| zona.ru | 5,5 | 3,7 |
The fattest sites turned out to be those with a lot of text - ria.ru, kp.ru. Store websites are catching up with them. Trackers fit into 300Kb (thepiratebay.se weighs less than a hundred), as well as search engines and some social networks.
conclusions
Average website sizes range from 1-1.5 megabytes.
Ideally, your site will weigh a little less than others. The number of views and visits increases. Therefore, if you have not yet optimized your brainchild, see what you can do. The best thing to do is look at what's wrong with Page Speed.
The main points that you can read about in any article on optimization:
- Optimize your images. They usually make up a huge part of the site.
- Compress CSS and JS. Sometimes it turns out to be twice as short.
- Use Ajax to load pages and elements instead of reloading them
- Cache everything you can. The main thing is to monitor the load on the server.
- Enable Gzip compression
- Use lazy loading of images. I have enabled Lazyload on my sites. I recommend it, especially on mobile sites or mobile versions of the site.
- CSS sprites. Group pictures. Both the client and the server will be happy.
- Remove everything unnecessary! Do not install heavy Flash jokes, online radio and autoplay videos unless necessary.
PS
The tips I gave above will speed up your site and make your users more comfortable.
However, if your site is super cool, then no amount of megabytes can stop a user from visiting it. If your site is so-so, optimization will not help much. Make good websites.
What was done
High-frequency queries were selected from the semantic core (the list of queries on our website). Based on them, an anchor list was compiled (a list of requests for internal links). Links with these anchors were placed on pages with the highest weight (for example, with a Link Score of 100) and led to promoted pages (for example, the home page).
Let's look at the example of a travel agency website. The privacy policy page receives the most weight on the site. We select the high-frequency anchor “travel agency” and design it as a link to the main page. That is, we find or add the text:
Our travel agency invites you to read our privacy policy.
We format the anchor as a link in this way:
your anchor
Page weight on mobile devices
In the last two years alone, the number of mobile device users has increased to millions due to the fact that phones and tablets are much more convenient to use than a PC or laptop. Lukew.com has an article that gives us the following data:
- 3G connections are 40% slower and 4G connections are 12% slower than the average desktop connection;
- About 86% of the 347 sites provide the same page size across all devices.
This means that page speed will suffer if it is not optimized for mobile devices. To maintain good speed, you may need to sacrifice some aspects. For example, remove animation or posted video. It is also important to monitor the width of the site, otherwise visitors may miss important information that you would like to convey to them. If the site page is too stretched, it will be unreadable, and some elements and important blocks will not be displayed.
The mobile trend is very simple and clear. First, Google launches the AMP project, and then promises to make the mobile index the main one. In 2019, he brought this to life. Mobile-first index is already applied to all new sites by default. The smartphone has long been the main device for searching information and making decisions. Especially after a significant increase in screen diagonal in almost all modern mobile devices.
Why is this necessary?
Websites also need to lose weight for the summer. The larger the page, the slower it loads, the longer the user does not get access to the content, and the worse they look in the eyes of search engines. Finding out the size of the page and the entire site is worth it for two reasons: to evaluate how much space you have left on your hosting and how quickly it loads in the browser. The second is especially important - page loading speed is taken into account by search engines when generating results. The corresponding algorithm has been working since 2010, and if the site is heavy and slow, you shouldn’t count on getting to the top.
What are the website size formats for layout?
Each device has several characteristics that describe its size:
- The physical size of the screen is its diagonal in inches (for example, 24 inches). Devices with the same screen size may have different resolutions.
- Resolution is the ratio of screen width to height in pixels (for example, 1920 x 1080 pixels).
- The browser window size is the width and height of the viewport in pixels (for example, 1896 x 1080 - including a 24 pixel scroll bar). In other words, this is the resolution minus borders, scrollbars, and other elements that reduce the viewable area of the site. But the user can greatly change the size of the browser window, so designers usually set the content area and side padding.
The physical size of the device can be taken into account when designing clickable elements, but basically, the size of the site is chosen based on the resolution , and the width and height of its content area (container) are determined taking into account browser indents.
You also need to remember about the orientation of the screens - for laptops, desktops and TVs it is landscape (width is greater than height), while for smartphones and tablets it is usually portrait (height is greater), but can be flipped.
What are the options for creating a page for different monitors and resolutions (layout types)
Fixed layout
Simply put, we hardcode the site's static parameters and its width does not change, no matter what resolution the user has. This is the worst option, it is not recommended to use it at all, it is clearly a thing of the past.
Rubber layout without restrictions
Simplified it looks like this:
Those. The width of the site adjusts to the width of the browser. The browser is wider - the blocks below move sideways. The browser is narrower - the blocks are located one below the other.
The advantages of this layout:
- Space is utilized to the maximum, with no gaping void to the left or right of content on a high-resolution widescreen screen.
Minuses:
- On a large screen the site spreads out a lot. This is especially inconvenient for text.
- From time to time there may be empty space between blocks.
Personal user case: I have poor eyesight, if I don’t wear glasses, I have to sit with my face buried in the monitor. Believe me, even at 21 inches with a width resolution of 1600 pixels, it’s terribly inconvenient to perceive the site from a short distance. You have to turn your head from left to right to read a line of text.
In addition, if the screen width is small, the blocks will overlap each other if the minimum width is not specified. To avoid these problems, you can use the following method:
Rubber layout with specified minimum and maximum width
In this case, within the limits you specify, the site can change the positioning of blocks, but it has certain limitations:
- minimum – having reached this limit, the blocks do not “shrink”, but a scroll bar appears;
- maximum – the content does not increase in width, but empty space is added on the sides, while the site content is placed in the center of the grid.
Pros:
- We are confident in how the content of our site looks at a certain resolution. Naturally, we try to make the most beautiful site for the most common resolutions in our topic.
Minuses:
- If you choose a maximum that is too small for a large screen, you may have a problem with empty margins on the sides.
For example:
Adaptive layout
The most modern and used layout option. Not only are the content blocks positioned relative to each other depending on the resolution, but the content of the blocks (fonts, images, etc.) changes in size.
With adaptive layout, we can do whatever we want with the content, depending on the resolution. Another advantage of this layout is that it is well suited for mobile device screens, unlike the first two options.
If you choose adaptive layout, we recommend using the MobileFirst rule, i.e. First we work with low resolution and gradually move towards the big screen.
Pros:
- The most modern and correct type of layout.
Minuses:
- Can be quite difficult to implement (in some cases). In any case, you need to understand which resolution is the priority for your site in order to correctly display the site at these resolutions.
All these techniques can be combined depending on the situation.
For example:
- responsive design can complement rubber layout;
- or the site is made on a fluid design, and a mobile adaptive version is made for mobile applications.
I recommend reading Anna Sebova’s article, where the issue of mobile layout is discussed from a technical point of view.
- If you have a fixed layout, it's time to update your site, I'm telling you seriously.
- If you already have a fairly high-quality website with a rubber layout, simply add an adapter for mobile devices and resolutions on which the site is poorly displayed.
- If you are doing everything from scratch , it is better to do a fully adaptive layout; this is the most modern and high-quality solution.
- If you already have a website and are preparing a redesign , you don’t even need to turn to open services - look at the statistics of your web analytics service.
How to find out your site's statistics by screen resolution?
If you have Yandex.Metrica
- Go to the section Reports → Standard reports → Technologies → Display resolution:
- We get visual, unique statistics applicable specifically to your site (of course, they will often coincide with standard statistics):
If you have Google Analytics
- Technologies → Browser and OS → Screen resolution:
- These reports are also useful because we can identify problems with website display at a certain resolution. To do this, pay attention to the “Bounce Rate” column.
- If you see that at a certain resolution the bounce rate is significantly higher than average, you should test the display of the site in this resolution.
