![]() However, even with tools, spriting is hard to do and maintain and can easily cause unforeseen problems across different browsers, so most people opt out of it, meaning that you’ll often see 10–20 small images being loaded for a page, just to show a few icons. The most common technique is called “spriting”, in which multiple images are combined into one and background positioning is then used to shift the background image of elements that need to have a particular image. However, while stylesheets and scripts by virtue of their nature lend themselves to this hack, requests for images are not nearly as easy to get rid of. Often times, styles and scripts for an entire site are combined into one file, even though only small percentages are used on every page, with the initial overhead of the tradeoff being negated by the fact that it’s a “one time event.” Combined with proper browser caching, most sites today load just one stylesheet and one script that your browser will keep cached locally so after those first two initial requests, we never have to wait for them again. This has led to “hacks” like concatenation and minification, wherein a host of stylesheets and scripts are combined into single files and sometimes compressed further by removing as much size as possible by removing everything that makes it easy for humans to process the data such as comments, white space etc. When getting data from halfway across the globe, this can easily amount to tenths of seconds for every request. ![]() The reason for this is, that every request incurs at least a 1 or 2 packet penalty as the browser has to first ask for a new piece of data and then receive some information about that data before it can finally get to the data itself. One of the ways in which we have made things faster, is to reduce the number of requests necessary to serve a web page. Today, your job as a front end web developer is as much about making it fast as it is about making it work. ![]() No matter the actual reason, though, gone are the days of the dynamic web being magic in itself. The reasons for this focus on speed range from the fact that things now have to work on - at best - spotty cellular connections in highly congested areas during rush hour, to the simple fact that the average computer is now so fast, that “waiting” has moved from being a necessary evil of the Information Age (“it’s still much faster than a human could have ever done it!”) to being the greatest of first world nuisances. ![]() But as with all tips and tricks, there are both up- and downsides. In the last five years, the focus in front end web development in general has shifted from a world of “making it work” to “making it fast.” One way of speeding up the front end and optimise load times is asset compressing using Base64 encoding. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |