over 8 years ago from Wesley Haines, Product Design Lead at Nike
Recently came across the Google Page Speed Insights tool from Kyle Mac's post (big ups- great site) and wow... my site is awful.
Have no clue really how to compress all this content and stuff. Any tips or ideas would be a great help. Thanks everyone!
wesleyhaines.com
Use this to compress your PNG assets, which will help a lot.
If you use Sublime Text, you can use this plugin to minify your CSS and JS assets.
Also, running an audit on your website (Chrome Developer Tools > Audits tab) shows some quick things you could fix, like specifying image dimensions for 64 images, and removing 12114 unused CSS rules.
you're the man, Eugene. Thanks!
I would actually use ImageAlpha instead. You get drastically reduced PNG sizes. If you combine it with ImageOptim you will compress your png's as much as possible. Keep in mind that this is lossy compression, but I've found in 99/100 cases everything looks great.
Dude WTF, for some reason your website preloads 50MB of content with over 400 requests and it took more than 5 mins to get past the loading splash page on my fibre connection. Ain't nobody got time for that, top of your optimisation list is to cut all that preloading stuff out.
Amen.
There's absolutely no point in "minifying CSS with a grunt task" (or whatever), until this overall mess is fixed.
Second this - there should be no need to load 77mb (total page weight) for a simple page. How about loading the content of the modals when the button is clicked?
Stop preloading the whole site, this is why you're scoring so badly. You also probably want to look at why you have 189 errors on the page, most of them seem to be blocked frames.
You also seem to be hosting most of the assets on some google domain that has quite a high latency. (http://cl.ly/image/2M403q2z3N0k).
If you want to get serious also look at image sprites for all of the logos.
how can i load the google drive assets on click?
haha totally agree... still learning all of this on my own right now.
how should i go about cutting out the preloading stuff?
Definitely go for Grunt! It can do so much for you automatically, like minifying the JS, optimizing images and so on. Read through this article and you should know everything there is: http://24ways.org/2013/grunt-is-not-weird-and-hard/
If you don't already use Sass/Less you should also consider a look, because you don't have to care about CSS minification then.
Read everything Filament Group writes about site optimization. (Or anything else.) http://filamentgroup.com/lab/
nice! Thanks, Dan.
Second the Filament Group articles.
Theres a few easy ones to start off with like combining all your css and js and minifying the result and crushing your PNGs. For your icons relating to each discipline you could create a png sprite so your only making one http request. As someone else mentioned above specifying image dimensions helps. You could use something like uncss to remove all the unused css rules.
Depending on how much control you have over the backend you could also enable gzip or deflate compression - this saves a lot of bandwidth.
all of these minifying and lossless compression problems are easy to understand- I just don't know how to actually do it.
Websites like http://tinypng.com and http://jpegmini.com will help. Image optim is great for doing it in batch but may not see as good returns as tinypng or jpegmini, though it's good for getting an extra few % reduction https://imageoptim.com/
And use this http://www.webpagetest.org/ in your advantage. Gives you the best insight on what happens. This tool goes further than Google Pagespeed(Insights).
awesome. this is a fantastic resource.
A couple people have mentioned it before but the biggest thing that is slowing you down is the size of your page. A good page size to aim for is ~1-2MB this will help with page loading a toooon. It will probably get you down to the 1-2 sec range.
Compressing assets, and minifying CSS is a great thing to do, but the loading time it will save will be nowhere comparable to cutting down the overall size of your page from 50MB to 1-2MB.
Alot of stuff has been already pointed out here. One of my personal favorites to compress PNG's is: http://pngmini.com/
I visually end up with 70% smaller PNG sizes. This is the best you can get without giving in too much on quality.
Also something else Google PageSpeed will point out, is to cache and or Gzip your assets. If you have FTP/Server/SSH access to the website or server than you can create/edit the so called .htaccess file. This file can contain compressing rules to 'Gzip' all the assets before ending up on the visitor's device.
Read more on .htaccess here (including examples): http://css-tricks.com/snippets/htaccess/
A thing that really helps is enabling gzip compression and applying caching to everything in a logical way.
You won't go wrong with adding the html5 boilerplate htaccess file. This has a lot of sensible defaults. https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
Though the best thing you could do is to reduce the amount of requests you need to lazy load the images the very least. I think if you struggle you'll need to break the site up into additional pages or something. This isn't very helpful but I think you do need to restructure your website a little.
Edit Open chrome developer tools and go to the network tab and watch as everything loads this can give you a lot of information on how things are being loaded in as well and show you the sizes of files and what's causing the slowness.
Well, since y'all are concentrating on page speed, I would love to get some feedback on my site as well.
Any advice on speeding this up? Seems to load pretty fast, but Google Page Speed doesn't really give me a good grade.
Hi Jad,
Sure there's a couple things:
1) Compress/Minify your outputted CSS: https://www.dropbox.com/s/ljhl31te4cgwv2a/Screenshot%202014-08-11%2014.51.32.png
Are you using CSS pre-processors? I'm using CodeKit which on generating a site, it outputs minified CSS for me. And even included the CSS module 'Normalize' in for me.
2) Fix this: https://www.dropbox.com/s/dkfc2ypglkhy3be/Screenshot%202014-08-11%2014.53.12.png It means it can't file the find. So either fix the path or remove the reference in the template/html file.
3) This one in my opinion is a biggie: https://www.dropbox.com/s/rnnxj0ra3zqlz4x/Screenshot%202014-08-11%2014.54.12.png
First: Make sure you merge all of your CSS into 1 file and compress it. Then only call the CSS file on top.
Protip: Create 2 CSS files. One with 'above-the-fold' critical css. One with less critical 'above-the-fold' content which you place at the bottom. By using css preprocessors (SCSS, SASS) this will make your workflow to facilitate this, easier.
Btw there's also a JS tool which can make the critical CSS workflow for you: https://github.com/addyosmani/critical
Good luck tweaking.
Thanks for the suggestions. I will look into doing that and optimizing more. Thanks so much!
If you're looking for an automated approach, I'd recommend using a JavaScript Task Runner like Grunt. It's a bit of a learning curve but once you've got the system in place you'll never want to do things any other way. There's LESS/CSS + JS minification/concatenation, Image/SVG minification and more. If you have the time it's really worth the hour or so it takes to get up and running.
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now