So what does a user look at?
It goes without saying that an ‘untrained’ eye looks very differently at a website than a web professional. A user can only provide valuable feedback about the perceived aspects of a webpage. No matter how organized the code, how efficient the CSS and how amazing the backend is built, the client sees nothing of that. Instead his focus is on content, design, interaction, speed and perceived loading. This is pretty much everything on the surface and there are lots of details a front end developer needs to keep his eyes on.
Wait, you said perceived loading
Perceived loading, or how the loading of different elements in a webpage is perceived by the user, is something that I like to keep a close eye on when creating websites. It is something that is really worth writing an extra few lines of code for. How specific elements behave when a webpage loads actually matters a lot. It might seem trivial because after those first few hundred milliseconds the website looks perfect! But the thing is, as long as something moves, the user notices.
How to change the way a website loads
The culprit in perceived loading is shifting elements. Let’s say for example you have a few divs with images, and after jQuery loads they turn into an awesome slider. Because the basic HTML structure with images loads before the jQuery does its magic, everything shifts at the point it gets transformed into that beautiful slider. Element shifting makes loading the page look weird.
So what I like to do is, hide these specific elements by default using CSS, which loads a lot faster. And as soon as the jQuery has been loaded, the jQuery sets the item visible (or adds an extra class allowing me to use CSS for that). This way the original code snippet stays hidden until the jQuery kicks in, resulting in a smoother page load. And as an extra added bonus this little trick even gives us time to view a fancy preloader-image before the slider is activated! Also a little detail, the user notices.
