As a website developer one of the things you should be concerned about it how fast your website is loading. This is very important in order to both gain and retain users. There is certainly the SEO aspect of a fast page load time which is said to improve your rankings in Google but beyond that its creates a much better user experience. When a user comes to your website, if they have to wait for pages to load and your site is slow in general they are more likely to just close your site and never come back. The good news is there are several things you can do to improve your page load times. In this article we will describe a few of them.

Optimizing Images

One of the easiest things you can do for your website to improve load times is to make sure your images are optimized. When we say ‘optimize images’ what we really mean is make sure the file size is as small as possible without compromising image quality. There are 2 things that you can look at for this. The first is to make sure you are saving the image at the pixel size you want it to appear on the page. For example if you want a 200×200 image on your page, save your image as 200×200. Don’t save it as 400×400 and then use height and width tags to resize your image in the browser. The second is to make sure when you are saving an image from your image editing software, check to make sure you don’t select the highest quality for saving, for the web you don’t need it and this will decrease your file size a lot.

Height and Width Tags

Alongside optimizing your images you can also help the browser speed up the loading of your page by letting it know how big the images on your page are. You can do this in the HTML code for your page by adding height and width attributes to your image tags. For example if you have image tags on your page that read as follows

<img src=”/myimage.png” alt=”my image”>

You should add height and width attributes as follows

<img src=”/myimage.png” alt=”my image” height=”200″ width=”200″>

Clean up your HTML and CSS

If you have had your website for a while, or sometimes even if its new, you probably have some HTML code and CSS code in your files that isn’t being used. You might have comments in your html and css or just sections commented out for example. In your CSS files you might have code that just isn’t being used anymore on pages. You should strip out anything in your code that isn’t actually used including comments. The idea is to make your HTML and CSS files as small as possible so that they download faster in the web browser.

Move Javascript to the Bottom

Most people will put Javascript at the top of the page. It isn’t actually necessary to have the at the top of the page and can in fact slow down your page. When your page loads in the browser it loads from top down, if your javascript is at the top of the page it will try to load this before the rest of your page. Moving your javascript to the bottom of the page allows the page to be loaded and displayed before it tries to load the javascript resulting in users seeing your page much quicker.

Change Your Web Host

A lot of the time speeding up your web page is out of your control because the web host you have is slow. If you are on a shared web host for example you might be crammed onto a box with hundreds of other websites all slowing down the server. Your web host might also have slow or overloaded pipes out to the internet making your website load slower. They might also not be taking advantage of server improvements that can speed up your website such as caching and gzipping. Often cheapest isn’t best when picking a web host. When choosing a web host make sure you ask questions about website speed and how they will make your website as fast as possible and do your research to get advice from other on which hosting companies are fast.

Limitations of the current capabilities of CSS include:

Selectors are unable to ascend
CSS offers no way to select a parent or ancestor of an element that satisfies certain criteria, until CSS Selectors Level 4, which is still in Working Draft status. A more advanced selector scheme (such as XPath) would enable more sophisticated style sheets. However, the major reasons for the CSS Working Group previously rejecting proposals for parent selectors are related to browser performance and incremental rendering issues.

Vertical control limitations
While horizontal placement of elements is generally easy to control, vertical placement is frequently unintuitive, convoluted, or outright impossible. Simple tasks, such as centering an element vertically or getting a footer to be placed no higher than bottom of viewport, either require complicated and unintuitive style rules, or simple but widely unsupported rules.

Absence of expressions
here is currently no ability to specify property values as simple expressions (such as margin-left: 10% – 3em + 4px;). This would be useful in a variety of cases, such as calculating the size of columns subject to a constraint on the sum of all columns. However, a working draft with a calc() value to address this limitation has been published by the CSS WG. Internet Explorer versions 5 to 7 support a proprietary expression() statement, with similar functionality. This proprietary expression() statement is no longer supported from Internet Explorer 8 onwards, except in compatibility modes. This decision was taken for “standards compliance, browser performance, and security reasons”.

Lack of column declaration
While possible in current CSS 3 (using the column-count module), layouts with multiple columns can be complex to implement in CSS 2.1. With CSS 2.1, the process is often done using floating elements, which are often rendered differently by different browsers, different computer screen shapes, and different screen ratios set on standard monitors.

Cannot explicitly declare new scope independently of position
Scoping rules for properties such as z-index look for the closest parent element with a position:absolute or position:relative attribute. This odd coupling has undesired effects. For example, it is impossible to avoid declaring a new scope when one is forced to adjust an element’s position, preventing one from using the desired scope of a parent element.

Pseudo-class dynamic behavior not controllable
CSS implements pseudo-classes that allow a degree of user feedback by conditional application of alternate styles. One CSS pseudo-class, “:hover”, is dynamic (equivalent of JavaScript “onmouseover”) and has potential for abuse (e.g., implementing cursor-proximity popups), but CSS has no ability for a client to disable it (no “disable”-like property) or limit its effects (no “nochange”-like values for each property).

Cannot name rules
There is no way to name a CSS rule, which would allow (for example) client-side scripts to refer to the rule even if its selector changes.

Cannot include styles from a rule into another rule
CSS styles often must be duplicated in several rules to achieve a desired effect, causing additional maintenance and requiring more thorough testing.

Cannot target specific text without altering markup
Besides the :first-letter pseudo-element, one cannot target specific ranges of text without needing to utilize place-holder elements.

Some Advantages of using CSS

Separation of content from presentation
CSS facilitates publication of content in multiple presentation formats based on nominal parameters. Nominal parameters include explicit user preferences, different web browsers, the type of device being used to view the content (a desktop computer or mobile Internet device), the geographic location of the user and many other variables.

Site-wide consistency
When CSS is used effectively, in terms of inheritance and “cascading,” a global style sheet can be used to affect and style elements site-wide. If the situation arises that the styling of the elements should need to be changed or adjusted, these changes can be made by editing rules in the global style sheet. Before CSS, this sort of maintenance was more difficult, expensive and time-consuming.

A stylesheet, internal or external, will specify the style once for a range of HTML elements selected by class, type or relationship to others. This is much more efficient than repeating style information inline for each occurrence of the element. An external stylesheet is usually stored in the browser cache, and can therefore be used on multiple pages without being reloaded, further reducing data transfer over a network.

Page reformatting
With a simple change of one line, a different style sheet can be used for the same page. This has advantages for accessibility, as well as providing the ability to tailor a page or site to different target devices. Furthermore, devices not able to understand the styling still display the content.

Without CSS, web designers must typically lay out their pages with techniques that hinder accessibility for vision-impaired users, like HTML tables.

4 pages