I have a question to discuss – page performance and speed when adding additional javascript libraries and css files for certain widgets, plugins etc.
For example: I wanted a simple datepicker and additional timepicker for my input fields.
What i had to integrate was JQuery UI library, timepicker script, +2 different css files.
I think thats alot of additional code. I dont have many experience with speed, so thats why I’m asking you guys, how much does all that additional stuff affect page speed and performance?
Is change noticeable?
How you integrate the code is going to matter a lot more than the fact that the code is there. If you keep them all in separate files and include them in the head of your page then it is likely to slow your page down quite a bit (just from the round trips to fetch the code).
If you can, you should:
– Merge the css in with your existing site css (which should be in the head and cacheable)
– Put all of the script for the time picker and supporting libraries into a single js file
– Load the javascript asynchronously or rught at the end of your body so it doesn’t block any of the page content from loading
You also need to be careful for how you attach the code to the elements on the DOM. If you have a reasonably complicated DOM then something like $(“.mycalendar”).xxx can be incredibly expensive, particularly on older IE browsers. If at all possible, use an ID for the elements and select using that, otherwise JQuery will end up walking the entire DOM (and yes, javascript execution itself is fast but anything that touches the DOM is not).