CODEWITHSUNDEEP
javascripthtmlcssfrontendload-time
Chris Muench
Chris Muench

Reputation: 18338

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

Upvotes: 2

Views: 1243

Answers (4)

Daniel Gasser
Daniel Gasser

Reputation: 5143

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.

Upvotes: 1

Johann Echavarria
Johann Echavarria

Reputation: 9965

  1. Understand the best practices fundamentals, reading:

  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:

Upvotes: 2

laaposto
laaposto

Reputation: 12213

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.

Upvotes: 5

McCheeseIt
McCheeseIt

Reputation: 355

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.

Upvotes: 3

Related Questions