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.

Answer 3

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 recomendations:

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

There are some others but those are the principals.

In conclusion the main recomendation 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:

• Jscompress
• Instant Sprite

Answer 4

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.