My page templates have a assets javascript array with assets list of css, js to use in that page, eg.:
<!DOCTYPE html>
<html>
..........
..........
<script type="text/javascript">
var assets= ["/css/my.css", "/js/my.js", "/js/other.js"];
</script>
<script type="text/javascript" src="/js/head.js" async="async"></script>
</body>
</html>
with head.js (loaded asynchronously), load assets list of page:
// head.core code - v1.0.2
// head.css3 code - v1.0.0
// head.load code - v1.0.3
head.load(assets);
now, Google Page Speed on mobile tab (not on desktop) says Optimize CSS Delivery of my.css
but my.css is loaded asynchronously from head.js loaded asynchronously.
What am I doing wrong?
Optimize CSS delivery need not necessarily mean to load them asynchronously alone. It could also mean that CSS may be bloated and it has class that may not be used to render Above the fold or not on this given page itself.
When developer using tool minify their CSS, this happens where in all CSS across pages are bundled together and is bloated!
One way to handle is use CSS inline that required to render the Above the fold and move rest of the CSS to bottom of the page. If not you can try to use Google Apache or Ngnix page speed plugin. https://developers.google.com/speed/pagespeed/module/
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.
The situation
I have been attempting to create a react application. The index page that is loaded first contains a basic CSS and HTML loading animation and then the external scripts and CSS in a blocking order right before </body>, with the last script removing the loader animation and showing the page.
The intended purpose of this is to load a very small page (2KB in total) containing a loading animation and then load the 8MB of scripts, stylesheets and images, creating a more seamless user experience.
<html>
<head>
...
[loader css]
</head>
<body>
<div id="loader">...</div>
<script src="..."></script>
<script src="..."></script>
<link href="..." type="text/css" rel="stylesheet" />
<script> [remove #loader] </script>
</body>
</html>
The problem
This works great in Chrome, as it immediately renders the page (loading animation) and then the external dependencies. But because safari has weird, inconsistent, and ostensibly non-deterministic loading practices:
Safari starts loading the contents of the new web page, but does not start rendering it until it has loaded a sufficient amount of information.
this approach does not work; it'll just show the address bar loading indicator (for the dependencies above the closing body tag) and a blank page instead of rendering the HTML straight away.
If anybody has a solution that:
won't change the order in which things are loaded on the page
works on as many browsers as possible
is safe from cross-site scripting vulnerabilities
that would be enormously appreciated. Thank you!
The real problem is that browsers cannot be certain your JavaScript is safe to skip over until it's been loaded, parsed, and executed. If you were to add the defer attribute to your scripts the page will load and display without waiting for the assets to download - but the removal of the loader will also execute without waiting.
Consider a combination of adding defer to the external scripts and making the loader removal script itself an external defer script. According to some defer scripts are supposed to execute in the order they were specified. (Also take note of the references to async and DOMContentLoaded on that comment.)
React.js might also provide come callbacks that could be used more reliably than DOMContentReady.
In React.js's tutorial it shows that its javascript files need to be within the <head> which doesn't allow the page to render until it has finished loading.
It seems from this quick test that any website that requires react.js does not bode well with google's pageSpeed as it throws this issue "Eliminate render-blocking JavaScript and CSS in above-the-fold content"
My questions are:
does this actually effect page speed
does this issue mean google page ranking will also be effected
To expand on #Bojangels comment: You're better off loading React in a script tag just before the </body> closing tag as follows:
<html>
<head>
<title>This is my app!</title>
</head>
<body>
<!-- Your body content -->
<script src="https://fb.me/react-0.13.3.min.js"></script>
</body>
</html>
Putting the script at the end will allow the rest of the html and your css rules to render before the script tag is reached and react-0.13.3.min.js is loaded.
Also as mentioned, you could add a defer attribute to the script tag like so:
<script src="https://fb.me/react-0.13.3.min.js" defer="true"></script>
By adding a defer attribute you would accomplish the following (source: mdn):
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.
As far as your second question about whether page load speed effects google search ranking, Moz (an SEO firm) wrote a post about page speed and ranking and concluded:
Our data shows there is no correlation between "page load time" (either document complete or fully rendered) and ranking on Google's search results page.
There is an npm that will help you Extract & Inline Critical-path CSS in HTML pages using webpack.
Critical Webpack Plugin: https://github.com/nrwl/webpack-plugin-critical
This helped me in React.js and to resolve Optimize CSS Delivery after the Google's pageSpeed insights.
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).
I'm trying to organize my website in a modular way using a server side include system. The idea is that every module will have it's own css and own javascript and will only be loaded once included on the page - so any page not having the module wont load that modules css/js either.
I've done it like this:
header.html
-----------
<!-- header start -->
<link rel="stylesheet" href="css/header.css">
<header class="module-header">
<div class="links">
links...
</div>
</header>
<script src="js/header.js"></script>
<!-- header end -->
footer.html
-----------
<!-- footer start -->
<link rel="stylesheet" href="css/footer.css">
<header class="module-footer">
<div class="links">
links...
</div>
</header>
<script src="js/footer.js"></script>
<!-- footer end -->
and then on the index.html:
<!DOCTYPE html>
<head>
<title>Modular page</title>
</head>
<body>
<!--#include virtual="html/header.html" -->
<!--#include virtual="html/footer.html" -->
</body>
</html>
This works fine, and since the scripts are loaded after each module the content is guaranteed to exist before running the scripts. Css is loaded just before and makes sure it will have a nice layout.
However - I've run into some issues with my solution:
In case I were to include a module several times, like for example a product.html, which will be repeated say 20 times - I would have the css and js files included also 20 times. Not good.
Generally I've seen css being included in the head tag, and js in the end of the body. Will having them all coming as the document is being built up induce any issues?
Those includes can be exchanged with any include, php, asp or jsp... this is using apaches SSI.
Is the whole idea going in the wrong direction? I'd imagine this for development setup, but having some kind of smart nodejs rhino script that loads the page - finds the loaded scripts and css, concats and minifies and adds as single includes for production.
To overcome issue of including js or css for times, you should include that files in top of the file in which you gonna include and not inside that included file. Means your product.css/js should be removed from that and should be placed in your index.html or header .html for once
including same js for times may stop your javascript so make sure that they are not conflicting each other
Use a javascript module system. Javascript AMD modules requirejs to load javascript increamently is a very good option. requirejs.org is a very good place to start.
For your context use
//inside header.html
require(['header.js'], function(){
//call this require() multiple times it will load the javascript only once.
//user header.js ... once this line is require() line is executed the
//header.js will be loaded forever
});
footer
//inside footer.html
require(['footer.js'], function(){
//call this require() multiple times it will load the javascript only once.
//user header.js ... once this line is require() line is executed the
//header.js will be loaded forever
});
Now comes the problem of CSS loading in a modular way. Requirejs CSS plugin is also available.
Now once you start using this kind of system, the script loading happens asynchronously using javascript. So the scripts arrive a little late in the screen. Even the css arrives a little late. So if you are writing global event handler like window.onload= func(){}, these are going to fail as most of your javascript would not have loaded yet. If you are doing styling on top of CSS which was dynamically loaded that too requires to be done after CSS loading completes. Using !DomReader in requirejs is a good option. Someday I will write a blog which will discuss these in depth.
The smartness of minifying is there in requirejs as well. requirejs optimizer