Getting Your PageSpeed Score Up

Getting Your PageSpeed Score Up

Have you ever had
one of those moments where you’re staring at your
phone waiting for a web page to load, you’ve got full
signal, and nothing’s happening? This kind of sucks, right? I mean, this site could
be the best thing ever. But if it takes too long to
load, I’m going to get bored, and I’m just going to
go do something else. Now get this. You have about one
second before a user starts to get distracted. One. So what causes a site
to have slow load time, and how do you fix it? My name is Matt Gaunt,
I’m a developer advocate, and I wanted to talk to you
about PageSpeed Insights, a tool which can be used to find
issues affecting your site’s load time, and give you some
tips on how you can fix them. So when you visit PageSpeed
Insights, you bash in your URL, and it’ll give you
a score out of 100, and highlight any problem
areas with your site. The focus of this
tool is to point out issues which, if fixed,
would improve your site’s overall load time and
make your users happier. The big question is, what do
you do with this information? Well, the most common problems
fall into three buckets. First, problems that can
be solved with build tools. For example,
JavaScript files where you could minify them
and send less bytes down the wire, or mergine
multiple files, so rather than make four
requests, you only make one. The second set of
issues are focused on the structured your page. For instance, where you link
to your JavaScript files. And thirdly, problems
which need server side tweaks to enable things like
caching of your page assets. Let’s start off with
looking at build tools. Many of you may already be using
some kind of build tool today, but if you want,
then I recommend checking out Grunt or gulp js. These build tools are
picking up a lot of steam within the web
development community, and they’re fairly easy
to get to grips with. The main reason you’d
want to use a build tool is to automate any
set of tasks you’re going to run on your
project on a regular basis. And most build tools will allow
you to pull in third party modules, which means you
get a lot of stuff for free. So let’s look at
a basic example, like JavaScript minification
and concatenation. In other words, take
some JavaScript files, strip out any white space,
replace variable names with shorter ones, and then just
squish all the files together. This way our JavaScript file
is smaller, making it faster to download, but
the browser also has fewer files to download. To achieve this, you
can use the uglify task. You define which files
to minify and merge, and it just takes
care of it for you. cssmin and htmlmin will do the
same thing for CSS and HTML. Another common problem
area is image optimization. When you run PageSpeed
Insights, it looks at your site and basically checks
whether any of the images are larger than they need
to be, and in the guidelines it will recommend jpegoptim,
which is a command line tool which strips out any
metadata from the image files, and can lead to some really
impressive reductions in file size. And when I say it
strips out metadata, I mean things like which camera
was used to take the photo. It’s not needed for a
browser to render the image to just get rid of it. So to add this to your
build process, use imagemin for raster images, and
svgmin for vectors. And svgmin will strip out white
space, and any unnecessary tags and attributes from
your SVG files. The second set of problems
falls into the category of page structure. Now, I don’t know about
you, but I’ve definitely put a JavaScript file in
the head of my page before. The problem with this
is that the browser will start to pass the
document, and as it reads the HTML
tag, the head tag, it will eventually
reach your script tag, and this is where you’ll
see the screen of bad times. Nothing. The reason the page
stops rendering is because JavaScript can
manipulate the DOM and CSS. So the browser needs to go
and fetch the JavaScript from the server and execute
it once it’s downloaded. This is just in case the
script changes a DOM or CSS. And it’s only after
the JavaScript is finished executing that the
page can continue rendering. So to avoid this delay,
simply move your JavaScript to the bottom of
the body element. This way the browser can
pass and render the page up to this point,
and then it’ll handle fetching the JavaScript
at the very end. An alternative and
slightly more performant technique is to use
the async attribute. Now, what async does
is it tells the browser to download and excuse the
JavaScript asynchronously, avoiding the render block. The reason it’s
slightly more performant is the browser doesn’t need
to wait on the DOM and CSS to be loaded before it can
execute the JavaScript. But you need to be
careful, because it means you can’t rely on the DOM,
CSS, or any other JavaScript file to be loaded by the
time your JavaScript actually executes. Essentially, it
might require you to think a little differently
to how you use JavaScript, depending on what you’re doing. The second page
structure woe is CSS. When we add a CSS link tag,
the rendering of the page will block much like
it did with JavaScript. We’ll see it step through
the HTML tag, into the head, read to CSS, and boom. We’ll hit the sad
screen of nothing. The browser has no
choice but to do this. It has to download the CSS
before it can start anything, otherwise the user would
see unstyled content followed by just a flash of
all the CSS’s as it’s loaded, and everything is styled. The fix for this can
be quite involved, and there’s a lot of caveats,
each with their own pros and cons. If you have a relatively small
amount of CSS for a page, you can in line it
directly into the HTML, removing any requests
for a CSS file, and allowing the
page to be rendered as soon as the HTML is loaded. If you have a large
amount of CSS, however, you could in line just
above the full CSS so the browser can render
the most important content, and then the load the of
your CSS using JavaScript. The obvious downside
of this approach is that it requires JavaScript,
meaning if it’s switched off, you won’t get the
additional styles. With both inlining
techniques, you also lose the ability to cache
the CSS files, which could be a big loss if
you have styles shared across multiple
pages, in which case it might be worth splitting
out the styles to CSS files so you can cache
them, and inlining any unique styles for each page. Ultimately, test it and see
what works best for your site. The final element of
the page load gotchas is server side tweaks. Jumping straight in,
let’s look at caching. When the browser makes a request
for a file from your server, it should always return a
cache control max age header. This is what tells the browser
to cache a file for how long, meaning the next time
a user visits your page and it needs a file, it doesn’t
need to download it again. It’s just good to
go from the cache. When it comes to caching,
there are a few things you need to ask yourself. First, how long can
I cache my files for? Second, how do I
actually get my server to return this cache
control max age header? And thirdly, what do I do
when I need to change a file? Answering the first
question of how long do I cache my files
for, I personally found HTML5 Boilerplate to
be a good source of guidance. If you look at HTML5
Boilerplate’s HD access file, there are a number
of caching rules to finding the caching period
depending on the type of file. Here’s a snippet of the file. We’ve got CSS and
JavaScript cached for a year, images
cached for a month, and HTML isn’t cached at all. Now, this is just a guideline. You may want to cache
your images for a year, you may want to cache your
HTML for 30 minutes to an hour, just so that any user hopping
backwards and forwards between pages gets
a smooth experience. If you’re using Apache
to host your site, then you can just
use this HD access file to implement
the caching rules. If you’re using a
different server, then check out the
documentation on how you can add these headers. Now, chances are
you’re going to want to change some of these files
before the cache expires, in which case consider
adding a build step to revision your file names. This way, there
won’t be any issue with older versions
of files being used. filerev is an example
task designed specifically for this use case, and can
even be used with other modules to replace file names
in your HTML and CSS so it’s pointing to
the revision file. The final thing to enable
on your server is GZip. If you’ve not come
across this before, it’s supported by all
browsers, and it’s an incredibly powerful
tool for compressing any text based assets. There are some
huge wins to be had with compression
rates up to 80%. Now, how you enable this
will depend on your server, but the gains are big for
a relatively small amount of work. I recently got this
working on my Nginx server, and it was as simple
as just adding GZip on. So those are the three
most common problem areas raised by PageSpeed Insights. Build times fixes, page
structure, and server side tweaks. Now, these aren’t the only
tools to help with performance, so if you’re looking for
more tips, or just curious about what other tools
exist, I strongly recommend checking out this
blog post by Addy Osmani. It includes many of
the tools mentioned in this video in
much more detail. Hopefully this has
been a useful insight into how you can improve your
site’s load time performance. I challenge you to get 100
points on your PageSpeed score. Cheers.

Comments (35)

  1. How do I setup these apps like gulp-imagemin through github?

  2. On a regular website, what would be the percentage of effectiveness for each of the 3 buckets? I would say that 70% or greater is server side.

    The page structure is just an illusion of fast page so no improvement there. (Maybe async can help when you don't realy on other js libs)

    I would also add that build tools like grunt are an overhead, keep it simple guys.
    JS can be compressed with other tools even server side.

    Images should be compressed outside of the JS/CSS build because you don't want to do a JS/CSS build every time you add new images to your website.

  3. Love life let love live and
    Where my money talking to all my sites

  4. I/O Byte: Getting Your PageSpeed Score Up
    /by @Matt Gauntย  #iobytes ย  #io14 ย  #pagespeed

    PageSpeed Insights is a great way for developers to check how their site performs out in the wild, but how do you actually improve your score if it's not what you were expecting? Well in this session we will take a web application and use Grunt to create a build process that will help optimise our site to be faster and giving us a better workflow.

  5. Inline styles. Get tha fuck…

  6. kmt my mobile is at 72 and web at 75 i need mega help with Eliminate render-blocking JavaScript and CSS in above-the-fold content

  7. Thanks alot ! a very good tutorial ๐Ÿ™‚

  8. Thank you very much.
    GOD bless you.

  9. really useful tutorial, Thank you so much

  10. Everybody seems to be talking about Render Blocking. Sounds like something Google planted so that we could spend more than learning codes instead of thinking of how to run a successful blog. Sucks!

  11. I am not a software engineer, but if there was any person who could help me I would be grateful. recognizing my limits even paying.

  12. it didnt work for me, sound like this video need some update

  13. how can one fix "Eliminate render-blocking JavaScript and CSS in above-the-fold content" ?

  14. Good Info but no Link to their site which I as site owner wanted to test it's Loading-Speed so here is link it will Analyze site & show Improvements needed & Tell how to Fix faults

  15. Thank you so much for your video and your tips on best pratices! This guide helped me to get my Google PageSpeed Score from 81 to 97.

    Keep up the good work!

  16. so how can I use Grunt Build Tools with WordPress?
    cant' find a plugin anywhere for it or grunt-contrib-cssmin

  17. I have just created a complete page speed tutorial and complete server setup guide with nginx varnish with SSL. if interested then check it out. No Pressure!

  18. hi there .. apparently my website made using wix) is slow because of too many java scripts .. i am supposed to combine 70 files into fewer .. but dont know who.. called wix .,. they were useless and said its not possible ! any suggestion ? plz ๐Ÿ™

  19. hello, in the WordPress where we should have to add google analytics tracking code that will not affect to my website pageSpeed.

  20. You are using tech speak that web devs will understand but ordinary bloggers will not. This is a useless video for most!

  21. Thanks a lot for great information

  22. Just a heads up. Test my site does not work with Chrome. I have to use Firefox to run it. :/

  23. Is there any Integral plugin solution to be used on WordPress for non-techies?
    I really appreciate it since im getting scores below 50 so far.

  24. Page loading speed is 876 ms (less than a secon) google speed insight rank is 65 for mobile 80 for desktop. Spend tons of time and money. Result 95 for mobile 97 for desktop. AND SPEED OF LOADING IS 752ms (differences is 0.1 seconds) Does it make differences for user? definetly NO because noone can feel such a small differences. The problem is somebody spend time and another somebody spend money on it because it effects google rank…

  25. Awesome ideas need louder volume, especially for people with soft voices ๐Ÿ™‚


  27. how to test a websites UI load time if it has a username followed by pin and google authenticator password ? Please help

  28. How can you use GZIP in node js

  29. href google font makes my score drop by 30 when put above the body.
    Maybe google should start fixing their sites? Or do you know a solution to the problem.
    I just put it as last element in body now…

  30. hey guys i still get very slow results but i already optimized my css and java script and also the pictures.. can you help me?

  31. Void and defunct now

  32. Hello, I have tried to put ASYNC DEFER onto some amazon scripts and its stoping them from loading, do you have any ideas how to get round this?

  33. I just put ASYNC="async" at the end of google fonts, font awesome & ripples js & its gone from 8.1 seconds to 8.4?? made it long load time?

  34. Is this video available in plain english?

Comment here