/Deep mobile optimization.
Up to 70 percent of whole Internet traffic is mobile one. Many people visit your website after the ads in social networks. And about 80 percent of them do it from mobile devices.
You need about 40 to 70 seconds to check the page view in five different resolutions. For thousand pages it becomes 30 hours of routine work.
There are two kinds of mobile layout errors: systematic and accidental.
The first ones are typical for repeating content. For example, the main menu does't fit the screen. Due it is presented in each page, the whole site becomes messed up.
The accidental error is much harder to identify. For example, the content manager has created a table in the product card description occasionally with large number of columns. After that the page does't fit the screen. Exactly in such cases our checker shows its best side.
"srcset" attribute
Desktop monitor and mobile phone screen have different resolution. So it makes no sense for the mobile device to load large images intended for a PC.
In order not to load excess pixels, you may specify additional images adapted for certain resolutions.
Compare two parts of code:
<img src="image.png" />
<img
srcset="/full-width-baner-1024px.jpg 1024w,
/full-width-baner-768px.jpg 768w,
/full-width-baner-812px.jpg 812w,
/full-width-baner-375px.jpg 375w"
src="full-width-baner.jpg" />
In the second case we specified four alternative images for different screen sizes. "1024w" means to use this source file when width of the image area block is 1024 pixels. Compare the speed gain:
- Original image: 1920px, 250kb.
- iPad portrait: 768px, 100kb - 60% gain.
- iPad landscape: 1024px, 140kb - 40% gain.
- iPad portrait: 375px, 30kb - 80% gain.
- iPad landscape: 812px, 120kb - 50% gain.
Each of the devices would load the suitable size image.
Our robot determines the excess pixels and notifies you about them.
These tricks would make you more competitive. And at all else being equal you will oust your competitors from the market.