-
Join the MyBroadband community
South Africa’s biggest forum. Discuss, discover, and connect with thousands of members.
-
Question of the Day: Which is the most hair-raising South African mountain pass you've driven?
Another Noobly Question [CSS3 and HTML5]
- Thread starter Thor
- Start date
Lawrence777
Well-Known Member
That should not be happening. I'll post you some screenshots and examples a bit later. I have to go to the doctor first.
Lawrence777
Well-Known Member
Indeed. I have sites with over 8000 lines of CSS.
That is just for example purposes, the actual css files are well over 5000 lines each, but that not the point, thank you for your previous explanation, that is how I understand it too.
I have a new question that might be better, how do I identify what the "Above-the-Fold CSS" is then I will only include that in the html page before I reference the external style sheets
Here we go this is my EXACT issue/question/situation
https://css-tricks.com/authoring-critical-fold-css/
https://css-tricks.com/authoring-critical-fold-css/
I'll be honest. This is the first time I am reading about above and below the fold.
How I understand it now is...
Above the fold: The portion of the page that you can see.
Below the fold: The portion of the page you can not see (When you start scrolling, or overflows that pop up on click).
If your pages are small enough to fit the screen, then all of that is Above the fold.
Am I understanding this correctly?
How I understand it now is...
Above the fold: The portion of the page that you can see.
Below the fold: The portion of the page you can not see (When you start scrolling, or overflows that pop up on click).
If your pages are small enough to fit the screen, then all of that is Above the fold.
Am I understanding this correctly?
Read that too.
Read this one, seems to be have more laymen terms.
http://whatis.techtarget.com/definition/above-the-fold
I think you need to simplify this as much as possible.
You know you need to load certain classes before others. No one else can figure this out for you, and you can't figure out "critical" classes unless you define them.
Create a critical.css, load it first. Then load the rest.
It's really that simple.
You know you need to load certain classes before others. No one else can figure this out for you, and you can't figure out "critical" classes unless you define them.
Create a critical.css, load it first. Then load the rest.
It's really that simple.
They are all pretty fcking critical in my opinion hehe.
Here is the page speed result for the website in question
https://developers.google.com/speed/pagespeed/insights/?url=flyboys.co.za
https://developers.google.com/speed/pagespeed/insights/?url=flyboys.co.za
Header + background + block elements as critical. The rest as non crit.
<style>
CRITICAL STYLES
</style>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
That might do the trick. Rather take other peoples advice though. This is new to me too.
<style>
CRITICAL STYLES
</style>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
That might do the trick. Rather take other peoples advice though. This is new to me too.
Those are two images, can't really put that in the <head> section?
Not the images, the styles that are placing those images there.
HTML:
<div class="row">
<div class="col-lg-6 hidden-sm hidden-xs">
<a href="reseller.html" class=""><img src="/img/resellerbtn.png" class="img-responsive" alt="Responsive image"></a>
</div>
<div class="col-lg-6">
<img src="/img/banner.png" class="img-responsive" alt="Responsive image">
</div>
</div>Mmmmm, if this works it would be insane cool and weird
Okey I'll do it and let you know.
Also I see the fontawesome.min file is causing the k@k taking almost 1.7 seconds