There are lots of items that web developers need to account for when building websites. One of those topics would be page speed. Page Speed is a very important aspect to keep in mind. It is also very relevant for today’s developments with Google indexation and cross-platform developments. It’s something the user also pays attention to and has a firm grasp in whether he decides to stay or leave.
The reason I’m starting this blog writing about page speed is not about how to improve page speed – there have been thousands of articles written about that already. This article revolves around what a user notices while surfing on your website. Page speed is definitely one of those aspects.
Erik de Kuijper26-08-2014
2014-08-262024-01-22
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.
