javascripthtmlcssfrontendload-time

Frontend minimize load time

I am using new-relic and for my website, the homepage is taking 8 seconds on average to be fully loaded. The network requests are fast, but the dom and page rendering are whats slowing it down. I have google +, facebook, twitter share buttons and bxslider.

When I run it in my browser it takes 2-4 seconds. I am not very familiar with how to optimize frontend performance. I am pretty shocked it is taking that long.

If anyone could give me tips to speed it up; that would be great.

I tried to figure out how to use google chrome profiler tool, but it says 80% idle.

The website is http://phppointofsale.com

Screnshot

Solution

  • I think the profiling tool you are using might have issues. In my PC (Windows 7, Chrome 34.0.1847.131) your website loaded in more or less 2 seconds. So i run some tests with various tools to see what is going on.

    1. Pingdom

      enter image description here

      As you can see the load time is 1.2 seconds and your site is 85% faster of all tested sites. The most load time is taken by plusone.js which is 247ms and jquery.bxslider.js?v=1.0 , jquery.fitvids.js?v=1.0 , jquery.slicknav.min.js?v=1.0 , functions.js?v=1.0 each of them take 227ms.

      Time spent per Content:

      -Script 39.44%
      -Image 37.75%
      -HTML 12.67%
      -Other 7.45%
      -CSS 2.69%

      Time spent per Domain

      -phppointofsale.com 51.40%
      -apis.google.com 8.01%
      -www.facebook.com 6.80%
      -themes.googleuser… 5.83%
      -static.xx.fbcdn.net 4.01%
      -other 23.95%

      Here you can see the results by yourself.

    2. GTmetrix

      enter image description here

      This tool gives your pageload 3secs

      Here you can see the results by yourself.

    3. Loadimpact

      enter image description here

      This tool also gives(as the first one) a load time of 1.3secs.

      Here you can see the result by yourself

    Now the are some technics that you can use to speed up your site. Based on the previous tools i would suggest specific for your site:

    1. Minify CSS

      Example:Your CSS could be minified to this and you have 25% size reduction.

    2. Specify image dimensions

      Example:<img class="feature-img scale" src="img/multiple_devices.png" alt=""> is missing width and height attributes

    3. Minify JavaScript.

      Example: Your JS could be minified to this and you have 44% size reduction.

    4. Make fewer HTTP requests

      This page has 22 external Javascript scripts. Try combining them into one. This page has 8 external stylesheets. Try combining them into one.

    5. Leverage browser caching

      Some cacheable resources (as this one) have a short freshness lifetime. Specify an expiration at least one week in the future.

    6. Add Expires headers

      There are 44 static components (as this one) without a far-future expiration date

    These and many more information you can get tehm from the links provided.