Perceived loading for a better User Experience

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.

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.

2017-10-26
Welke Consulting Gruppe
  • Erik de Kuijper Erik de Kuijper Online / Programmierung Welke Consulting Gruppe
Melden Sie sich zu unserem Newsletter an!

Welke Newsletter

Erhalten Sie monatlich News rund um die Themen:

Unternehmensführung, Marke, Ertragssteigerung, Mitarbeiterbindung, Digitalisierung, CSR

Kontakt Aufnehmen

Welke Consulting Gruppe®
Garnisonsring 33
57072 Siegen
Germany
info@wcg.de
Phone +49 271 3135-0
Fax +49 271 3135-199

Auszeichnungen

Auszeichnungen sind ein Qualitätsmerkmal! Überzeugen Sie sich selbst!

  • Welke Consulting Gruppe - Best of German Mittelstand Best of German Mittelstand
  • Bester Arbeitgeber 2014 - TOP JOB Bewertung TOP JOB 2014
  • Welke Consulting Gruppe wieder unter den TOP50 Agenturen in Südwestfalen W&V Ranking der Inhabergeführten Agenturen

Social Media

Finden Sie uns im Bereich Social Media. Folgen Sie uns, um tagesaktuell informiert zu werden.