Optimizing a Web Page to Load Faster
A slow loading web page might as well not even exist. Now that may seem like a bold statement, but consider this: 40% of web surfers will cancel or navigate to a different web page is it does not load in 3 seconds. 3 seconds!!!? It takes that much time to turn your computer chair around and stand up.
Even though this information speaks volumes about the patience humans have with computers, the simple fact remains that 3 seconds or hopefully less is the standard that webmasters have to adhere to when it comes to designing web pages.
Have no fear! There are some techniques you can implement that will help speed up your pages’ loading time and hopefully keep your pages well below the 3 second loading time.
Optimize Your Images
First thing you need to do with your images is make sure the images are the same size as you plan to display on your web page. If the image is 800 pixels wide and 600 pixels high, and you plan to display the image as 400 pixels wide and 300 pixels high, do not use your browser to resize the image by changing the dimension in the HTML code. Your browser will still have to load the large image before resizing. This common mistake will drastically increase the size of your page.
Secondly, use a program like Adobe Photoshop to optimize the image for web. Optimizing your images by reducing colors and quality can reduce the file size even further without sacrificing too much from the visual appearance. These days, a professional image program can optimize your images, and you won’t even be able to tell the difference.
Last, but certainly not least, keep the amount of images to an acceptable level. A good rule of practice is to keep the images on your pages to no more than 10, but 5 or less is better for page speed.
Optimize Your Code
There are actually several ways to reduce the amount of code on your pages. Not only will optimizing your code reduce the time it takes to load your page, but will also make it easier to edit later.
Use External CSS Stylesheets
The most popular form of code reduction is to use external CSS stylesheets. By moving all your inline styles to an external sheet will dramatically reduce the “code bloat” from your page. Now you may think that loading here or there won’t make a difference, but hopefully you will reuse the styles throughout your website, without having the server have to process the same command over and over again. If your page is well optimized, then there probably will not be a single style=”” anywhere, but instead with id=”” and class=”” accordingly.
Customize Your Standard Tags
As an extension of the external stylesheet, another good practice is to make sure you have customized all of the standard tags. These tags are:
- Body (<body>)
- Heading 1, 2, 3, 4, 5, 6 (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)
- Link (<a>)
- Paragraph (<p>)
- Preformatted (<pre>)
- Strong (<strong>)
- Italics (<em>}
- Unordered list (<ul>)
- Ordered list (<ol>)
- Quotes (<blockquote>)
If you have some users on your website that will use a WYSIWYG editor to add articles/posts to your site, customizing these tags will help keep their article looking like the rest of the site, and hopefully will deter them from using a whole bunch of inline styles to achieve the same desired effect. Trust me, this will happen otherwise.
Load JavaScript into the Footer
The next technique can be as simple as loading your JavaScript into the footer. Anything that doesn’t need to be loaded for layout or navigation purposes can be loaded into the footer, allowing the rest of the page to load before the server has to process the JavaScript code.
Use Tables Only When Absolutely Necessary
After the tableless revolution a few years back this doesn’t happen in websites as often. Tables can be replaced with positioned divs in a lot of cases which can really reduce the amount of code on a given screen. For example, if your cells are the same size and evenly placed, a relative positioned div with the same id tag can be used, where as a table requires endless <tr><td><td></tr> for every single cell and row.
Onload as Little as Possible
Try to stay away from the <body onload=””> tag as much as possible. Anything that is dropped between these quotes will have to be processed before the page is displayed.
Cache Where You Can
Caching is one of the most underutilized page speed options available. Setting your cache will allow returning visitors to see the same page as before if the content hasn’t changed. Why should a browser have to reload the page if nothing has changed on it? Just understand that this option will not help your new visitors, but will make your returning visitors very happy (without knowing it)!
If you can manage all of these optimization techniques then there is a great chance that your page will be easily under the three second mark. If you think there is any other technique that I have missed I would love to hear it! Please fill out the comments option below and let me hear your wisdom!
