Can’t we just turn it off?
Unfortunately the downside of caching is something we must tolerate; simply because the mild inconvenience of changes not being immediately visible is far out weighed by the increased speed and efficiency of your website and server.
In short, depending on what foundry/font provider you choose to use (ie. Google Fonts, Font Squirrel, etc.) you can be selective in terms of what glyphs you want to leverage versus calling the entire set of glyphs in one large request.
By being selective, you can craft a much lighter request by using additional parameters in your
The trade-offs are evident. This has to be applied to a set of glyphs that are more predictable to manage and which don’t change that often (ie logos).
It’s a very nickel-and-dimed approach in my opinion, but it’s definitely useful.
Thanks to, demosthenes.
Page speed seems to be one of the bigger priorities as of late and I was designated with the RND task in making one of our subdomains, here.ashford.edu a bit…faster. In summary, this is a single-page design intended to support our Marketing campaigns during the 2014 Winter Olympics.
The before benchmarks are listed below for 03/19/2014 unless otherwise stated:
- Google PageSpeed – Mobile: 55/100
- Google PageSpeed – Desktop: 71/100
- Y-SLOW: 67/100
- Network Requests: 112 (03/21/2014)
The after benchmarks are listed below for 03/27/2014:
- Google PageSpeed – Mobile: 64/100
- Google PageSpeed – Desktop: 83/100
- Y-SLOW: 79/100
- Network Requests: 87
Tools and methods I used to compliment our page speed via server-side:
Tools and methods I used to compliment our page speed via client-side,:
If you need a minifier for CSS and JS assets, feel free to explore Minify.
Ensure the min directory lives at the project root of your file server, then you can begin concatenating and minifiying your css and js assets into one source. See below,
//If you externally link assets such as,
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
//Concatenate them like so,
<link rel="stylesheet" href="min/?f=css/bootstrap.min.css,css/main.css">
I stumbled upon this awesome sprite generator a while back. Thanks be to the awesome curators at HTML5 Weekly, CSS Weekly and Web Design Weekly and of course the developer Matthew Cobbs.
Save time. You do not need to pawn this responsibility to a designer.
Stitches An HTML5 sprite sheet generator.
A quick win for web performance. Modify your root directory’s .htaccess file to leverage browser cache. I’ve applied this solution several times and you receive instant results when testing on Google PageSpeed. This example illustrates this solution in seconds – in this case 2592000 (30 days).
ExpiresDefault "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 2592000 seconds"
ExpiresByType text/html "access plus 2592000 seconds"
ExpiresByType application/xhtml+xml "access plus 2592000 seconds"
Thanks to, Samuel Santos