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.
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
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!