Website Optimization & Reduce Website Load Time

Website optimization is headache reduce load time easily. Simplest way to optimize your website with step by step Tutorial. How to use Google Insight and Optimize your Website.

Share

Website optimization becomes problem for every one, your images, JavaScript libraries, Uncompressed CSS becomes headache for everyone. How to accomplish optimization you question will be answered properly here. Why i choose this topic because one of my friend ask me yesterday, i told him what to do. It is not a big deal you can do it easily with your own. Follow the Steps

  • 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

According to me Google Insight is one of the best tool to check Website Optimization. It is developed by google it self for web developers a handy tool to check and boost webpage speed. It helps you measure your webpages and help you make it according to user and robot friendly. Insight will check your webpage load time and give you score out of 100 for both Mobile and Desktop. Also it will tell you which images, CSS or JavaScript  must be optimize. How to use Google Insight.

  1. Open Google Insight page.
  2. Write the URL in the text box and press analyze. it will show you result like this.
    Optimize Your Website OnlineIt is for only one page means the index page right now. Paste the URL of every page and get the result.
  3. You have to do some changes like Images optimization, CSS Compression, JavaScript Compression etc.
  4. You can download optimized content at the bottom of the page.
    Google Optimized ContentUnzip this folder and replaces the images, JavaScript’s, and CSS to tackle the problem of Optimization.

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.

 

Leave a Reply

Your email address will not be published. Required fields are marked *