Reducing templates overhead

Hi
I have completed the site and today the technical IT has pointed that the site has 52 technical file (.js and .css) loaded. Is there anyway around these? (to reduce the load?) See the email from my client's technical support.

The site has been reverted to the test domain at:
www.thecatalyst.co/villacapung2014/

Appreciate your prompt respond.
Tristan

----------------------------------------------------------

A Summary is here


Document Complete Fully Loaded
Load Time First Byte Start Render Visually Complete Speed Index DOM Elements Result (error code) Time Requests Bytes In Time Requests Bytes In
8.868s 1.265s 4.404s 6.900s 6900 532 99999 8.868s 94 2,310 KB 13.547s 140 2,784 KB

You can see that it takes 8.868 seconds for the page to be displayed, and the amount of data loaded is 2.31 Mega bytes.

The reason is because:
A/ About 52 Technical Files (.js and .css) are loaded before any actual useful file for display is loaded
B/ The First Image file loaded only after header_bg.jpg is very big (About 600 KBytes). It takes more than 2 seconds to load it.
C/ A mobile phone user will have to load 2.31 Megabytes just to open the home page. This is Way too much for a mobile user and therefore Search engines will downgrade the site in Mobile results.

A NEW VISITOR will further have to download huge files on the gallery page and some other pages of the website.
The RECURRING Visitor will not experience these delays because once loaded pages are CACHED in the computer of the VISITOR. However BUSINESS WISE, what matters is the FIRST VISITOR speed and impression.

This problem has to be addressed promptly, and in the Interim it is urgent to revert the website to the previous version.

Namely:

A/ The Set of technical Files must be REDUCED to the necessary Minimum: up to 1 of 2 CSS files and 1 or 2 JS files, containing ONLY the technologies Necessary for the display of the page.
Currently 95% of the JS is CODE that is NOT used at all in the page resulting in about 52 files loaded !

Your link gives 404.

Hi
The 404 is corrected. Appreciate your review and advice in terms of the .js and css trimming.

Thanks
Tristan

Since I did not get any respond from support I have googled and found a plugin - JCH Optimize. It has help to combined the css and js files and speed up the site. Just like to share this info so others can benefit.

Tristan

How can I check your site if it gives me 404? How can I check if there aren't any additional problems if I can't see the site?
Template has its own method of compressing css and js that can be enabled in template settings.

Hi Cyberek
I have earlier replied after you notify me of the 404 error that it is corrected. I have waited a couple of days for your reply but in the interim I found the JCH optimiser. As fellow developer/designer you should understand the pressure we face from clients and their audit. As subscribers to gavick template most of us are not actually coders and try our best to edit around to best suit our clients needs. So we do depend on you guys for those areas of technicalities when it arises and do appreciate your assistant.

The problem still exist as js files that is not needed (especially in the frontpage) is still being loaded though I have used JCH to combined them in a single file. My client audit still requires me to looked into removing those unnecessary js file.

I do hope you can point me to where I can resolve this and how to omit those unnecessary js file on the frontpage.

Thanks
Tristan

The website URL is still at:
http://thecatalyst.co/villacapung2014/

One important thing for the future to wrap things faster:
Do not bump your questions. It makes you wait longer.

Going back to the topic. There is no way you could easily decide which js or css is loaded where. Scripts are loaded globally in one file loaded on every page and hacking them to decide what loads where... It simply is quite hard to do. Actually I'm not sure if it is even possible. Those kind of solutions are possible but in custom designed cms systems not in Joomla as it is.
Sadly this kind of changes are way beyond our technical support.

And if it goes to review:
1. 60 image files on homepage which weight almost 500kb. I would suggest to combine some of them into one sprite. Sadly - you must do it by hand.
2. Scripts: 27 files where only one is "template specific". All others are google, facebook, twitter etc. They simply cannot be eliminated as they are loaded from external source.
3. Fonts: 10 files, 2 loaded from template. You are using 3 different fonts - is it necessary?

I might also suggest to use CloudFlare or other clouding static solution to improve load time etc.

Hi Cyberek
Thanks for the review.
1) 60 images on homepage? I am puzzled - i don't have 60 images on homepage, I know I have images spread throughout the other menu item. I have logo, background image, a lily gif and link to google map and some social icons. Can you point out to me where or how you access this information?

2) Script - so you are saying those other scripts are default by Joomla and necessary? I found another plugin that can filter them out but I do not have the knowledge which is needed and which is redundant. Can you show me how to see what script is loading so at least I can explain to the client.

3) I can use just one or 2 fonts whichever help. Do I include all the different weights or just pick one?

Tristan

One important thing for the future to wrap things faster:
Do not bump your questions. It makes you wait longer.

Going back to the topic. There is no way you could easily decide which js or css is loaded where. Scripts are loaded globally in one file loaded on every page and hacking them to decide what loads where... It simply is quite hard to do. Actually I'm not sure if it is even possible. Those kind of solutions are possible but in custom designed cms systems not in Joomla as it is.
Sadly this kind of changes are way beyond our technical support.

And if it goes to review:
1. 60 image files on homepage which weight almost 500kb. I would suggest to combine some of them into one sprite. Sadly - you must do it by hand.
2. Scripts: 27 files where only one is "template specific". All others are google, facebook, twitter etc. They simply cannot be eliminated as they are loaded from external source.
3. Fonts: 10 files, 2 loaded from template. You are using 3 different fonts - is it necessary?

I might also suggest to use CloudFlare or other clouding static solution to improve load time etc.

What you have requested is beyond our technical support. Analysing, providing detailed data etc...
I cal only point you in right direction. Use Chrome DevTools, switch to network tab, enable filters and "clear cache" option. Reload page. Filter by images, scripts, css'es etc. What you will do with this knowledge - it's up to you.
If it goes to font, including different weights doesn't load more files - it jus load base font that might weight a little bit more - it doesn't increase requests count.