I made a slide on this about a month back and I’ve since intended to write about it here.
Every developer that cares about user experience will always want to fix everything that makes a user think of not coming back to their website after first visit. I’ve found myself in such situations where I begin to think that whoever did this thing must have invested a lot of time making something that technically feels like nothing. We don’t want our applications to be thought of this way.
Unlike desktop applications for me, I have to include page load time to the considerations for a good user experience on the web. I’m a DO-IT-RIGHT freak so I try to keep up with the recommended and best ways.
I’m in the habit of validating my HTML and my CSS when I do website designs. As much as I spend time making sure I have a syntactically ok code, I’m privy that validation tools wouldn’t check for semantic flaws so I put this in place myself. I use Google pagespeed insights and Web page test to analyze my web pages behavior. I don’t pursue 100% on all my projects but I try to get close on the ones I can by familiarizing with the requirements for good result. Recently, I started getting this line
What we did here was reduce the resources being requested on the initial HTTP request and we requested for the things we really need our users to see first while we waited for the other things to load before they scroll down. Don’t be fooled by the jQuery plugin I used in my example site to think that’s what makes my images make a bouncy load as you scroll below. That’s just an animation effect.
I wouldn’t like to repeat everything I’ve already said in my slide so I’ll just give it to you here
This is just one step to optimizing page load speed. There are other steps that may be required. As you have seen from my example that this didn’t just give me a 100% speed because it wasn’t everything that had to be done. Don’t ignore this as these little things matter. In the slide, I wrote briefly about the Compass extension: jacket. I will talk fully about how I achieved the separation of my critical CSS from the non-critical CSS with this in a future article.