7

SOS! Need help with site optimization

almost 5 years ago from , 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

23 comments

  • Eugene CheungEugene Cheung, almost 5 years ago

    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.

    4 points
  • Marcel Turi, almost 5 years ago

    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.

    2 points
    • Joel LJoel L, almost 5 years ago

      Amen.

      There's absolutely no point in "minifying CSS with a grunt task" (or whatever), until this overall mess is fixed.

      1 point
    • John NyeJohn Nye, almost 5 years ago

      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.

      1 point
    • Wesley Haines, almost 5 years ago

      haha totally agree... still learning all of this on my own right now.

      how should i go about cutting out the preloading stuff?

      0 points
  • Wesley Haines, almost 5 years ago

    all of these minifying and lossless compression problems are easy to understand- I just don't know how to actually do it.

    1 point
  • Dan Boland, almost 5 years ago

    Read everything Filament Group writes about site optimization. (Or anything else.) http://filamentgroup.com/lab/

    1 point
    • Wesley Haines, almost 5 years ago

      nice! Thanks, Dan.

      0 points
    • mewo a, almost 5 years ago

      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.

      0 points
  • Christian Krammer, almost 5 years ago (edited almost 5 years ago )

    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.

    1 point
  • Jad LimcacoJad Limcaco, almost 5 years ago

    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.

    http://jadlimcaco.com/

    0 points
  • Steve McKinneySteve McKinney, almost 5 years ago (edited almost 5 years ago )

    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.

    0 points
  • William Minty, almost 5 years ago

    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.

    0 points
  • Michel BioMichel Bio, almost 5 years ago (edited almost 5 years ago )

    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/

    0 points
  • Greg Mathews, almost 5 years ago

    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.

    0 points
  • Michel BioMichel Bio, almost 5 years ago

    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).

    0 points