How to optimize slideshow that breaks after JavaScript minify

How to optimize slideshow that breaks after JavaScript minify

Recently, we finished our new website design for I DESIGN STUDIO and we really wanted to use a simple but effective slider to show featured projects on our portfolio page as well as on each project separately. At the same time, we wanted our website to be fast and we needed to optimize it. At some point during the optimization process which we will cover in another post, the slider simply brokeand as many others, we had the choice to decide between changing the concept for showing off our projects (which we really didn’t wanted) or go with less faster site without using the benefits of JS minification (which we were also not completely happy about). We decided to write this post because when we were in “searching for the answer” position, we really couldn’t find anything that step by step to guide us through such process.

Finally, after some days spent on the topic, we managed to reach both – a working slider and 95 out of 100 by Google Page Speed, 91 out of 100 by YSlow for the home page (via GTMetrix report).

 

We use Premium slider from Matthew Ruddy, so we can power unlimited sliders on our website (the free version Easing Slider gives only one slider per website and it can be downloaded from WordPress repository).

We used GTMetrix to check the website performance with Google Page Speed and YSlow.

We use W3 Total Cache plugin from Yoast to optimize the website.

So finally, here we come to the point

When we started the optimization process we tried out WP Minify and it gave great results just with 3 clicks but we couldn’t manage to make it work for the JS minification of the Slider. We are sure there is a way and once we find it, we will post it as well but now the focus shifted entirely to W3 Total Cache minification.

The key was to use all these tools written above together. We were checking what were the recommendations from GTMetrix about JS, CSS, and HTML minification and we were trying to implement them in W3 Total Cache.

When we minified the JS files all at once with no special changes of the default options (for All Templates and Embed in <head>), the slider broke.

Working configuration

After some tryouts, here is the working configuration for our website:

1. Enable Minify from W3 Total Cache >> General Settings with Manual configuration. The minification options for HTML, CSS and JS files we left as suggested by the plugin.

2. Go to W3 Total Cache >>Minify screen.

3. Minify options – General: Check ‘Rewrite URL structure’.

4. Minify options – JavaScript:

  • Check ‘Enable’
  • Choose your theme for the JS file management

5. Listing the JS files:

  • From GTMetrix copy the URI of each JS file suggested in ‘Combine external JavaScript’ the way they are listed without the JS files for Premium slider (or the slider plugin you are using)
  • Remove the query strings at the end of the URI’s if any. Let them finish as .js
  • For ‘Template’, you can leave ‘All templates’
  • For ‘Embed location’ – here is the really important part: use for .js files ‘Embed before </body>‘, which means one the minified and combined JS file by W3 Total Cache will be putt in the footer
  • Enter URI for jquery.js (wp-includes/js/jquery/jquery.js) with ‘Embed in <head> option
  • Enter the URI’s of the Slider .js files (for Premium slider – jquery.easing.js, premium.slider.js) with ‘Embed in <head> option

6. Save the settings and give it a try online. Do not forget to clean the W3 Total caches, so the browser can show the changes correctly.

Important: The addition of the .js files URI we did separately for each one, checking after each iteration if the slider and the rest of the website were loading correctly. This way we figure out, which files should be embed in the footer of the website (before </body>) and which should stay in the <head> (as for example if jquery.js is in the footer, the sliders brakes as well).

Let us know if this worked for your website with Premium slider or if you tried as general guidance for the slider you are using.

Update 22.11.2011

To mention that if there are changes made after the first successful working configuration, all the .js files should be deleted, the JS part of the plugin should be disabled, then enabled again and all the process done once again from the beginning, otherwise the plugin doesn’t play the settings properly and the slideshow stays broken. Other users of W3 Total Cache plugin have experienced the same problem, so it is something with the plugin itself. Please write an update if you experiencing the same with the newest version.

Notes: The topic doesn’t cover wider optimization process. The results from Google Page Speed and YSlow are currently for the date shown on the image and it might differ when changes on the front page are applied later. The front page of the website is simple, so the optimization process of such websites is much easier than websites loaded with heavy content – images, videos and so. For these, CDN use should be applied to reach higher speed results.

Kommentare sind geschlossen.

How to optimize slideshow that breaks after JavaScript minify

How to optimize slideshow that breaks after JavaScript minify

Recently, we finished our new website design for I DESIGN STUDIO and we really wanted to use a simple but effective slider to show featured projects on our portfolio page as well as on each project separately. At the same time, we wanted our website to be fast and we needed to optimize it. At some point during the optimization process which we will cover in another post, the slider simply brokeand as many others, we had the choice to decide between changing the concept for showing off our projects (which we really didn’t wanted) or go with less faster site without using the benefits of JS minification (which we were also not completely happy about). We decided to write this post because when we were in “searching for the answer” position, we really couldn’t find anything that step by step to guide us through such process.

Finally, after some days spent on the topic, we managed to reach both – a working slider and 95 out of 100 by Google Page Speed, 91 out of 100 by YSlow for the home page (via GTMetrix report).

 

We use Premium slider from Matthew Ruddy, so we can power unlimited sliders on our website (the free version Easing Slider gives only one slider per website and it can be downloaded from WordPress repository).

We used GTMetrix to check the website performance with Google Page Speed and YSlow.

We use W3 Total Cache plugin from Yoast to optimize the website.

So finally, here we come to the point

When we started the optimization process we tried out WP Minify and it gave great results just with 3 clicks but we couldn’t manage to make it work for the JS minification of the Slider. We are sure there is a way and once we find it, we will post it as well but now the focus shifted entirely to W3 Total Cache minification.

The key was to use all these tools written above together. We were checking what were the recommendations from GTMetrix about JS, CSS, and HTML minification and we were trying to implement them in W3 Total Cache.

When we minified the JS files all at once with no special changes of the default options (for All Templates and Embed in <head>), the slider broke.

Working configuration

After some tryouts, here is the working configuration for our website:

1. Enable Minify from W3 Total Cache >> General Settings with Manual configuration. The minification options for HTML, CSS and JS files we left as suggested by the plugin.

2. Go to W3 Total Cache >>Minify screen.

3. Minify options – General: Check ‘Rewrite URL structure’.

4. Minify options – JavaScript:

  • Check ‘Enable’
  • Choose your theme for the JS file management

5. Listing the JS files:

  • From GTMetrix copy the URI of each JS file suggested in ‘Combine external JavaScript’ the way they are listed without the JS files for Premium slider (or the slider plugin you are using)
  • Remove the query strings at the end of the URI’s if any. Let them finish as .js
  • For ‘Template’, you can leave ‘All templates’
  • For ‘Embed location’ – here is the really important part: use for .js files ‘Embed before </body>‘, which means one the minified and combined JS file by W3 Total Cache will be putt in the footer
  • Enter URI for jquery.js (wp-includes/js/jquery/jquery.js) with ‘Embed in <head> option
  • Enter the URI’s of the Slider .js files (for Premium slider – jquery.easing.js, premium.slider.js) with ‘Embed in <head> option

6. Save the settings and give it a try online. Do not forget to clean the W3 Total caches, so the browser can show the changes correctly.

Important: The addition of the .js files URI we did separately for each one, checking after each iteration if the slider and the rest of the website were loading correctly. This way we figure out, which files should be embed in the footer of the website (before </body>) and which should stay in the <head> (as for example if jquery.js is in the footer, the sliders brakes as well).

Let us know if this worked for your website with Premium slider or if you tried as general guidance for the slider you are using.

Update 22.11.2011

To mention that if there are changes made after the first successful working configuration, all the .js files should be deleted, the JS part of the plugin should be disabled, then enabled again and all the process done once again from the beginning, otherwise the plugin doesn’t play the settings properly and the slideshow stays broken. Other users of W3 Total Cache plugin have experienced the same problem, so it is something with the plugin itself. Please write an update if you experiencing the same with the newest version.

Notes: The topic doesn’t cover wider optimization process. The results from Google Page Speed and YSlow are currently for the date shown on the image and it might differ when changes on the front page are applied later. The front page of the website is simple, so the optimization process of such websites is much easier than websites loaded with heavy content – images, videos and so. For these, CDN use should be applied to reach higher speed results.

Kommentare sind geschlossen.

 
 
Blog. Webdesign. Design. Architektur. Web-Apps.
Selbstständigkeit – Teil 1
Das Allgäu ist unglaublich toll!
Wer hat ‘Muu-u-u’ gesagt?
Jenseits der konventionellen Methoden: Alles, was Sie über uns wissen möchten
Living your dream. Volen Evtimov – Photographer.
Importance of design – list of articles straight to the point today
 

Wir

Gerrit und Milena sind beide Diplomingenieure und Experten in ihren Bereichen. Aber dieses ist nicht der entscheidende Faktor. Ihre freundliche Art, ihre Liebe für Design und Offenheit gegenüber den Menschen macht die Zusammenarbeit mit IDESIGNSTUDIO zu einem freudvollem Austausch.

Was können wir für Sie tun?

Wenn Ihnen unsere Projekte und Arbeiten gefallen und Sie denken, dass wir auch etwas für Sie tun können, dann zögern Sie nicht und rufen uns an oder schreiben uns eine E-Mail. Wir freuen uns auf Sie!

office@idesignstudio.de
Tel. +49 (0) 8320 200 98 16
Fax +49 (0) 8320 200 98 17