- Use JPG images on your website because PNG’s size are greater then JPG’s images size.
- Use exact dimensions of images as needed. Suppose you need 400×300 and you are using 1024×768 it affects load time.
- Do not use Inline CSS instead use Classes so it is easy to render HTML and then all CSS applied to it.
- Use less images or it’s necessary to use image(at least make your half images converted to x264 described below) or icons, use SVG icons e.g. Font Awesome ( described below).
- Use Websites to measure your load time Like Google Insight ( Usage described below)
Use JPG Images Instead of PNG Images
Using PNG images (.png) may increase your load time and page size too. Here is the suggestion for you to use JPG consider this example & you will understand better. Let’s suppose you are using PNG image as your logo with a size of at least 300kb and dimensions are 3000×3000. Means it will take 300kb to render on user device. How to make it JPG.
If your header background is white then give your image a white background or your desired background color to blend it nearly and save it as .jpg extension use Photoshop or image converter to do it. Let’s talk about the dimensions.
Use Exact dimensions of Images and Resize as per need
If your image height and width is 3000×3000 and your logo will shown with a height and width of 220×64 why you are using a large image which increase your load time. How to resize image with Photoshop and Other Tools. Because Website Optimization totally ruin by Images extensive use of images may increase page load use dimension as per need.
Use CSS Classes Instead of Inline CSS
Whenever you visit a website the Style sheet loaded and then cached in browser. It will not load every time you refresh or navigate to another page which contribute some kb’s and help you to save bandwidth as well as rendering your page. Which concludes Inline CSS are trouble for your webpage and draining your bandwidth.
Use SVG Images and SVG Icons
Why it is recommended to used SVG images and icons because they load faster then actual images. They are made of some lines and curves which render faster. SVG is a new term uses for webpage images. If you want to include SVG icon then there is library called font awesome. Check out Font Awesome & how to include it your website.
Using Google Insight, Measure Load Time of Webpage
- Open Google Insight page.
- Write the URL in the text box and press analyze. it will show you result like this.
It is for only one page means the index page right now. Paste the URL of every page and get the result.
- You can download optimized content at the bottom of the page.
Once you replace the files. Now check your URL in Google Insight you will see the result. I write another article which belongs to totally Google Insight how to solve all the Insight errors and make it super success to load it more earlier then before.