Post by kmstfatema on Mar 4, 2024 23:13:38 GMT -6
The term above the fold is used today on the web to indicate the display of the first contents of a page. The expression originates from printed paper: by literally translating the term we indicate exactly what is " above the fold " , in reference to that portion of the newspaper that could be seen when it was folded in two. In digital today, the same phrase indicates the first part of a web page that the user sees when he lands on a site. In truth it is also the first part that is rendered by the browser during the critical rendering path and now I will try to explain it in more detail. The section above the fold, if properly optimized, can improve the performance of your website. Above the fold: what are the first visible contents of a website? visible elements - website layout It is not possible to know exactly which elements are visible to the user . There are more and more devices with different shapes and even the orientation of the device itself drastically increases the possible variations.
Let's try to make a list. Immediately fixed at the top we find the first visible Germany Telegram Number Data elements. Surely they are: the logo , the navigation menu and other variable components such as the search box , the shopping cart or the language selector . Below, however, we could find one or more images of different sizes and other textual content such as titles and paragraphs. Possibly we may find ourselves faced with icons of various kinds (menus, social networks, arrows, etc.). Let's now try to optimize the loading of these first elements For example, by optimizing the quality of images and converting them to the new WebP format , which will allow you to reduce many kylobytes, you will be able to obtain benefits on browsers that support them. To find out about complete and always updated support, you can consult this page. optimized image format While for the icons and the logo you can use the vector format (.svg) which can be enlarged infinitely without suffering loss of quality and definition, very useful for managing the resolution of the images on the various devices in a single solution without worrying about the Device Pixel Ratio with which the user will view your site!
Today we all seek visibility, claiming to make visible only what we want. —Rickdufer, Twitter But are these the only resources that are loaded when we browse a web page? No, let's find out why. What “invisible” resources should load “above the fold”? When a page is displayed, the browser analyzes the html code and tries to draw it as quickly as possible, but very often it has to download other external content such as images, fonts, CSS and JavaScript. How many times will you have read on Google's PageSpeed Insights that you had to optimize these resources! The longer the browser takes to load this " first fold " , the less concentration time the user viewing the content will have. Therefore we try to optimize this first phase by uploading only useful content. progressive rendering of a web page : “But do we really need all these elements.
Let's try to make a list. Immediately fixed at the top we find the first visible Germany Telegram Number Data elements. Surely they are: the logo , the navigation menu and other variable components such as the search box , the shopping cart or the language selector . Below, however, we could find one or more images of different sizes and other textual content such as titles and paragraphs. Possibly we may find ourselves faced with icons of various kinds (menus, social networks, arrows, etc.). Let's now try to optimize the loading of these first elements For example, by optimizing the quality of images and converting them to the new WebP format , which will allow you to reduce many kylobytes, you will be able to obtain benefits on browsers that support them. To find out about complete and always updated support, you can consult this page. optimized image format While for the icons and the logo you can use the vector format (.svg) which can be enlarged infinitely without suffering loss of quality and definition, very useful for managing the resolution of the images on the various devices in a single solution without worrying about the Device Pixel Ratio with which the user will view your site!
Today we all seek visibility, claiming to make visible only what we want. —Rickdufer, Twitter But are these the only resources that are loaded when we browse a web page? No, let's find out why. What “invisible” resources should load “above the fold”? When a page is displayed, the browser analyzes the html code and tries to draw it as quickly as possible, but very often it has to download other external content such as images, fonts, CSS and JavaScript. How many times will you have read on Google's PageSpeed Insights that you had to optimize these resources! The longer the browser takes to load this " first fold " , the less concentration time the user viewing the content will have. Therefore we try to optimize this first phase by uploading only useful content. progressive rendering of a web page : “But do we really need all these elements.
