I am trying to write a webpage with a 100% rating from Google PageSpeed, not an easy task let me tell you! So far, I have the caching enabled, header compression enabled, compressed all my png images, and I am attempting to async my CSS for above the fold content. The last bit is where I am running into issues. Here's the current layout of the page in a codepen:
https://codepen.io/ftbcoders/pen/MPVbNY
I have defined my stylesheets in the footer with media="none", I have set a pre-load animation and loader using inline CSS so you see a loader, called an onLoad event on the body to change the media type of the CSS files from none to all when the document is loaded, and yet I am getting:
Optimization
Low
56 / 100
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 3 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting
for the following resources to load. Try to defer or asynchronously load blocking
resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
https://www.example.com/stylesheet/style.css
https://www.example.com/stylesheet/open.sans.css
https://www.example.com/stylesheet/font.awesome.css
Why are they blocking loading? They are set for media of none so it should load the CSS files but not try and display them until the body onLoad event has fired, AND they're in the very end of my file... what am I missing here? It's loading awesome in practice but the ranking is what I am wanting to maximize here. Any tips? Am I missing something? Thanks.
Each CSS file contains styles with information how each your HTML tag looks like in the end => it's not possible to render page without that information => browser has to download, parse that information in order to show the page => it's render-blocking asset.
There are multiple ways to solve that, and I'll show one of them. Relatively simple.
You may include contents of those CSS files in your HTML file. That will solve issue.
In your HTML instead of a link to .css file
<link ... href="style.css">
put contents of those file
<style>
contents of your style.css here
</style>
Ideally that should be done programmatically.
It can be applied in production if those css files are not that big and/or you don't have a lot of returning visitors.
Related
If I have a website project with:
reset.css
remote bootstrap lib
master.css
remote font awesome CSS
two google fonts
JQuery lib
main.js
Consider the best loading speed and possible override. What would be the best order to link them in <head>
I know what is added later will override the same rule with same priority previous style sheets applied and browser rendering from top to bottom, <head> first then <body>
I also learned from google that there is something called prefetch in the modern browsers.
Personally, I would do reset.css, font awesome, google font, bootstrap lib, master.css, Jquery lib, main.js. Universal rules first, lib first. But I don't know exactly how to deal with font since they are stylesheet as well.
I would like to point out that the orders suggested in previous answers are not fully in sync with the developers' best practices as suggested by Google and MDN.
CSS should be loaded first in the head followed by font stylesheets or google font stylesheets so that the layout doesn't appear broken for a while especially on slow connections.
So, Bootstrap css can be loaded into head while Bootstrap js should be loaded later after jQuery.
JS, jQuery and its dependencies can be moved to the bottom of the page to promote faster page loading because JS code can affect the content and layout of a web page, browsers delay rendering any content that follows a script tag until that script has been downloaded, parsed and executed.
And as bootstrap js has jQuery as a dependency. So, jQuery should be loaded first followed by boootstrap js and main js file.
So, the correct order in accordance with best developer practices:
<head>
1. Bootstrap CSS
2. Reset CSS
3. Master CSS
4. Google Font CSS
5. Font Awesome CSS
</head>
<body>
Your content goes here
<!-- add js files to the bottom of the page-->
6. jQuery
7. Bootstrap js
8. Main js
</body>
It is important to load jQuery before Bootstrap and all custom CSS after bootstrap. It is better to load the google font stylesheet in the beginning.
The order should be libraries first followed by custom scripts and styles. Since bootstrap depends on jQuery, jQuery should be loaded before loading the Bootstap's JavaScript file.
google font
fontawesome
JQuery lib
remote bootstrap lib
reset.css
master.css
main.js
Loading the JavaScript files at the end of the body (just before </body>) will improve site loading speed when compared to having JavaScript files between the head tags.
Since you question is in terms of performance. below are some of my views
1. load google fonts aysnc
you can load the font asynchronous, so then it will not block the rendering of the page. you can use the javascript font loader, https://github.com/typekit/webfontloader
2. load css first
the below method may be the best way to go
fontawesome
JQuery lib
remove bootstrap lib
reset.css
master.css
i also suggest you merge reset.css and master.css since i believe sending a separate request for reset.css is useless and merging those small codeset with master.css will be a better approach.
3. load JS
finally load the master.js file, its better you load this file in bottom of the body tag, since then it will improve page load performance effecting the critical rendering path.
note: please read about critical rending path, which may explain in-depth about page-load performance.
Here is my issue.
I am analyzing my page with Google Page Speed Insights.
An it's telling me to remove my css link in the head (above floating line) because its blocking my page load.
Right now I have a simple link in the head of my document:
<link rel="stylesheet" media="all" href="http://mydomain.we/css/my.css" />
</head>
I have try to place the link line at the bottom of the document. just before the end of the page.
<link rel="stylesheet" media="all" href="http://mydomain.we/css/my.css" />
</body>
Ran Insight again.
There is 2 tabs for Insight result. By placing the css link at the en of the document I score 100% on the mobile tab. However I still get the same message on the computer part as if no mater where I place it is still getting loaded above the floating line. I don't understand because I can see the page being loaded without the css for a fraction of second.
So I'm wondering what would be the best way to load my css?
Should I place a style tag in the header?
Should I add a style tag on the elements? <-- I would rather not.
So whats the best way to load my css?
Thanks.
IMHO, Insight will always consider loading external CSS file as less efficient, because, from Google Developers - OptimizeCSSDelivery
Optimize CSS Delivery
This rule triggers when PageSpeed Insights detects that a page includes render blocking external stylesheets, which delay the time to first render.
This might be true for small CSS code, but for large ones this is not true, another disadvantage of doing this is if you decided to change something in your CSS, then you'll need to go to every single page and do the change instead of changing it one time.
Beside, external CSS files could be cached unlike inline code, also considering the webpage size will increase or each page because you included it inline in every page.
Should i add a style tag on the elements? <-- I would rather not
Never!, this will give you hard time in maintaining and generalizing your CSS, and will have the top priority so you'd bang your head against the wall wondering why changing the CSS in external file or in the head section is not taking effect.
It may be the media=all causing it because that is used to recognized all media, where as media=screen is for desktops. I would try first using media=screen and if that doesn't work try getting rid of the media tag all together.
Possible duplicate: "Eliminate render-blocking CSS in above-the-fold content"
You should be fine keeping your CSS as it is. I've never seen it suggested to link a CSS file anywhere besides the head. Google Page Insights standards doesn't mean it's the best and most optimal way, every website is different.
The fastest way would be to use <style>...</style> or even inline CSS. But that does not mean it's the best practice. If it's just a few lines of CSS, you could opt for the <style> method, but I wouldn't go out of your way if it's not appropriate just to get a perfect Google Page Insights score.
The solution for this would be first identify and separate the CSS that is used for initial page display and move it to separate file.
Load this initial css file in the head section and move the remaining css to the bottom of the page.
I have developed a mobile application which loads 3 css and 7 javascript files. Problem is if the wifi signal is very slow, HTML loads before all javascript and stylesheets are loaded. Since stylesheet is not loaded, HTML looks disturbed and after few seconds (i guess after css and js are loaded properly), HTML structure automatically take correct format but I dont want to show the disturbed format and to do that I need to make sure that all js files are loaded first then only HTML should display.
If you have any idea how can this be achieved ?
You can do using Cache manifests. Read these resources:
http://appcachefacts.info/
http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5
https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache
Alternatively - ensure your resources are loaded before the body by placing them in the right place (head tag).
You should link to your external css stylesheet at the top of your webpage in the header like this:
<link rel="stylesheet" type="text/css" href="http://whiterootmedia.com/css/example.css" />
or insert your <style> element in the header. Likewise this should be done for your JavaScript if it effects your initial layout. Keep in mind that if you are using an external JS file, the browser will stop rendering your page at the point in your code where your external JavaScript file is referenced, to load that external JavaScript file. If you're using a lot of JavaScript, place it at the bottom of your page (contrary to what most people do) or use an onload() function.
The webpage is loaded top-to-bottom, so the problems you're having should be related to the order of your css (most likely).
On our site we load stylesheets dynamically based on whether the display is retina or not. Right now, we are using document.write for each <link href="stylesheet.css"> we insert in the page, with different css files if the display is retina.
However, this hurts performance because it causes the css files to load synchronously, as the browser has no way of parsing the javascript to load the next file before the previous one is finished. I believe we can reduce page load time if we take advantage of modern browsers' capability to look ahead and fetch resources asynchronously - in another words, if we load the CSS files in parallel instead.
My current solution is to create a <link id="link-tag-id" href=""> tag for every stylesheet to be loaded, immediately followed by a script which determines the retina status, then fills in the quotations with the appropriate file, along the lines of:
document.getElementById("link-tag-id").setAttribute("href", "retina-stylesheet.css")
This seems to work fine, and when I examine the network waterfalls in Chrome developer tools, as well as on WebPageTest.org (running Chrome, Firefox, and IE), the stylesheets indeed load in parallel. However, it seems a little hacky. I was wondering if there are any dangers to creating a <link> tag with an empty href attribute, and if so, what are they?
On a broader note, are there any other recommendations on how to load CSS dynamically and asynchronously?
Thanks for your help!
EDIT: I just discovered this works too:
document.getElementById("link-tag-id").href = "retina-stylesheet.css"
You could use media queries inside your stylesheet to determine if the display is a retina display, then load in the required CSS.
http://css-tricks.com/snippets/css/retina-display-media-query/
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
On a website, I'm experiencing a "flash" of white that occurs between page loads. It looks bad because I'm using a background image and when the page loads, the background images flash before it comes onto the screen (take a look for yourself). This issues occurs in chrome and IE but not in firefox.
The site has a way of preloading stuff. Every element on the page is in a div wrapper #website which is initially at display:none, and every image is in a div wrapper #website-images which is also hidden. Then the site (using a jquery plugin) checks to see if all the images in #website-images are done loading, once they are a cookie is set to remember that this user has loaded the images already so it won't go through the preloading process once they go to another page or reload the current one, then a call to $("#website").show() is made to display the webpage.
So what could be causing this flickering between the page loads? Is it my way of preloading images? I've added different doctypes, and changed meta information but NOTHING has worked. I'm really lost here, does anyone have any ideas or insights?
This is happening because the DOMLoaded event is fired enough milliseconds before the page actually renders.
In a nutshell, this means you have to optimise your website's speed. This doesn't mean to make it download faster, but it means to download in the correct order, in a non-blocking way.
Step one: Your markup
1)
It seems there is a lot you can do to optimise your markup. Firstly, the order of stylesheets and JavaScripts can be optimised. To ensure CSS files are downloaded asynchronously, you always have to include external CSS before external JavaScript files. style.css is downloaded after some/all of your JavaScript calls.
There is 1 script block found in the head between an external CSS file and another resource. To allow parallel downloading, move the inline script before the external CSS file, or after the next resource.
2)
Your main JavaScript file is inline within your markup. Not only does this block the page download until the script has finished downloading, but having it before your content is probably causing (or adding to) the white flash.
Loading your script asynchronously in the head is my preferred method. You will then have to trigger your script when the DOM has finished loading, or you can achieve the same result by placing the script at the bottom of the body tag.
Step two: Harness the browser's capabilities
1) Looking at the http headers, there are 28 items being served as separate HTTP calls, that are not being cached on the browser (including the html pages, jpg images, stylesheets and JavaScript files).
These items are explicitly non-cacheable, and this can be easily fixed by editing your webserver's configuration.
2) Enable gzip compression. Most web browsers (yes, even IE) supports gzip decompression, and most (if not all) web servers support compressing using gzip. You could even go overkill and look into SPDY, which is an alternative lighter HTTP protocol (supported in Chrome and Firefox).
Step three: Content serving
There are around 30 individual items being served from your domain. Firstly, consider how you could reduce this number of requests. 30 HTTP requests per page view is a lot. You can combat this using the following methods:
1) Paralleled downloads across multiple hostnames. Browsers currently limit the number of concurrent connections to a single domain. Serving your images from a separate domain (for example, img.bigtim.ca) can allow them to be served in parallel to other content.
2) Combine multiple items into one. Many items that are downloaded are purely style content, such as the logo, menu elements, etc. These can be combined into a single image (downloaded only once), and split using CSS. This is called CSS spriting. Stack Overflow does this: look here.
3) If you cannot reduce the amount of items needing downloading, you could reduce the load on your server (and in turn, the client's browser) by serving static content from a cookieless domain. Stack Overflow does this with all their static content such as images, stylesheets and scripts.
Step four: Optimise your own code
There's only so much that HTTP and browser technology can do to help your website's speed. This last step is down to you.
1) Is there any reason you choose to host jquery yourself? Jquery's download page shows multiple CDNs where you can point to for speedy, cached script downloading.
2) There are currently over 20 unused CSS rules within your stylesheets (that's 36% of your entire CSS file). Have a re-think of what is really needed.
3) The main chunk of JavaScript (at the top of your body tag) seems to be a hack to attempt to speed things up, but is probably not helping anything.
A cookie is being set to specify whether or not the page has faded in yet. Not only are you using JavaScript to perform a transition which can happily be performed by CSS, but more than half of the script is used to define the functionality for reading and writing the cookie.
Seeing things like this: $("body").css ("background-image", "url('images/background.png')"); and $("#website").show (); usually gets me ranting about "separation of concerns", but this answer is long enough now so hopefully you can see that it is bad practice to mix style and functionality in the same code.
Addendum: Looking at the code, there is no need for jquery at all to
perform what you are doing. But then again, there is no need to
perform what you are doing, so you could probably do better without any
JavaScript at all.
Move your javascript to the end of the html just before closing the body tags. Sometimes it helps.
I know this is old thread but here is a hack I tried and works.
The idea is not to display anything while CSS is loaded completely.
in html file:
<body style="display:none">
in your CSS, the last line:
body{display:block !important}
CSS is render-blocking.
Divide you CSS into 2 parts -
Critical CSS
Non-Critical CSS
Make Critical CSS load with the page. It should come embedded within the head tag.
Make Non-critical CSS lazy load via ajax.
This will result in serious performance optimization in your webpage leading to less white-screen time.
Also, you can consider loading your Javascript in async/defer way.