Web Optimization – One Thing Leads to Another

0
3

Before you optimize a website for search engines, one should obviously grasp the concept of Search Engine Optimization (SEO). What is the process of finding and loading a web page into your favorite browser? Sure it takes only a few seconds to have it done, but what is really going on behind the curtains?

I will say that plenty of webmasters focus solely on having the website optimized for search engines (SEO) and search engine marketing (SEM). Surely these webmasters are doing a great job, but are they taking the website's aesthetics and functionalities into consideration? Perhaps not entirely!

So, have you ever heard of Web Optimization? Let's take NO as an answer! Do I have to blame you for that? NO because many so called SEO experts speak about SEO, Search Engine Marketing (SEM) but only a few deal with the site content optimization and trust me, the way your site and coding is presented makes a difference, just like when you add custom made spoilers on your vehicle to spice up the appearance.

Having a fully optimized website takes a great deal of time and in a way it is nearly impossible to exist with every single rule, however some of the (neglected) rules can be easily implemented. So I'd rather say that it is better to have a website which is 80% optimized instead of having a site which is 25% optimized.

So I decided to compile these steps to indicate the easy bits as well as the hard bits for web optimization. Surely there are more techniques around, but I will highlight the essentials.

Tips for Web Content Optimization

1) Web Hosting – It is important to have a decent web hosting provider. Although the web optimization techniques given below are not strictly based on the quality of the web hosting provider, having a stable host is the foundation of the website's stability and security. On top of that, some web hosting providers to provide tools to optimize the web. Before choosing a web hosting provider, you should understand the needs of your website and last but not least to carry a research, reading reviews or ask users to give their personal opinion.

2) Minimize HTTP Requests – When you type a web address, say CNN.com, Amazon.com, eBay.com, etc., you are requesting the website along its assets (images, scripts, stylesheets and Flash items) to load into your browser. Ever wondered why a website like CNN.com, despite its size does still load in less time?

Few easy practices to reduce HTTP requests

The beauty and pain of visuals!

a) Reduce number of images – One famous technique is the CSS sprite. This technique allows you to pile background images into one single image file. Then through the Cascade Style Sheet (CSS) you can declare coordinates to display a certain part of that image. Say, if you have 5 images, the browser will send 5 requests to load these images being placed in a queue. Through CSS Sprite, one can merge these 5 images into 1 single image. That means the browser will only send 1 request to load 1 single image while bypassing the queue. If the site carries many background images, I would suggest NOT to create one single image file, but to create few. For example if you have 20 background images, at least divide these images into 4 groups, where each group consist of five images piled into a single image file.

b) Compress images – Everybody hate low quality images, but what I am saying is to save most of the images into 'jpg, jpeg and gif' while reducing a bit the quality which would hardly make a difference to the human eye. By doing so, the image file will weigh less that ensuring faster loading.

c) PNG images – The pros of a .png image is that it supports high quality transparency and shadows. However the con is that .png images tend to slow down the browser in its loading process unlike the standard .gif or .jpg image, especially when the viewer got a slow connection. Therefore minimize the use of PNG images where possible.

d) Use the 'width' and 'height' tags – When defining the image width, you are instructing the browser to display the image at the indicated size. The height tag despite important, it is not a preliminary rule. If you do not define the height, what happens is that the browser will display the image proportionally. The width tag must be strictly defined especially because browsers like Internet Explorer require that. Else what happens is that browsers will spend additional time to understand the way the very image should be displayed.

Example:

<img height = "200" width = "450" ​​src = "http: // www. mysite.com/wolf.png" alt = "wolf photo" />

e) Do not scale images – If you need to display an image in these following dimensions eg 300px by 300px, make sure to save the image in the desired dimensions rather than having an image of 800px by 800px scaled down to 300px by 300px through the 'width' and 'height' tags. Else the browser will take additional time to load the image.

3) Cache – If your web hosting provides options to make your website cacheable, just go for it. I would strongly suggest caching for images.

4) GZIP Compression – Most web hosting providers have this feature incorporated within their control panel (usually the cPanel). If not, you'd better ask your provider to enable this feature (if possible). GZIP Compression is useful to compresses the site so to reduce its weight thus ensuring less loading time and better user experience. I would not suggest using GZIP Compression on.html /.php files, but sure I suggest to use it on the image folders especially if your website carries a goldmine of images.

5) Use a forward slash in your links – When a server is requested to open a link (eg 'http: // www. Mysite.com/contact'), it must figure out what kind of file the server should load, and such process although it is a minor one would still consume few extra milliseconds off the loading time. By adding a slash at the end link (eg 'http: // www. Mysite.com/contact/'), the server will be aware that the link is pointing to a directory. Although this rule is not a cardinal one, it still helps in saving time.

6) Cascade Style Sheets (CSS) – Few easy practices to minimize loading time and HTTP requests.

a) Limit the amount of CSS – At times it is unavoidable to limit the use CSS but if you have an option, go for it. Ideally a website should contain from 2 – 5 CSS files. Two of them should be the 'style.css' (determining how the website should display) and the 'print.css' which defines the printable version of the website. When a viewer previews the printable version, the browser loads the print.css which will display the website according to the attributes defined in the same stylesheet.

b) Compress CSS – Best way is to eliminate undue entries and white space. For example:

.container {

background-color: # 000;

background-image: (url: images / bg.jpg);

background-position: center top;

border-style: solid;

border-size-left: 1px;

border-size-top: 2px;

border-size-right: 1px;

border-size-bottom: 2px;

}
As you can see, this chunk of code will display a box classed as 'container' with a background image, a solid border along its dimensions. This CSS entry is undue and it weighs! Below is a compressed version of the same code:

.container {background: (url: images / bg.jpg) # 000 center top; border: 1px 2px solid}

What is the conclusion? Beside the compression, the entry is given into one single line. The more lines you have, the more the CSS file weighs, because white space takes a bit of memory.

c) CSS Placement – Best is to place the CSS files high on top within the header tag <head> … </ head>, so the browser will load them instantly so pleasing the eye of your viewer.

7) Javascripts (JS) – Responsible for various (novel) functions.

a) Quantity of JS files – Placing all JS files into one single file may create major conflicts between coding, although not all JS codes conflict with each other. Therefore you can still merge few js scripts into one single file.

b) JS Compression – Strict compression may mess up or delete important coding. Although compression is essential try to be moderate with it. Always keep a backup of the original JS code to be on the safe side.

c) Place JS files at the bottom (footer) – Most JS files slow down web loading, therefore if certain JS files are not responsible for critical functions, it is suggested to have them placed in the footer. By doing so you will divide the loading priority by having the header content loading first, and the footer content loading next.

2) Add Expires or Cache-Control Header – Nowadays web site designs are getting more complex especially given the amount of stylesheets, scripts, images and Flash within the page. When a site is loaded for the first time within a browser it will make some HTTP requests. However if to set the Expires, you will end up making these components cacheable so avoiding unnecessary HTTP requests. This technique is often used with images but ideally it should also be used on the other components (stylesheets, scripts and Flash components). With this approach you are informing the browser that such content will not expire until the specified date for example: 'Expires: Wed, 22 Jan 2014 23:00:00 GMT' . However if you plan to implement frequent changes, I would recommend not to set the expiration at far future (say 2090) otherwise the visitor will still see the old page until it expires.

3) Minimize DNS Lookups – When you type a domain name (eg http://www.Google.com ) into your browser, a Domain Name System (DNS) lookup takes place thus returning the server's IP address which usually takes around 20- 120 milliseconds maximum (according to YSlow documentation) . The browser will not download anything from the hostname until the DNS lookup is complete.

DNS lookups are cached by the user's ISP not excluding the user's own computer. As well, most browsers (especially Opera) have their own cache system which helps in loading the website faster especially after the 1st visit.

In fact try accessing a website that you never visited before and monitor its loading time. Then try re-visiting the same website few minutes later and you will notice the great difference in the loading time.

Two options that help in minimizing DNS lookups are: i) reference less stuff (ie scripts) from third party domains, and ii) try hosting the refereed stuff into your own domain. Although some may disagree with that point, I would still suggest it as a 'force majeure'.

4) Avoid Redirects – Redirections are one major cause for poor website loading leading to poor user experience. Perhaps you faced situations where the browser remains constantly white, while you see a variety of web addresses referred to in the browser's progress bar (usually at the bottom), do you? Redirections take the user to the specified location but if not properly set, this tend to lead into a never-ending redirection, meaning the page continues in referring again and again. There are various approaches of how to set a proper redirection through the index.php, .htaccess, and.asp. Below is an example of an HTTP redirection through the .htaccess file:

Redirect 301 /old/my-current-page.htm / new / http: // www. mysite.com/new-page.htm

5) Content Delivery Network (CDN) – A content delivery network (CDN) is a collection of an interconnected system of computers spread across multiple locations on the Internet to provide web content rapidly to numerous users by duplicating the content on multiple servers and directing the same content to users based on proxity.

This approach is recommended for large websites with a huge amount of traffic. Typical examples are sites dealing with news (eg CNN.com, BBC.co.uk) search engines (Google.com, Bing.com, Yahoo.com) and popular shopping sites (ebay.com, amazon.com, target.com , etc.). These websites submit a plethora of HTTP requests for the same web content, and the more the demand is present for the specific content the more time will be taken to have the content loaded into your browser. At times one may note like 'can not connect to server' , or 'site may be busy' .

Although this approach is tailor-made for large websites, owners of small websites can still benefit from this approach (refer to Off-site Hosting).

6) Off-site Hosting – This is a terminology I came up with. It somehow resembles CDN due to its process. In other words this technique consists in hosting the web assets (eg scripts, stylesheets, images) into a separate hosting. Alternately I tried this approach by registering subdomains and I noticed an increase in speed. For example what I did was:

http: // images. mysite.com/ (for images)

Nowadays many of service providers are coming up with these alternatives. Few of these services are given for free where others are paid. Examples are:

Amazon S3 and Cloud Front (both paid services provided by Amazon)

Google Ajax Library (instead of loading your favorite scripts from your server, you can instead load them through the Google server)

Flickr (for images)

Through these approaches, the HTTP Requests will be spread across multiple servers for example, your server will be used for all your web content, whereas the Google Ajax Library will be used to load your favorite scripts (eg jQuery, SWFObject, MooTools, Prototype) .

Basically that is all! It is important to keep yourself updated with current trends because by time such techniques may become obsolete.

Source

Leave a Reply