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

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

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.

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

• javascript
• html
• css
• frontend
• load-time

• The network part of the web site is fast, it is the dom loading and page rendering that is the problem. – Chris Muench Commented May 11, 2014 at 16:25
• 1 I added the profiling for last 7 days – Chris Muench Commented May 11, 2014 at 16:27
• 2 I've noticed (in one of my earlier projects) quite some annoying slowdowns when using Google+ and Facebook buttons, although your graph doesn't seem to indicate this. But when I load your website, I see it, fully rendered and working well within 3 seconds. And that's on a laptop of over 3 years old, which could use some reinstalling anyway. – GolezTrol Commented May 11, 2014 at 16:38
• 1 Do you think the profiling tool might have issues? I just tried on a 4 year old puter and was under 4 seconds – Chris Muench Commented May 11, 2014 at 16:45
• 1 Similar results here. I'm getting the page fully rendered and functional within 2 seconds. – msg45f Commented May 13, 2014 at 17:52

4 Answers 4

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. 51.40%
   -apis.google. 8.01%
   -www.facebook. 6.80%
   -themes.googleuser… 5.83%
   -static.xx.fbcdn 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 bining them into one. This page has 8 external stylesheets. Try bining 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 ponents (as this one) without a far-future expiration date
   
   

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

From visiting your site I think your reports are being skewed from the calls to your adroll. 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 bining them into one.
This page has 8 external stylesheets. Try bining them into one.

1. Understand the best practices fundamentals, reading:

   • The legendary Yahoo article Best Practices for Speeding Up Your Web Site. Yahoo based his performance tool YSlow on that article.
   • Article by Google Developers: Web Performance Best Practices

2. There are several other diagnosis tools like Google Chrome Audit Panel. Firefox and IE have similar tools.

3. Use a tool for automatize these main good practices. Two good tools for that are: Grunt.js and Gulp.js. Here you have an introduction to Gulp.

4. I checked you site right now and these are some YSlow reendations:

   • This page has 19 external Javascript scripts. Try bining them into one (you can do this with Grunt.js or Gulp.js).
   • This page has 8 external stylesheets. Try bining them into one (you can do this with Grunt.js or Gulp.js).
   • Add Expires headers. There are 45 static ponents without a far-future expiration date (mainly css, js and images.you can do this in several ways).
   • Compress ponents with gzip. There are 21 plain text ponents that should be sent pressed. You can do this sending a http request for gzip.

There are some others but those are the principals.

In conclusion the main reendation is to minify and join: all css files in 1 file, all js files in 1 file, and all images you can in 1 css sprite. This is better done with Gruntjs or Gulpjs but if you need a quick and dirty way, you can use online tools like:

• Jspress
• Instant Sprite

As an additon to @McCheesiIt's answer +1

1. Using bxslider, try to add the property preloadImages

   $('#features').bxSlider({
       auto: true,
       pause: 8000,
       preloadImages: 'all' // or 'visible'
   }); 
   

2. Put your <script></script> tags in the <head> section or just before the closing body tag </body>

BTW: I have a very slow DSL line (8'000Kbytes DL / 15Kbytes UL) and your site loaded in 3.00 seconds, which is acceptable.