Hm…
Must be the time of day or so. Was at 97% the other day. Not that 100% in performance is really needed, other than just to please google. ;)
1 Like
That’s mobile version you’ve got there, that one is always the most difficult one to please for performace stats compared to desktop.
1 Like
See this thread
@IvoryBlack You can access PageSpeed Insights also referred to as just PageSpeed and also goes by teh name Lighthouse at https://pagespeed.web.dev.
Just enter any URL to get a “PageSpeed” report for both mobile (the default) and desktop. Apparently Google rates web sites on their performance, but for anyone creating web sites, it is a very useful tool to check you are not introducing performance issues such as large or un-optimised images or to check if you are using the fastest tools. You can check whether your Stacks framework and a good way to do that is to check the framework developers site URL in PageSpeed.
For the last 2.5 years Source has been setting the the Gold standard of 4x100 for both mobile and desktop.
Also worth checking out the W3C Validator to check for Errors. While not as important as it used to be because modern browsers are more tolerant, it can highlight issues with code in the wrong place or typos that would otherwise be difficult to spot.
2 Likes
@Webdeersign what is the advantage and/or disadvantage of no longer incorporating JQuery in Foundry 3?
I’m asking because in the past when I used Google’s page speed analysis, the perpetual note was slow-loading JQuery.
jQuery is a general set of useful javascript code to allow stuff like modals, side panels, animation, etc. to be added to a page. It is quite old now and there are better ways to do some of this stuff by using just CSS or much smaller modern javascript libraries.
There are 2 issues with jQuery. One is size because it is about 85Kb so why add that if you dont need it. Foundry 1 & 2 actually had 2 versions of jQuery for some bizare reason (jquery-2.2.4 & jquery-2.1.4=190Kb)
The second reason is often when one vendors stacks clash with other vendors stacks, it is becasue they use or expect different versions of jQuery. I am sure there are more reasons. Bootstrap certainly promotes it as a big thing.
Foundry3 is based on Bootstrap5 and one of the main advantages of Bootstrap5 is that jQuery was removed from Bootstrap. Foundry3 uses Bootstrp5 so therefore, doe not load jQuery.
2 Likes
I started using F3 on new projects this week. Previously I’d mostly been using F2 with the odd project still in UIKit.
I don’t use either framework exclusively. For a year or so now I’ve used a separate suite of stacks for major layout elements and the frameworks for things like menus, modals, buttons, and other such elements.
I like F3. It brings more customisation options to the stacks I use regularly, is nice and quick in edit mode and has more breakpoints than F2.
Overall I’d say it’s a really nice evolution of the framework. It just feels a bit more grownup than it’s predecessor.
4 Likes
@Webdeersign Thank you for your detailed explanation. Very helpful.
1-Does this mean stacks that use JQuery will be incompatible with Foundry 3?
1b-If so, is there a workaround?
2-Do you know if Foundation 6 uses JQuery?
One came from Foundry, the other one from Stacks plugin itself.
No, as Stacks plugin loads jQuery for the stacks which are requiring it.
2 Likes
Does F6 use JQuery?
This is confusing — we’ve now got F1, F2, F3 and F6. Someone quickly grab F5 as a name — it’s now the hottest property in Stacksville!
4 Likes
I don’t know. However you can find out what’s loaded by entering any URL into PageSpeed. In this case enter the main F6 site to see whats going on.
Then in the PageSpeed report, look for the sections “Eliminate render-blocking resources” or “Reduce unused JavaScript” and open them up to see the large files that PageSpeed reports as being loaded. In this case if you click on …js/app.js?hash=93c135c…(get.foundation), see the bottom of the attached screenshot, you will see a 335Kb JS file, and if you click on that link, it will open up and the title which is “jQuery JavaScript Library v2.2.4” can be seen. No idea what the other 65Kb js file being loaded is.
This is a good example, because in this case, that huge jQuery file is blocking the page from rendering, according to PageSpeed. So obviously, if you don’t have this file slowing your site, the site will load quicker.
I agree!
Instead of just “F”, we should abbreviate both frameworks using the first three letters from their names.
So FOU3 for Foundry 3 and FOU6 for Foundation 6… oh… wait…
:D
Maybe Stuart should consider renaming Source to Fource.
7 Likes
Maybe it’s better to use the F6 stacks demo? https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.foundationstacks.com%2Fdemo%2F
1 Like
One day, someone, most likely Tav, is gonna make a framework, and it’s gonna be called Fukyew 2.
13 Likes
Taking this a step further, it’s interesting to look at each of the homepages of the different frameworks in PageSpeed — their homepage is a good indicator of how seriously they take Google’s indicators (for the sake of comparison I’ve taken Stuart’s Source homepage, since it is effectively his framework). Their homepages all have to do pretty much the same job, too.
Here they are, ranked from #1 down (with cumulative scores for both mobile and desktop at the end):
#1 Source
mobile: 99 100 100 100 desktop: 100 100 100 100
(799)
#2 UI Kit
mobile: 86 93 100 92 desktop: 96 96 92 90
(745)
#3 Bootstrap (Foundry)
mobile: 97 97 92 100 desktop: 100 90 92 100
(768)
#4 Bulma (Platform)
mobile: 70 81 83 75 desktop: 96 87 92 73
(658)
#5 Foundation (F6)
https://get.foundation
mobile 74 81 83 65 desktop: 99 86 83 60
(631)
[I should add that I use Source, but am not too bothered about PageSpeed — although I think we have a responsibility towards users to optimise our sites for their benefit (although clearly not all sites need to take part in the Google Olympics, or are intended for people standing out in the rain with their mobiles — and companies like Apple clearly care very little about their lighthouse score, since visitors expect cool stuff).]
2 Likes
My god. Even on a thread about Foundry, the usual suspects manage to get it around to Source and bloody PageSpeed!
10 Likes
How about Ready to check - Nu Html Checker and Source then for a change. Not as exceptional as Blocs of course but still leading the Stacks framework pack.
Once we move to Stacks Pro we can eliminate all those specific RW errors.
Mobile: 57, 96, 100, 86
Desktop: 96, 98, 100, 90
Interesting.
Looks like the secret sauce to Foundry 3 is no JQuery.