Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Thomas Beckert 193 posts 469 karma points
    Sep 08, 2017 @ 14:10
    Thomas Beckert
    1

    Google PageSpeed for god's sake

    Using Umbraco And Getting Started
    Umbraco 7

    Hi there,

    more often my customers are complaining about the "poor" Google Page Speed. In my opinion, this is kind of weirred invention of Google to keep us web developers busy. Fighting for bits of css and javascript code saving, while kilobytes of images are on a modern webpage, I feel kind of hacking out pepples to get rid of a montain. Well, anyway, I tried to please the PageSpeed test with google, but moren then 51 / 100 points in mobile view, I wasn't able to reach.

    What have I done so far:

    1.) Compressing js- and css Files with the SquishIt.Framework Easy to use and install. This is the code you can include in your template:

    @Html.Raw(Bundle.JavaScript()
    .Add("~/js/custom.js")
    .Add("~/scripts/home.js")
    .ForceRelease()
    .Render("~/js/combined_home_#.js"))

    2.) Using image compression with croping and quality tag:

    <img src="path to image?anchor=center&mode=crop&width=500&height=500&rnd=131267153610000000&quality=70" />

    So just for fun I reduced the quality to 1 and still got the advice of google, that the images could be more compressed up to 40%. Do f* *ff....

    3.) Client Caching enabled for static content: I enabled the client caching in the web.config, added the following code between the 

    <location path="css">
<system.webServer>
<staticContent> 
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" /> 
</staticContent>
</system.webServer>
</location>

<location path="img">
<system.webServer>
<staticContent> 
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" /> 
</staticContent>
</system.webServer>
</location>

<location path="images">
<system.webServer>
<staticContent> 
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" /> 
</staticContent>
</system.webServer>
</location>

<location path="media">

    Well, after this, I rised from 45 / 51 Point. Yeah! What a boost....

    Now, I still get the advise to compress jpgs, enable Browsercaching e.g. https://connect.facebook.net/en_US/fbevents.js (20 Minutes)

    And that I have to reduce HMTL Code.

    So this is the last try, I want to give this optimization: to reduce the HTML Code. Does anybody know any tool for umbraco to minify the html output? Would be a cool package, I think. :)

    And of course I'm interested in your opinion and experience with the google PageSpeed Tool and the hype around it. For me, it is absolutely rediculous in time, where you transfer megabytes of images and video, to fight for small bits to save you bandwidth.

    Cheers,

    Tom

    Copy Link
  • Rhys Hamilton 140 posts 942 karma points
    Sep 08, 2017 @ 14:46
    Rhys Hamilton
    0

    Hi Thomas,

    Google Page Speed is always a bit of a bugbear, and I've personally found that this isn't always the most accurate representation of how fast a web application is running. However, as you're currently finding out, it's sometimes difficult to express this to a client!

    To touch upon the points you've addressed:

    • Caching - As far as I'm aware, the https://connect.facebook.net/en_US/fbevents.js is an external resource from Facebook, so unfortunately there isn't any way to change the cache time on this - I don't think.

    • Image compression - The online tool TinyJPG might help to compress things a little bit further, which should help to find a nice balance between filesize and image quality.

    • HTML Minifying - The online tool HTML Minifier or the NuGet Package WebMarkupMin.Core both do a pretty decent job at minifying HTML files.

    Hopefully this helps a bit!

    Regards, Rhys

    Copy Link
  • Thomas Beckert 193 posts 469 karma points
    Sep 08, 2017 @ 15:52
    Thomas Beckert
    0

    Hi, Rhys,

    thank you for your quick reply. Did you already tried and installed WebMarkupMin.Core for Umbraco? Is there something special to worry about?

    Copy Link
  • Thomas Beckert 193 posts 469 karma points
    Sep 08, 2017 @ 19:09
    Thomas Beckert
    0

    This tool does the job great: https://our.umbraco.org/projects/developer-tools/html-minifier/

    Copy Link
  • Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib
    Sep 09, 2017 @ 09:07
    Alex Skrypnyk
    0

    Hi Thomas

    Did you make a gzip compression of static files?

    Can you share what google complains about?

    Thanks,

    Alex

    Copy Link
  • Anders Brohus 194 posts 475 karma points
    Sep 09, 2017 @ 10:33
    Anders Brohus
    2

    On the Umbraco websites i'm developing i'm using SCSS in Koala (http://koala-app.com/) In that way the CSS and JS will be compressed.

    Then i'm using Kraken (https://kraken.io/) to compress the images there is a great plugin for that (https://our.umbraco.org/projects/backoffice-extensions/official-kraken-image-optimizer-plugin-for-umbraco/)

    That gives very much on the page speed, when the server is setup to cache static files and gzip them :)

    Copy Link
  • Ali Robertson 13 posts 112 karma points
    Sep 11, 2017 @ 03:55
    Ali Robertson
    2

    Quickest win for me has been using Cloudflare. The free version of Cloudflare is enough to fix a lot of PageSpeed issues, and actually make the biggest difference to site speed. The CDN integration is really nice as it reduces server load, and keeps the site up during IIS resets. Switched to the paid version and got all sorts of other benefits too. Argo routing is awesome, and I've limited umbraco access to safe countries.

    The alternative is any web application acccelerator: nginx + ngx_pagespeed would be free & ideal (would add http2). Riverbed is another commercial option. IISWebSpeed & Helicon Jet operate inside the IIS request pipeline if you don't want an intermediary.

    Copy Link
  • Alan Mitchell 57 posts 279 karma points c-trib
    Sep 11, 2017 @ 09:19
    Alan Mitchell
    1

    Plus one for Cloudflare. Other systems are available, but CF is pretty painless to setup and has insulated us from DDOS attacks in the past as a side benefit.

    Also, try to avoid the Facebook SDK - a default implementation is slow and costly enough to upset Google's pagespeed - strange that Google is down on Facebook? Source: https://medium.freecodecamp.org/why-16-of-the-code-on-the-average-site-belongs-to-facebook-and-what-that-means-68956cd731be

    Copy Link
  • Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib
    Sep 11, 2017 @ 09:22
    Alex Skrypnyk
    100

    Definitely, use CloudFlare, HTTPS and performance improvements for free. Be sure that you exclude Umbraco backend from CloudFlare.

    Alex

    Copy Link
  • Thomas Beckert 193 posts 469 karma points
    Sep 11, 2017 @ 10:08
    Thomas Beckert
    0

    Thanks everybody to share your experience. I will give Cloudflare a try.

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft