I'm writing a small Mobile Web Application to get started.
So far so good, however I'm considering optimizing performance server-side.
After read about server compression and caching, I'd like to implement fingerprint of static resources. Basically, both W3 Mobile Web Application best practices and Google performance guide recommends it.
I'm using Grunt as the main tool to switch from development to production.
Found that Grunt got two plugins that can help me achieve that :
https://github.com/testdouble/grunt-asset-fingerprint
https://github.com/sapegin/grunt-fingerprint
However, I'm not sure how to update the html file to update link matching updated fingerprinted assets. Should i use some template variables ? I'm not a Grunt expert, use it only a few times for simple task so that might be the template system I have to dive in.
Anyway thanks by advance
If you're not too comfortable writing your own grunt tasks and would like to have asset fingerprinting as well as a ton of other features I suggest you look into Yeoman
http://yeoman.io
It'll set you up with a template for your webapp that just works. I've started using this quite a lot.
Related
I'm surprised I haven't found answers to this by Googling. I currently don't have any CDN and run my deploys through Ansible. I'm thinking of adding a CDN, but since cache is only invalidated on these intermittently, my understanding is that a deploy on my servers wouldn't change the static files served by my cdn for potentially hours. Of course, when I do a deploy, I'd like everything done as fast as possible, so if anything does go wrong (or right), I know about it immediately.
All of that said, how do I actually deploy to a CDN, telling it I'm serving some new set of static files now and that it should refresh these? Is there an Ansible module that does something like this, or an API for some CDN provider? I'd really like to avoid doing this manually on every deploy as this seems to imply for Cloudflare, for example.
Also, I'm currently using CloudFlare for other stuff, so sticking with them would be cool, but I'm willing to switch over to something else if it's better for my use case.
As an aside, this seems like a standard use case with a CDN, but I can't find much documentation or blog posts for how people regularly deploy to CDNs. Am I missing something?
Yeah, you could do a purge/invalidate, but that's not the best. Really, you want to use a tool that compiles* your CSS/SASS/whatever, images into sprites, and compiles your JS. Finally, the tool should understand static hosting, which means it uses a unique url for each publish. That way you don't have to purge, which is expensive for a CDN to do.
Thankfully, there are tools that handle this. I'm aware of Ruby's asset-pipeline, Grails's asset-pipeline, and Python's webassets.
Depending how you build your code and bake your stack, you might use Ansible to upload/deploy the static assets, though most of them have the ability to deploy locally or to s3.
* I'm using "compile", though it's really "minify/munge/compress" or "preprocess" or whatever.
There is a lot of action in the CSS/JS bundling+minification space with MVC4 and things like Cassette, but I can't seem to find one that supports uploading to a CDN natively.
We use Rackspace Cloud Files and it requires that we upload (via their API no less) our assets directly - it doesn't do an origin-pull.
Right now, we have MSBuild script that does this for us, but it is very difficult to maintain and work with.
If you could map a drive, I think RequestReduce MIGHT get you what you want out of the box. It performs bundling and minification at runtime and provides some configuration options that allow you to specify the drop location of generated assets to any UNC path. The intent of this config is for web farm scenarios that have a dedicated share for static assets. I'm wondering if this might work for you. It also exposes an interface that allows you to essentially take over the process of saving and retrieving assets from any durable store. It comes with a local disk store and there is a SqlServer store provided as a separate Nuget package. I've had others propose writing ones for Azure blob or amazon ec3. Its a bit involved but not too horrible. At any rate its free, it provides background image spriting and optimization which few others provide and there is another Nuget package that adds Less/Sass/Coffee compiling. Its used by Microsoft on alot of the MSDN/Technet properties.
I run the project and would be happy to answer any questions via the Github Issues page.
Is there an equivalent to mod_pagespeed Apache module but for IIS?
IISpeed is a full-featured pagespeed port to IIS. It requires a paid license for production servers to avoid showing a banner, but it is free to try out.
Full disclosure: I am one of the people working on the port. So I will not push this further than mentioning the port.
This isn't a direct mod_pagespeed replacement but does some work towards reducing the number of requests, minifying and bundling JS and CSS.
It even automatically provides lossless compression of PNG-images and creates sprites of your background images. See the RequestReduce library.
(not tried it myself)
There aren't any solutions that do exactly what mod_pagespeed does at this time. There are several individual packages you could use to match most of the functionality.
The product #alirobe mentioned (aptimize) does many of them.
YUI Compressor (.Net port) works on JavaScript and CSS minification
IIS (version 5.1 and newer; though much easier to configure in IIS7+) can be configured to do GZIP compression for static and dynamic files
You can set Expires headers in IIS for static files, and in back-end .Net code for dynamic pages
.Net 2.0 can do some script combining with explicit configuration via the <asp:ScriptManager> control
.Net 4.0 has even more script combining abilities and can do more with less configuration. (example discussion of some of the new features)
UPDATE: .Net 4.5 further extends script combining with minification.
Scott Hanselman wrote The Importance (and Ease) of Minifying your CSS and JavaScript and Optimizing PNGs for your Blog or Website that lists many other individual packages that can be combined.
No.
Not right now, at least.
Do keep in mind, however, that mod_pagespeed is an automation of the best practices of web caching and speeding and you can manually set those up. PageSpeed Extension and YSlow extension are both very helpful to understand what should be optimized.
I don't believe there's a free one, but there is : http://www.aptimize.com/
update: Of course, if you're using any other automated deployment tool, you could do quite a bit by integrating commandline tools into the build batch script. HTML5 Boilerplate is probably your best practice reference there. You can also use server-side tricks like HttpCombine.ashx.
I ve developed an asp.net web application with YUI as the javascript library... My site was very slow that it took three minutes to view my page on my first visit....
When inspected through firebug, My yui file was too heavy with size
278kb...
what can be done to improve performance?
278k is less than many images that appear on websites, and YUI is only as heavy as the component stack that you have requested. The common core package yahoo-dom-event.js is 37k (12k gzipped), so you are requesting at least a few other modules. That said, even across a slow connection, 278k should not cause a 3 minute delay. I suspect there is something else causing the performance issue.
There are many tactics for improving page performance. As MontyBongo suggests, use the Yahoo! CDN. If you are hosting the files yourself, make sure you have gzip enabled on your server. One benefit to using the CDN is the ability to use the Combo handler, which bundles all modules into a single script file. If self hosted, you should look into creating manual rollups of the files you are using to emulate this. Also, look into the YUI Loader to bring in module files asynchronously. http://developer.yahoo.com/yui/yuiloader/
Otherwise, look at http://developer.yahoo.com/performance/ and ask on yuilibrary.com/forum for advice. Please note that you should always supply some code for reference when asking for advice to improve it. Paste code snippets inline, link to larger snippets on http://pastie.org or http://gist.github.com, link to the page in question, or (best of all) link to a reduced page that illustrates in isolation the issue you want to address.
Try compressing the javascript with gzip, if possible use the Yahoo or Google CDN to deliver the files:
http://developer.yahoo.com/yui/articles/hosting/
Also try install YSlow, it can give you some good feedback on whats causing your page to load slowly, and provides some tips on optimizing the javascript delivery
http://developer.yahoo.com/yslow/
I agree that YUI is a bit too heavy for many sites.
In case it helps, you might want to have a look at my book for some ideas on how to make things run faster: Ultra-Fast ASP.NET: Build Ultra-Fast and Ultra-Scalable web sites using ASP.NET and SQL Server.
I know that Grails and Asp.net cannot be directly compared but still, does anyone know if there's something available for ASP.net that even remote resembles the functionality of the UI-Performance Plugin for Grails?
You have to do all this explicitly yourself. Very cool plugin though.
Anyway:
Move your own JS to the bottom of the page
Minify that stuff using an msbuild task The MSBuildCommunityTasks Project has a few MSBuild tasks that may do what you are looking for including Merge and JSCompress.
Use YSlow with Firebug to track your score agains the Yahoo UI guidelines.
Script Minification and Continuous Integration with MSBuild
Have a look at Aptimize - http://www.aptimize.com/ - costs money but does the same sort of thing