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

Screnshot

Brown is network
Yellow is DOM
Blue is page rendering

The network part of the web site is fast, it is the dom loading and page rendering that is the problem. — Chris Muench, May 11 '14 at 16:25
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, May 11 '14 at 16:38
Do you think the profiling tool might have issues? I just tried on a 4 year old computer and was under 4 seconds — Chris Muench, May 11 '14 at 16:45
B.t.w. I tried in Chrome and IE. Maybe IE was slightly slower, but still nowhere near 10 seconds. — GolezTrol, May 11 '14 at 16:46
Similar results here. I'm getting the page fully rendered and functional within 2 seconds. — msg45f, May 13 '14 at 17:52
The first time i visited the page, the page itself took 5 seconds to leave the "waiting" phase, however, after that first load, all of the loads were far quicker than that. Was unable to recreate it taking longer. — Kevin B, May 13 '14 at 17:58
Well just to bring in a different observation: It takes 4–6 seconds for me everytime I load the webpage (for a *full* load). — Ingo Bürk, May 13 '14 at 18:09
Another observation using Chrome's Dev Tools: 60–70% of that time is spent on Javascript. — Ingo Bürk, May 13 '14 at 18:11

score 5 · Accepted Answer · answered May 14 '14 at 12:53

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.

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.
GTmetrix

This tool gives your pageload 3secs

Here you can see the results by yourself.
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:

Minify CSS

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

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

Example: Your JS could be minified to this and you have 44% size reduction.
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.
Leverage browser caching

Some cacheable resources (as this one) have a short freshness lifetime. Specify an expiration at least one week in the future.
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.

score 3 · Answer 2 · answered May 13 '14 at 18:00

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.

score 2 · Answer 3 · answered May 14 '14 at 15:43

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
There are several other diagnosis tools like Google Chrome Audit Panel. Firefox and IE have similar tools.
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.
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:

toesslab · Answer 4 · 2014-10-20T13:11:01.403

As an additon to @McCheesiIt's answer +1

Using bxslider, try to add the property preloadImages

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

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.

Frontend minimize load time

4 Answers4