Ways to Speed Up Your Website (Load speed up website or any web application)

Ways to Speed Up Your Website

1.       Minimize HTTP Requests :-
According to Yahoo, 80% of a Web page’s load time is spent downloading the different pieces-parts of the page: images, stylesheets, scripts, Flash, etc.

2.       Use CSS instead of images whenever possible.

3.       Combine multiple style sheets into one.

4.       Reduce scripts and put them at the bottom of the page.

5.       Enable browser caching :-
When you visit a website, the elements on the page you visit are stored on your hard drive in a cache, or temporary storage, so the next time you visit the site, your browser can load the page without having to send another HTTP request to the server.
Read this article to learn four methods for enabling caching.
Modify the web application's :-

1.       Minify Resources :-
Since every unnecessary piece of code adds to the size of your page, it’s important that you eliminate extra spaces, line breaks, etc.
To minify HTML, CSS and JS files Here’s Google’s recommendation:-
1.)    To minify HTML, you can use PageSpeed Insights Chrome Extension to generate an optimized version of your HTML code. Run the analysis against your HTML page and browse to the ‘Minify HTML’ rule. Click on ‘See optimized content’ to get the optimized HTML code.
2.)    To minify CSS and javascript files, you can use Grunt and YUI Compressor.

2.       Optimize images:-
With images, you need to focus on three things: size, format and the src attribute.
1.       Image size :-
Crop your images to the correct size.
Set the width parameter (width=”570”).

2.       Image format :-
JPEG is your best option.
PNG is also good, though older browsers may not fully support it.
GIFs should only be used for small or simple graphics (less than 10×10 pixels, or a     color palette of 3 or fewer colors) and for animated images.
Do not use BMPs or TIFFs.

3.       Src attribute :-
Once you’ve got the size and format right, make sure the code is right too. In particular, avoid empty image src codes.

3.       Optimize CSS Delivery :-
Avoid including CSS in HTML code, such as divs or your headings (like the inline CSS pictured above). You get cleaner coding if you put all CSS in your external stylesheet.

4.       Reduce the number of plugins you use on your site :-
Deactivate and delete any unnecessary plugins. Then weed out any plugins that slow your site speed.

5.       Avoid bad requests :-
Removing "broken links", or requests that result in 404/410 errors, avoids wasteful requests.

6.       Combine images into CSS sprites :-
Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page.

7.       Optimize the order of styles and scripts :-
Correctly ordering external stylesheets and external and inline scripts enables better parallelization of downloads and speeds up browser rendering time.
Put inline scripts after other resources if possible.
Put external scripts after external stylesheets if possible.

8.        Serve scaled images :-
Properly sizing images can save many bytes of data.

9.       Use consistent casing, i.e. use lowercase wherever possible.

10.   Specify a character set:-

Specify a character set in HTTP headers to speed up browser rendering. This is done by adding a simple piece of code into your header:-

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

11.   Use / at the end of directory links :-
Don't do this: <a href="http://www.URL.com/directoryname">
Do this instead: <a href="http://www.URL.com/directoryname/">

12.   Convert Image into a base64 string.
It works by encoding an image into a base64 string and place it directly withing an HTML image tag or as a CSS background URL. Online image to base64 converter

13.   Store static images in local storage html 5
The caching in HTML5 local client storage is way more effective than browser’s caching.
var hero;
if ( localStorage.getItem(‘heroImg’)) {
hero = localStorage.getItem(‘heroImg’);
else {
hero = ‘/9j/4AAQSkZJRgABAgAAZABkAAD/7    /…/    6p+3dIR//9k=’;
document.getElementById(“hero-graphic”).src=’data:image/png;base64,’ + hero;

The corresponding HTML Image element
<img id=”hero-graphic” alt=”Blog Hero Image” src=”” />


Related Posts Plugin for WordPress, Blogger...