Web Designers – How To Lessen Page Load Content Shifting!
One of the more frustrating and detracting issues that website users deal with every day is content shifting. This is what happens when the readable content on a page shifts as more page elements like text, images, and other media load, moving the page so the user has to again find where they were reading. In extreme cases, it can reduce site effectiveness if users leave because the content keeps shifting. The good news is that web designers can resolve this problem with a few simple solutions. By adding a few extra lines of code during website development, designers can reduce content shifting during page load.
Fonts are one of the main elements on any site that can cause content shifting. Because different fonts have different x-heights, preferred fonts and web font replacements will load on a page differently. One way to get around this is by using the font face observer script while modifying the x-height of the replacement font. Another way is to use the font-size-adjust command to adjust the aspect ratio of the main font and the replacement font. This option is only supported by Chrome and Firefox, so it might be a good idea to include letter-spacing and line-height adjustments during website development to accommodate other browsers.
Images and Video
The simplest way to prevent content shifting from images and other media loading onto a page is to apply a fixed height and width, although this can defeat the purpose when using responsive website design. A more preferred solution is for web designers to use intrinsic ratios to define a bottom padding for the image or media. This formula is calculated as height divided by width, multiplied by 100. When added to the page code during website development, this assigns a size to the media that is a percentage of the size of the page according to the device it is viewed on.
The command essentially works the same way that applying fixed dimensions does, while taking responsiveness into consideration. For images, it is also possible to add a placeholder to give the viewer the option to load the full size image or wait for the fixed size version to load on the page.
Widgets and Other Dynamic Content
The way a page is laid out can also affect content shifting, as flexbox CSS layouts may result in horizontal shifting depending on the device on which a page is accessed. Grid layouts are preferable for this reason. This can be easily changed within the main layout code by adding in an option to use grid layouts where applicable.
Although these details may require a bit more attention during website development, most users appreciate when designers prevent annoying content shifting during page loading. Google is apparently working on a scroll anchoring function for its Chrome browser; however, it is still a good idea to add in corrections that will work with any browser. Preventing content shifting is one more way that web designers can produce a user-friendly site that has great results!