Certainly, the action doesn’t help you to “automate” anything. But it can be of help if it comes to put critical content (manually) to the head-Tag***.
Basically the best automator for putting critical css to the head is not using external style-sheets (such as you do at Kiramek). That’s fine - valid, nothing against. Problem fixed.
Just to clarify
The discussion about “critical css” in Freeway is weird - if not to say redundant. Point is, that critical content detection comes from DOM - or in other words: the sorting order of your elements.
Simple example: Footer
A footer is NOT critical cause it appears behind the fold - usually. The page has enough time to load once a user will see it. But 88% of Freeway generated pages are based on drop&drag. It may happen, that a footer visually appears at the bottom of the page, but in the DOM tree it is item No. 2 in hierarchy. A machine will detect it as “critical” - however it isn’t. So a straight forward and successful discussion starts with DOM, the outline of your page. It starts by “inflow construction” ensuring this proper outline.
One single long Style-sheet?
That’s what most pages do (so me btw.). Freeway doesn’t. Freeway generates, master pages given, three of them. So one long (and probably heavy) file is spreader into 3 smaller parts. Years ago, I saw a screencast in which Chris Coyier tried to figure out which concept loads faster. It ended up in no measurable difference.
###The action
I’m using it (mostly) for removing the ID and add a class of my liking. This enables me to hook styles from wherever easily. But as already said: It can as well turn this ID into a class (with exactly the same set of properties coming from Freeway) and print it into the head-Tag. And here is the thing I’m concerned:
If the action doesn’t work on master-items, it’s for the described scenario useless. Think of the nav-element. It’s both, critical content (mostly) and part of the master.css. So what?
But as said: Learning inflow first, discussing the result later.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
One of my sites uses external CSS while a second site does not. I would think using external CSS is better because it can be cached. And of course, having 1 CSS file versus the 3 that Freeway generates is better because it means fewer server hits. But when using even 1 external CSS file, you still have the issue of it being considered a render blocker. Hence, Google wants you to split up the CSS, putting important stuff in the HEAD, and the rest anywhere else you like. Easy to say. Difficult to implement. Hence my suggestion that Freeway give us an option to handle that job for us.
If we trust Freeway to generate “good enough HTML” why not trust it to generate critical CSS and retain that in the HEAD while putting all else into a single external CSS file?
–James W.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Hi James
what criticalpathcssgenerator does is (i think) strip out the critical elements that stop the page rendering and adds it back on the actual HTML page… it does this because everytime a page is displayed it finds an external styles sheet, waits for that response then download the data and then interprets it. I think the thinking is if you could move that into the HTML page itself then you wouldn’t need to call out so many times
to make the page render and in turn increase speed.
What these systems are trying to do is create faster-rendered pages. So with that in mind what we (as freeway users) are trying to do is either re-use styles so we don’t keep rewriting the same styles over and over again or add the critical CSS which will allow the page to render into the head.
What the class to id action can do is to convert an id style into a class style, which can be then reused a million times if required by items that share the same style attributes. If you then were able to write that into the Head (if it was a critical style) then it would accomplish what (i think) critical path generator does. So that’s the similarity… it’s style management.
The theory sounds geat but in reality, it isn’t as easy as that. For example what’s critical. Are we talking about 2 styles or 3 or are we talking about 20, 30, 40? Do we actually know what’s holding up the page from being rendered? If we make an adjustment on the page, does that have an effect on what’s critical?. You could come up with dozens of scenarios which could so to speak muddy the water.
Anyway that’s my take on it Max
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I guess we need to reverse engineer this fellow’s work to find out:
Because his free criticalCSS separator does just that. It gives you the CSS you need in the head to score great on Google’s Page Speed Tools, and then you can dump the rest of the CSS wherever you like.
–James W.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
If we trust Freeway to generate “good enough HTML” why not trust it to generate critical CSS and retain that in the HEAD while putting all else into a single external CSS file?
READ “Just to clarify” - what I wrote regarding this!!!
Hi Thomas and James
we did some testing this lunchtime and we did get a little further in that we managed to copy and change master items into class items but we hit a brick wall with media breakpoint styles so I posted the question on the action section
to see if anyone else could give us a guide on how to develop the action on so it works correctly when applied to a master item
I suppose it could then be developed where by that style could be written into the head rather than the page style sheet… this may help you james although it still wouldn’t be automatic but you would have control on where it was written to.
Max
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Walter… that does mean a lot to me, thanks for that. Both I and Tom (here in the studio) have been working on it for ages.
Personally… I think you or Tim would have made a better job of it.
You only have to look at the code and I suspect you will probably think it’s a bit a Frankenstein… but in all honesty we just didn’t know how to tackle certain parts, so in the end we just used great big lumps of old actions which sort of worked even though they were clunky for the certain tasks and then the rest gleaned from the very little information we had over how the media styles are generated . it was al ot of guess work… Plus of course nicking bits and peaces of code from everywhere … you and Tim will find your handy work doted all over the place… SO a big thanks to both of you for those elements.
All the best Max
freewaytalk mailing list
email@hidden
Update your subscriptions at:
You only have to look at the code and I suspect you will probably think it’s a bit a Frankenstein… but in all honesty we just didn’t know how to tackle certain parts, so in the end we just used great big lumps of old actions which sort of worked even though they were clunky for the certain tasks and then the rest gleaned from the very little information we had over how the media styles are generated . it was al ot of guess work… Plus of course nicking bits and peaces of code from everywhere … you and Tim will find your handy work doted all over the place… SO a big thanks to both of you for those elements.
You only have to look at the code and I suspect you will probably think it’s a bit a Frankenstein… but in all honesty we just didn’t know how to tackle certain parts, so in the end we just used great big lumps of old actions which sort of worked even though they were clunky for the certain tasks and then the rest gleaned from the very little information we had over how the media styles are generated . it was al ot of guess work… Plus of course nicking bits and peaces of code from everywhere … you and Tim will find your handy work doted all over the place… SO a big thanks to both of you for those elements.
I just installed your Action. But before I go further, I would like to confirm if the following usage of your action is correct:
Open your Freeway Document.
Apply the action to a page in the site.
Assuming your site is already uploaded, visit the following link, paste in the URL to the page you just applied the action to in Freeway, then click the Create Critical Path CSS button, and copy out the CSS that appears: Critical Path CSS Generator - by Jonas Ohlsson
Return to Freeway.
In the Actions palette, click BESPOKE STYLES and then PASTE the CSS.
Publish or Upload your page.
If the above steps are correct, then does File > Document Setup > Output > External Stylesheets (checkbox option) create any problems? In other words, can you use embedded or external stylesheets just fine?
Are there any other caveats to your action we should be aware of?
Hi, James, that’s all correct and external style sheets can be on because the action places whatever styles before anything else. As for the quantity for styles then that’s down to the generator.
Thats why as mentioned before, there is a lot more to critical styles than what a generator can produce because of things like what’s needed to make items either usable or visible in the first millisecond.
The best scenario I can give is: imagine a person looks at a news site on an underground train and that train loses connection whilst travelling along but it gets a millisecond of connection when it pops through an open section before plunging back through tunnels again. Well that’s when critical CSS would have real importance because you would be aiming for any visual and constructive styles that would make the page usable for that split second.
But a lot of those decisions is down to the developer. because it may not be what a generator thinks is important… for me it would be any styles that allowed me to read the text of the main news item, and not necessarily the style of it or the images etc.
I hope that all helps
max
freewaytalk mailing list
email@hidden
Update your subscriptions at:
In the case of my “https://visionsecurity.jp” site, it complains about the following CSS because I am using external CSS files in Freeway and for whatever reason Freeway breaks the CSS into 3 separate files:
So it would seem the only way to consolidate that mess would be to disable use of external CSS altogether. But doing that dumps all that CSS inline, inside my main *.html file, which is pretty ridiculous.
PageSpeed Tools also complains about all of Walter’s actions on my page:
And the only way for me to fix all those would be to rewrite the code without Prototype or Scriptaculous and then figure out what to do with carousel2.js.
unfortunately even google messes things up…
for example if you use google fonts then you technically get marked down !!! so the question I ask is why do they give us that service.
Anyway Tim Plums externalize action works very well for this
you can set the freeway document to NO external style sheets and then use that action to externalise the styles into one sheet
you can also use use the class to id action on anything and tims action on the page
The only draw back is the externalise action also moves the critical style as well but apart from that Tims action is a way to consolidate all the style sheets into one.
kind regards max
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Right. Setting Freeway to NOT generate external CSS while using Tim’s Externalise Action would generate a single CSS file that Google will complain about. But your new critical-css-styles action won’t work with Tim’s Externalise, right?
That’s really the goal. Unless someone can explain to me why Freeway creates so many CSS files, it would seem that having 1 CSS file would be best, and then we would need to extract the Critical CSS from it and place that in the HEAD, and then everyone will be happy.
–James W.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
In all honesty, this page isn’t worth discussing “critical css” at all. Critical CSS is the thing above the fold - and in your case everything is above the fold:
###Solution 1:
If you want to discuss critical css, do responsive design (content=“width=device-width”).
###Solution 2:
You answered it yourself. NOT using external stylesheets (because all your css is critical). And there is nothing ridiculous on it at all.
##Why three stylesheets
It’s app requirement for ensuring “master-page” concept. This is not really critical, valid in fact so nothing to discuss any further.
##Where I heavily agree
JavaScript can even stop render a page (css can’t - it’s a more forgiving language). So all js belongs to the before end body TAG of a page. Throw them out and seek for an alternative or preferably contact the action writer fixing this for you.
##Inline Styles
You’ve got them all over the place. Presumably inherited from old times. Certainly there shouldn’t be inline styles, but sometimes it’s better practice - and google can’t do anything against.
While I could write prose on this - enough of info for today (to ignore or not, who knows?)
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Regarding INLINE STYLES, if you say that an old version of Freeway put them in my HTML, then why doesn’t the newest version of Freeway take them out?
I never manually put _clear.gif in the site. Freeway does that automatically. And STYLE=“vertical-align:baseline” is the attribute you see when you view that _clear.gif code.
–James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Regarding INLINE STYLES, if you say that an old version of Freeway put them in my HTML, then why doesn’t the newest version of Freeway take them out?
There are a couple of scenarios thinkable (along all the years this page exists):
• It can be an action doing this.
• It can be added via extended dialogue (the DIV tab)
I never manually put _clear.gif in the site. Freeway does that automatically. And STYLE=“vertical-align:baseline” is the attribute you see when you view that _clear.gif code.
The _clear.gif is something to do with tables (reinforcing them). I can’t say for sure if this can be checked/unchecked somewhere in the document settings. But I can say for sure, that I never use tables for layout purposes. Get rid of them and you’ll probably get rid of the _clear.gif
