tofat
asked on
Eliminate render-blocking JavaScript and CSS in above-the-fold content
I am trying to improve my website speed ranking as per Google's page speed insights. I found some code on the net that apparently helps with that but I just wanted to check if anyone had a solution other than these or if these would work. Some suggestions were to take all the content from your css files and put them into one, but that sounds cumbersome.
Here was one suggestion I found ( I think, unless I misunderstood the blog post)
The other code I found was something like this (I just extracted a bit from their webpage)
Here was one suggestion I found ( I think, unless I misunderstood the blog post)
<script>
var loadMultipleCss = function(){
//load local stylesheet
loadCss('myawesomestyle.css');
//load Bootstrap from CDN
loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
//load Bootstrap theme from CDN
loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css');
}
var loadCss = function(cssPath){
var cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.href = cssPath;
var head = document.getElementsByTagName('head')[0];
head.parentNode.insertBefore(cssLink, head);
};
//call function on window load
window.addEventListener('load', loadMultipleCss);
</script>
The other code I found was something like this (I just extracted a bit from their webpage)
function append_css(file) {
var head = ge("head")[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = file;
link.media = 'all';
head.appendChild(link);
}
append_css('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css');
append_css('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
setTimeout("nsz_spl2();", 1500);
setTimeout("nsz_spl2();", 3000);
setTimeout("nsz_spl2();", 5000);
setTimeout("nsz_spl2();", 10000);
setTimeout("nsz_spl2();", 15000);
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Not sure about the Mac - Windows you run that from your shell.
ASKER
Ray, I liked the title of the one link you sent me regarding Grunt, haha.
I was following everything on the page successfully until I got to :
npm install -g grunt-cli
When I did that I got a lot of errors but this one stood out the most:
'Please try running this command again as root/Administrator.'
And there was something like this:
'ar.unpack untag error'
This is complicated :/
I was following everything on the page successfully until I got to :
npm install -g grunt-cli
When I did that I got a lot of errors but this one stood out the most:
'Please try running this command again as root/Administrator.'
And there was something like this:
'ar.unpack untag error'
This is complicated :/
ASKER
Seems like I will have to use "sudo", but I am not sure me doing this is such a good idea as I don't actually know what I am doing and apparently running terminal as root can seriously break things. Is using these things like Grunt etc. the only way to do this?
Yes, it is the only way to do this.
And you don't need to be worried about breaking things. Just use a VM during the dev cycle. Good VM stacks are available from Bitnami.
And you don't need to be worried about breaking things. Just use a VM during the dev cycle. Good VM stacks are available from Bitnami.
ASKER
okay, so I used sudo in front of the commands and it worked! I managed to combine all my js files into one! :)
The only problem is that the page doesn't load as it should now. There are some things missing :(
The only problem is that the page doesn't load as it should now. There are some things missing :(
ASKER
Also, when moving on in the tutorial I tried to now minify but I am getting an error regarding "default" which was there before the minify script so not sure what is wrong. Any ideas?
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'js/*.js', // All JS in the libs folder
],
dest: 'js/build/production.js',
}
uglify: {
build: {
src: 'js/build/production.js',
dest: 'js/build/production.min.js'
}
}
// 2. Configuration for concatinating files goes here.
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'uglify']);
};
Forgot to mention Vagrant. Can be very helpful.
https://www.vagrantup.com/docs/
And it looks like you're making good progress! Don't know what the error regarding "default" might be, sorry.
https://www.vagrantup.com/docs/
And it looks like you're making good progress! Don't know what the error regarding "default" might be, sorry.
ASKER
Can I combine .js files with min.js files?
ASKER
npm install -g browserify
Do I run that in terminal (on Mac) or where do I run it?