-1

I've been building a site which is quite heavy on images and animation. It works well in Chrome, but is a bit jerky in other browsers. Just wondered if anyone had any ideas to speed up performance without compromising on the artistic ideas?

The website: http://www.benjaminbrooksguitar.com/guitarsite/

Any suggestions welcome.

Many thanks Ben

benmandv
  • 29
  • 7
  • I'm currently on shared hosting, could that being having much negative affect? Also does anyone know much about hardware-accelerated CSS for the animations? – benmandv Nov 17 '14 at 20:41
  • wow, really nice site ! – low_rents Nov 17 '14 at 20:43
  • Site says it has best experience in Chrome, FireFox and Safari, but experience in IE11 seems to be at least as good as in Chrome. – GolezTrol Nov 17 '14 at 20:50
  • @benmandv : Being on shared hosting can only affect in two ways : limited server power (but I don't think you have a lot of server logic behind this website, if any) and limited bandwith. For the last one you might consider reducing the weight of the pictures, by using tinypng.com or something similar. You can also add far-future expiration headers so the images are put in cache and don't need to be downloaded again. – Benjamin C. Nov 17 '14 at 20:51
  • Thanks for the heads up! I'll add it in. Cheers – benmandv Nov 17 '14 at 20:52
  • Very pretty but I'm on fast network and it took a good 20-30 seconds. People usually leave after 4 seconds, from what I understand. Use gzip (.htaccess), combine and min all css and js, get rid of loader. Let it load so there's something on the screen besides loading. – Christina Nov 18 '14 at 02:55
  • @christina Thanks for the advice! The problem is with getting rid of the loader is the overall affect for the opening animations would be compromised... Hopefully if I can get it to load quicker, it won't be so much of an issue. – benmandv Nov 18 '14 at 23:57

2 Answers2

1

At a minimum, you definitely want to resize your images to their viewed size. No point in loading images that are 1500 pixels wide when they are being shown at 36% (in the case of the #title element with the text.png). You have similar issues with other images.

You page will load faster and animate better.

Final note: I've never used waypoint, but if you continue to see animation performance issues, I would suggest using another library, Greensock GSAP, which is known to be very good (I've used it).

lsubi
  • 116
  • 6
  • Thanks for the tips. Re. the image, I'm using the bigger images mainly for the pixel density on retina displays, any ideas on how to better implement for higher resolutions or PPI? Cheers – benmandv Nov 17 '14 at 20:47
  • Ideally, use a responsive image solution like this one: https://github.com/teleject/hisrc Think small first and then load up larger images when needed. – lsubi Nov 17 '14 at 21:04
1

Here are some pure theoretical enhancements that I personally try to implement in my own code. Since performance is a difficult and usually is done on all the layers of your application: caching, server response speed, bad practices in code, network infrastructure and so on please do your own benchmark.

Performance from the resource loading perspective:

Images

The overall size of your page is very big, it should not exceed at maximum 1M (that's the recommendation). You can use indexed PNGs instead of RGB ones and for plain backgrounds JPGs ... ofcorse you have to rework and cut them since a single image has a lot of colours, but the result will be reduced to 25% which will translate into a faster loading time.

As lsubi suggested, you can use a response image solution as well.

Source files

Is recommended to place all of your scripts at the end of the page and all your style at the beginning of the page, there is a long debate on how the browser loads the resources, study this Unobtrusive JavaScript: <script> at the top or the bottom of the HTML code? for starters.

If you really want to get serious and win a very small amount of time you may want to "uglify"/"minimise" and merge your scripts and respectively your css files.

Lets not forget you can make css sprites instead of separate images ( http://css-tricks.com/css-sprites/ ) as well, one can gain an amount from there too.

Some tweaks that may make a difference:

I saw in your code the following and looks like you can optimise it a bit.

$(".bg-01").addClass("animated2"), 
$(".bg-01b").addClass("animated3 bounceInUp"),
$("#tabcontainer").addClass("animated fadeInDown"),  
$("#infohelpcontainer").addClass("animated fadeInUp"),
$("#titlecon").addClass("animated4 fadeInUp"),
$("#guitarman").addClass("animated3 bounceInDown");

The problem is that on each one of these lines the browser is forced to traverse the nodes of the DOM. The tweak is to add a master class on a parent element that will animate all your desired nodes from one shoot, for example :

$('#container').addClass('animated');

And in CSS:

.animated .bg-01 {
/* was initially in .animated2 CSS class */
}
    
.animated .animated3 {
/* was initially in animated3 and bounceInUp CSS classes */
}
/* ... */
Community
  • 1
  • 1
Tiberiu C.
  • 3,365
  • 1
  • 30
  • 38
  • Thanks for this! Lot's of good advice to look into. Re the tweaks with the animations, how would I go about adding a master class but keeping the animations starting at varying times/delays? Cheers – benmandv Nov 18 '14 at 23:55