This article discusses some of the basic concepts of optimizing a web page to make the web page load quickly – or at least, more quickly. It is for the benefit of those who are not technically oriented, but need to have a means of discussing these concepts with their web developer.
Reduce the amount of data required to display the page
A web page consists of html, scripts, style documents, and media such as images and videos. These components should be reduced in size as much as possible to shorten the time required to download them. Images typically represent the greatest opportunity for optimization. Browsers cannot display image resolutions higher than 72 dpi, so there is no point in loading anything of higher resolution. Additionally, the images should be sized to the size being displayed rather than having html resize them. The html code itself should be concise and correct. The code should be validated to ensure that it meets the requirements of the document type. All presentation elements should be moved to an external css style sheet. On a website with many pages, there should be a fundamental style sheet and then a separate style sheet for each page. Smaller websites should have only one stylesheet. Finally, css and javascript files should be ‘gzipped’ (compressed) and/or ‘minified’ which removes non-essential characters without changing the functionality. If you have a WordPress site, the W3 Total Cache plugin will do that for you.
Reduce HTTP Calls
The next important key step to increasing web page loading speed is to reduce the calls to the internet within your web page (reducing HTTP calls). There are several aspects to this issue: combining scripts and style sheets, using image sprites, and avoiding redirects or frames. These are critical areas in which your website performance can be improved.
Content Distribution
If your audience is widely distributed geographically and you make extensive use of graphics and/or video files, you should be using a Content Delivery Network (CDN). These are systems with widely distributed servers that are optimized for content delivery. Also, loading your videos and images on a different domain (such as a CDN) allows browsers to load your content more quickly. Amazon S3 is the most widely used CDN and certainly the most cost-effective. You might also use a second domain on your webhost to store the style sheets and javascript elements to allow them to load faster, especially if you use cookies. Content should always be delivered from a domain that does not use cookies.
In violation of concepts above, the home page will benefit from having style and javascript elements within the page. This works because it reduces the http calls, but it should only be used on the home page. In this case, a gzipped version of the style elements must be placed at the top of the html page within the head section and the javascript elements – just those required for the home page – placed just above the closing body tag.
Network Issues
If your optimized website still loads slowly, you will need to evaluate your webhost and your ISP. If your webhost is slow, your website will load slowly. You will need to upgrade your webhost. Or it may be just that your ISP speed is slow in which case other people will see your website load quickly, but you will always see it load slowly. Time to shop around for a new ISP.
These are just a quick general discussion of the aspects of website optimization. Please contact us if you have further questions.