Introduction
Waiting is always irritating and everyone hates to wait. This is not only true for our general life but it is also true for our websites and webpages. If your website or webpage takes too much time to load then it starts losing its visitors and customers. So we can say website loading time is a crucial factor to provide users a better experience.
Tips
1. Reduce Page Weight: One of the most important factors in page loading is the weight of the page. To reduce the page weight we use a minimization technique (eliminate unnecessary white space and comments) and by moving inline Scripts and CSS into an external file.
Now do you see how to reduce your page weight?
Page weight is nothing but the overall size of the files that the browser must download to display your website. So to reduce the weight of the page use the following tips:
- Remove assets that are not still used: If you are no longer using a widget, definitely consider removing all the associated JavaScript/CSS. This can be an easy process depending on where the widgets are kept. For this you can use some tools such as in the following: JSLint, Dust-Me Selectors, CSS Usage, unused-css.com and so on.
- Minimize CSS: Whereas it might not always be possible, you should attempt to have one CSS file. Yeah of course this reduces the page load time because the browser doesn't need to download additional files. If you are using multiple CSS files, join them and eliminate unnecessary whitespace prior to launch. There are also many tools for minimizing your CSS files, like Sass, LESS and Stylus.
- Minimize JavaScript: The same as for CSS files, you can also minimize your JavaScript files. Certain JavaScript libraries such as jQuery need to be in their own files, but try to fit all of your custom JavaScript into one file. And remember it's a good practice to load your JavaScript at the end of a page, right before the closing </html> tag. Because this will ensure that your script downloads don't block content for that page.
- Put images in the correct format: Incorrect image format result in unnecessary page weight. In general, use JPEG for photographs and PNG for everything else. It's also important to resize photos before you put them on your page. Image dimensions should never exceed the dimensions of their containing element.
- Remove unnecessary fonts: Try sticking to only 3-4 webfonts max in your web design.
- Do not modify your image and use a CSS3 effect with that. Very many web developers modify images and don't use CSS3 because there are very many great tools like Photoshop and Coreldraw. Instead of using modified images to display gradients or drop shadows, use the CSS3 properties, because these properties are really quicker to build and result in a lighter download and images take too much time to download. And by using this the image size will also be reduced.
- Replace JavaScript animations/transitions with with CSS3: JavaScript has been used to animate and move certain HTML properties. Now with CSS3 we don't need JavaScript to do this. CSS3 animations, transitions and transformation properties execute natively in the browser and they require less code than JavaScript.
2. Reduce domain lookups: The page loading time will be increase along with a number of separate domains. Mainly separate domains appear in CSS links, in JavaScript links and Image links. So it is a good practice that you should always take care to use only the minimum necessary number of domains in your webpages and don't use so many domains in your webpage.
3. Cache content can be reused: Always ensure that any content can be cached with some appropriate expiration times. Pay attention to the Last-Modified header. The Last-modified header allows efficient page caching. The Last-Modified entity-header field indicates the date and time at which the origin server believes the variant was last modified for the webpage. If the last modified date is different then the page will again be cached into the cache but if it is the same then the page will load quickly into the browser. Most web servers automatically append the Last-Modified header to static pages (for example .html, .css), based on the last-modified date stored in the file system or FTP server.
Note: For the dynamic pages (like aspx and PHP) it doesn't happen, in other words the dynamic page's last-modified header will not be sent.
4. The components of the page should optimally be in order: The Page component should be in order so the page will can load faster. First of all the page content should load with CSS and JavaScript because by using CSS and JavaScript the page will initially display. The content should be text on your webpage not in images format. Always remember that the dynamic feature, if required, then the first your page should be loaded and then only enabled or load your dynamically feature after the page has loaded.
5. Use valid markup: For the valid markup use modern CSS. It can also reduce the need of Images because we can use CSS3 to design our images mostly logos and colorful text. The advantages of valid markup is browsers will have no need to do error-correction when parsing the HTML.
6. Chunk your contents: Some web-developers and web-designers use nested tables to design them website layout. To design the webpages layout don't use tables because this is a legacy method and uses a <DIV> to design your webpage layout and you can also use a CSS3 Multi-column Layout or CSS3 Flexible Box Layout. The table is still considered valid markup, but should be used to display tabular data and one of the most things instead of displaying nested tables (such as in the following).
- <TABLE>
- <TABLE>
- <TABLE>
- <TABLE>
- ...
- </TABLE>
- </TABLE>
- </TABLE>
- </TABLE>
Display a non-nested table or div (such as in the following):
- <TABLE>...</TABLE>
- <TABLE>...</TABLE>
- <TABLE>...</TABLE>
- <TABLE>...</TABLE>
- <TABLE>...</TABLE>
7. Specify the size and position for images and tables: If you specify the size and position of the images and tables then the browser can immediately determine the height and width of the images and tables so it will be able to display a web page without the necessity to reflow the content. This not only speeds the display of the page but prevents annoying changes in a page's layout when the page finishes loading. So for this reason you should specify the size and position of the images.
8. Use async and defer, if possible: Make the JavaScript scripts such that they are compatible with both the async and the defer and use mostly use async whenever possible. It should be, when you have multiple <script> tags in your webpage. With the async, the page stops rendering while JavaScript is still loading otherwise what will happen is that the browser will not render anything that is after the script tags that does not have these attributes. And for the async you can use an AJAX call in your webpage so the page will stop rendering and JavaScript will be loaded automatically or asynchronously.
Conclusion
Some of these tips can speed up your website load time. You can optimize your webpages. You can reduce the page weight, cache your page and you will use valid markup. So your productivity and the user will not be irritated and the user will not wait for your webpage and visitors and customers will grow on your site and the user will have a better experience.
Gowtham RajamanickamPosted Apr 20, 2015, 3:09 PM
good one
Krishna dhivyaPosted Feb 26, 2015, 6:20 AM
really very useful image but image is not only the heavy loader to access image
Michal HabalcikPosted Feb 13, 2015, 1:22 AM
great tips. Maybe I would add decreasing the quality of images. There are many great tools that can handle it. The image size will be smaller without noticing any quality change.
Shaili DashoraPosted Feb 13, 2015, 1:19 AM
Nice one..