In this article I will be looking at some other monster from the depths of modern web development.
Traditionally if you had asked about page load times, CPU load would have never crossed my mind. Page load times were the be and end all of websites, and are still to some degree (advertising seems to have taken first place). You don't have to go that far back in internet history to see the countless tips and tricks deployed to make a website load faster. While early 90's websites used very little in terms of high resolution graphics and slick UIs, that has changed course for the most part.
Now it's important to understand, and perhaps common sense, that if a web page doesn't load quickly you will see less users/customers. From my background, all kinds of numbers for how long a webpage could take were thrown around. It started with 3 seconds, at some point it became a half second, but usually it is some number trending that week.
Lazy loading isn't a new concept, especially those in the object orientated world. Instead of doing a pile of work at object creation (data crunching, calculations, etc.) you return a "I'm ready" signal or code, and then do all the heavy work once a request or method invocation is actually made. This can save a ton of time for everyone and make certain initially infeasible designs actually work - given that the design was actually through out.
In the internet sphere, this isn't to far of a concept. Why have the web server fetch the top 1000 news stories from a database, when a desktop or phone screen likely won't be able to show all 1000 items?
A user's browser is perhaps one of the most used and sophisticated pieces of software running on their machine - with the exception of the Operating System or Kernel. To turn around as a web developer and shun all the design that went into it
would should seem down right silly if not stupid.
src attribute of an
img element only when the user can "see" the content. In some worse cases, the
img tag doesn't even have a
The first example isn't the worse case:
You can see that their article is missing the fairly modern "head image" under the article's title. Where did that go you wonder?
Now luckily, because they only used a CSS rule to hide the image, it is also fairly easy fix for a browser extension or fellow web developer to enact:
However some developers have really gone overboard, and don't
specify an image specify a usable image html element:
In this case, Surefire's website takes it to a whole other level. They don't even use a
img element for their images.
Had someone done this several years ago I would have laughed them out of the room. Now I kind of sadly expect this behavior.
It is also quite clear whoever implemented this didn't really think things through:
div tag is using the css
class attribute already, but then adds inline style to show something?
role set to
aria-label attribute, at least set it to something...
As a developer, you wish to decrease page load times. That's a fair thing to do since businesses need customers, and customers want fast load times.
Instead of instructing the web browser how to render, provide the resources to the web browser to make the decision. You receive the user's browser agent and their IP address. With these two pieces of information you can make an informed decision and determine if:
There are no comments to be loaded for this article.