Skip to content
1. When to Preload
Preload enables the browser to quickly download and cache a resource. It’s useful when you need a resource within a few seconds of the page loading and wants to save time. You can preload a number of things like – fonts, styles,images, etc.
For CSS
Before
<link rel="stylesheet"type="text/css"media="all"href="/css/styles-m.min.css"/>After
<link rel="preload"as="style"href="/css/styles-m.min.css”/>
For Image
Before
<link rel="shortcut icon"type="image/x-icon"href="https://dev.dummy.com/media/favicon/default/favicon.jpg"
After
<link rel="preload"as="image"href="https://dev.dummy.com/media/favicon/default/favicon.jpg"/>
For Fonts
Before
Src:url( fonts/cicle_fina-webfont.woff2 )
After
<link rel="preload"href="fonts/cicle_fina-webfont.woff2" as="font"type="font/woff2"crossorigin>
2. When to Lazyload
You can Check in page speed insight opportunities of Defer offscreen images.after that we apply lazyload for the images that given in defer offscreen images.
Eg:- < img loading=lazy >
3. When to go for SVG
3.1 firstly Optimize your image
SVG images do not lose their quality when zoomed or resized.They can be created and edited with an IDE or text editor. They can be Created and edited with an IDE or text editor. They are accessible and animatable.They have a small file size and are highly scalable and they can be searched,indexed scripted and compressed.
- We are using Optimized SVG’s can significantly reduce your page size as well as help the website load faster.
4. When go to sprite
- A web page with many images, particularly many small images,such as icons, buttons, etc.the user can take time to load and generate multiple server requests
- Sprites are two-dimensional images which are made up of combining small images into one larger image at defined X and Y coordinates.
Example
div.footerWrap div.container ul li a.sprite.sp-paytm {background-size: 900%;height: 45px;width: 70px;background-position: -406px -1408px;background-position-x: -406px;background-position-y: -1408px;}.sprite {display: inline-block;
