CSS and JS Optimizations and removing unused functions

David Exodus Posted in General Discussion 5 years ago

I know i asked a similiar question already. But i tried to combine all CSS or JS Files into one single file (SEO and Server Performence Corrections) but it didn't work as it made some function not working. Also is there a way to locate absolutely unused functions which can be removed? I tried some tools for that but i can't be absolutely sure as i dont know where else these functions could be called, i would have to open every single possible page with every single function that's definitly used.

I think the Devs, knows this best but i will search for more tools that can maybe analyze every possible way to dig into the OSSN system.

Do you have some tips, advise or already planned optimizations on this part?

us Bryce alvord Replied 5 years ago

This subject interested me as a front end developer (not much php experience but tons of js). I looked at pretty much every component I have (63) and saw that there is no overlap in js libraries except in one component developed by a standard member here, not core team, that has unnecessary full library file as well as minified file. People could be irresponsible and create components duplicating libraries that are already in the core or choosing a non-minified file over a minified version but surprisingly with all the different authors of my components (core, premium, private, and personal) this utilization is pretty good. I know components are only a part of the equation, I just jumped there first because I thought for sure I would see overlaps and unnecessary usage. Anyways, just thought that was interesting.

Re: gutting bootstrap file to only what is required or any other large framework for that matter, good luck not breaking something let alone creating a maintenance nightmare for yourself as you update versions. This places all of the ownership on you instead of dropping framework owned files and just doing regression testing. This may be just my opinion but at work if I see someone modifying a library file I will spank them and put their nose in the corner.

ch David Exodus Replied 5 years ago

Well nevermind then.. It's jumping between 4 and over 10 seconds, But i noticed that replacing all Theme Images with .webp Formats, changes a lot.

German Michael Zülsdorff Replied 5 years ago

Excuse me, but all I can do is laugh on these results.

And picturing a Freak Bros comic like
8 guys cruising in a hopelessly overloaded 5 seats car
and someone says: I think we'd better smoke our grass right now to lose a little weight, ok?!

Indonesian Arsalan Shah Replied 5 years ago

I can see here:

  1. When you open browser first time or restart it, and open your website it takes around 9-10 seconds.
  2. Once its loaded it takes 0.5-2 seconds to load the home page.
  • Can you confirm ?

Can you check if removing the entire head from goblue\plugins\default\theme\page\page.php (restart your browser to reload session, before checking site again) makes any difference?

And i can see in pdf there google ads loading many of the files more than 180 requests

OSSN didn't have more than 30 requests for goblue theme (homepage): https://gtmetrix.com/reports/demo2.softlab24.com/BpvO1IUO

Further i see your view-source in browser and there alot of modification is done some didn't make any sense to me and that cloudflare rocket-loader , etc also added in end of the source. not sure what is it. also some broken tags in head.

enter image description here

ch David Exodus Replied 5 years ago

This is very strange... The test without the file was slower than the other one which included the file...
Large Picture with comparison - GTmetrix

I'm a bit shocked. But there are a lot of other files blocking the loading screen. I can provide the whole files, for the waterfall charts:
PDF without bootstrap.min.js
PDF with bootstrap.min.js

German Michael Zülsdorff Replied 5 years ago

Ah, you're talking about bootstrap.min.js

Could you please run the following test (Ossn cache disabled):
1. Get an average frontpage loading time (from browser's dev console)
2. Add two slashes in front of 'src' => ossn_theme_url() . 'vendors/bootstrap/js/bootstrap.min.js'
(in ossn.theme.php in order to stop loading of the library)
3. Run step 1 again.

provide average loading times with and without bootstrap lib

ch David Exodus Replied 5 years ago

It's not about the functions im concerned of its about the bloated bootstrap file and other bloated libraries which aren't fully used. could they be cut down to the core functions that are used? That would make a big impact on the loading speed of the whole page.

German Michael Zülsdorff Replied 5 years ago

Could you name some functions you're concerned about, please.