Tuesday, March 19, 2024

HTML5 Tips for Optimizing Speed

HTML5 brings many great features and benefits to the table, but one of the most often overlooked features is one that has become increasingly important from a visitor usability standpoint and, as Google recently stated, from a search engine optimization (SEO) perspective. This ability to increase page load times and decrease server loads is the very subject of today’s HTML5 development article.

HTML5 Best Practices for Speed Optimization

We live in a fast food world. The lumbering beast once known as “Patience” has steadily been defeated by the hand of almighty technology. Gone are the days of slow and steady wins the race. Today, more than ever, speed is everything. This applies to everything – whether that be cooking a delicious corn dog or surfing the web for the latest celebrity gossip. The world no longer wants a story – they want sound bites. The faster the better. If you are like me, you may remember logging onto the Internet before “The Internet” – the old bulletin board systems (BBS). You would dial-up with your old 1200kbs modem and wait patiently for the screech and clang symphony of sweet connected bliss. Your reward for this patience? A bunch of text with no real images (maybe some ascii characters arranged to look like a picture) and certainly no videos. Ah, those were the days. Today, however, websites must be more than mere text. They must be media rich and tech savvy. At the same time, they cannot sacrifice function or speed. We Internet users want our cake and want to eat it too. Factor in the dawn of the mobilization of the Internet, and it is more important than ever to adhere to web development best practices, particularly when it comes to speed optimization and server load times. To help you in this endeavor, below are some tips for optimizing HTML5 websites for mobile and desktop users.

Prioritize Assets

When a user visits a web page – be it via a desktop computer, tablet, or mobile device, all of the content a user sees without having to scroll down at all, is known as above-the-fold content. Any part of the page that requires the user to scroll down is known as below-the-fold. Best web practices dictate that any content (text, image, media, etc) that are above the fold should render (ideally) without requiring numerous trips back to the server and the user’s computer. This is especially true for visitors with mobile browsers, as their network speed and browser speed is likely less than that of their desktop and home networks. There are several steps you can take to prioritize any above-the-fold content. For starters, you can reduce the amount of assets that are resource intensive, such as large, high resolution images. Another way to reduce the amount of resources needed is to structure your HTML5 code in such a way that it loads all of your important, above-the-fold assets and content first, then load up everything below-the-fold.

Minify Your Resources

As seasoned coders, sometimes we like to experiment with page elements, sometimes on-the-fly. Maybe we implement a new portion of code and comment out older, less efficient code, opting to “hide” the code rather than remove it completely, just in case we need it in the future, or your new fix causes problems you did not foresee. Nothing wrong with that. What tends to happen to the best of us, more often than not, is that we forget to go back and remove all of that unused code. This pads up our files and is sloppy coding practice. When we talk about minifying resources, we are specifically discussing the art of minification. That is, remove any and all code or data that is either a duplicate of existing code, or is (for all intents and purposes) unused. It also includes removing extraneous comments in our code, whitespace, unnecessary formats, and even creating variable and function names that are shorter. Essentially, whatever you can do to shorten your code and ease the burden on the web browser. Minifying code includes HTML5, CSS, and JavaScript as well.

Enable Compression on Your Web Server

Finally, setup gzip compression on your web server to help reduce the page load time (sometimes you can actually increase your site’s speed by upwards of 90%). There are many resources available on the web that can show you how to enable compression – no matter what type of server you use – and that discuss the benefits of gzip compression. A quick Google search should have you up and running in no time!

James Payne
James Payne
James Payne is the editor for Developer.com, HTMLGoodies.com, Devx.com, CodeGuru.com, and JGuru.com. He was previously the Editor-in-Chief of the Developer Shed communities – a network consisting of 14 websites and forums dedicated to programming, web design, hardware, software, web hosting technology, social media, and search engine optimization (SEO). He has also published three books on Python: Python for Teenagers, Beginning Python: Using Python 2.6 and 3.1, and "Python for the Absolute Beginner".

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured