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.
OR
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. 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.
Example:-
<script>
var hero;
if ( localStorage.getItem(‘heroImg’)) {
hero = localStorage.getItem(‘heroImg’);
}
else {
hero = ‘/9j/4AAQSkZJRgABAgAAZABkAAD/7 /…/ 6p+3dIR//9k=’;
localStorage.setItem(‘heroImg’,hero);
}
document.getElementById(“hero-graphic”).src=’data:image/png;base64,’ + hero;
</script>
var hero;
if ( localStorage.getItem(‘heroImg’)) {
hero = localStorage.getItem(‘heroImg’);
}
else {
hero = ‘/9j/4AAQSkZJRgABAgAAZABkAAD/7 /…/ 6p+3dIR//9k=’;
localStorage.setItem(‘heroImg’,hero);
}
document.getElementById(“hero-graphic”).src=’data:image/png;base64,’ + hero;
</script>
The corresponding HTML Image element
<img id=”hero-graphic” alt=”Blog Hero Image” src=”” />
