It’s amazing how the web has transformed the way we do business. Today companies have extended their reach and found opportunities on the web never thought possible. This article is one of a series that aims to help web leaders focus on specific strategies to optimize web delivery – of content, theory, design or implementation.
I love stories about the history of web sites. My favorites are the ones started in basements and dorm rooms with only a vision and a dream to guide them. Just a small group, or maybe one person, with a single goal to put something out there for the masses. Something new and creative, something that someday no one will forget or be able to live without. These are your facebooks and tumblrs, and countless other internet entrepreneurs that have branded the web landscape.
There are plenty of business eCommerce examples of this sort of web legacy too. I’ve heard a number of ‘my nephew created the site for free’ and ‘it started as a free portal and grew from there’ stories. I think that’s great, it shows the flexibility of the medium. There are a lot of ways to put your site out there and get good results.
What your nephew maybe didn’t tell you is that there are ways to do it better. Guidelines that when followed, will make big differences in how effectively your page is delivered. Does your web site have that “white flash” between every click of a page link? When your pages do start showing up, do the images shift and the fonts resize? Does the page continue to load even though you think it should be done? Here are some tips that can improve your page performance:
- Styles at the top. For maximum display quality and consistent appearance, that’s the way it should be. All CSS or page styling should live in the “head” section of the html. That means the browser can get the styling rules straight before the “body” renders the page. No twitching or shaking as new style rules are introduced.
- Scripts at the bottom. When there is JavaScript content in the “head” section, the browser needs to make sense of it before it starts rendering the display. This causes lag, or what’s referred to as “latency”. When we put scripts just before the closing of the “body” tag, we ensure the page is loaded (for all intents) before the browser starts in on any script processing. Your page loads faster, at least in the users’ eyes. That’s what counts, don’t you think?
- Reduce stuff on your page. To all degrees. Reduce the number of http requests your page makes by merging .css and .js files into as few as possible. Make script and CSS references smaller by minifying them, or using the minified version. Use a content delivery network for commonly used libraries that you shouldn’t be using your bandwidth to get (like jQuery or Google Analytics).
- Use some tools. Open the developer tools on your web browser to see what’s happening. Question all the http requests. See what loads last and why. Use a validator to see if your markup is everything it should be.
- Get rid of 404 errors. Not only is the content you’re trying to show not there, the server is taking extra time to point that out to you!
- Think about simplifying. Do you have an excessive amount of form elements on the page? Are you using iframes and a lot of images? Is the interface as clean and simple as you would like? Maybe it’s time to rethink with a standards-based responsive design?
Your web site started from humble beginnings, that’s a great story. But what should the sequel be? HTML is the language of the web, so communicate effectively. I’m pretty sure your nephew would agree.