Frontend minimize load time

Question

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

• Brown is network
• Yellow is DOM
• Blue is page rendering

Answer 1

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
   
   
   
   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
   
   
   
   This tool gives your pageload 3secs
   
   Here you can see the results by yourself.
   
   
3. Loadimpact
   
   
   
   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.

Answer 2

From visiting your site I think your reports are being skewed from the calls to your adroll.com and social media. A good tool to use here is YSlow: I ran it quick on your site and this would be the one I would address first:

Grade F on Make fewer HTTP requests
This page has 21 external Javascript scripts. Try combining them into one.
This page has 8 external stylesheets. Try combining them into one.