I am planning on using ImageResizer to dynamically resize images. The images will be stored on Azure blobs and accessed via CDN.
At the moment files paths are inline and in css:
<img src="/images/someimage.jpg" />
.backgroundImage { url('/images/somebgimage.jpg')
1) What is a recommended way to redirect image paths to use CDN? I've seen people use Html Helpers (in asp.mvc #Html.CdnImage('/images/something.jpg')) but this doesn't work for images in css.
2) There is also url-rewriting in the web.config
Given that ImageResizer uses querystring to manipulate the images, how would you go about cache busting images after an update and how would you point images to use the CDN?
Client-side redirects massively increase latency, and should be avoided. You can't use URL-rewriting between different hosts.
Most CSS pre-processors support helper methods. If you can't use helpers everywhere, manually insert the CDN addresses.
Cache-busting is CDN-specific. Changing the URL works everywhere (unless you disable querystring-specific caching on your CDN). Some CDNs also offer an invalidation API. Either way, I would open a question about the specific CDN you are using as this isn't an ImageResizer question.
Related
I created a domain on CloudFlare, a website with HTML and CSS, hosted my bucket with those files on S3, and integrated terraform for deployments. When I kick off terraform apply and run the aws cli command to update the S3 bucket, formatting changes like text show immediately but my CSS changes like font sizes and colors take several hours to be visible. How can I make both types of changes visible quickly?
I tried hard reloading my browser, clearing cache, and setting auto minify on cloudflare. I haven't tried gzipping my css and min.css files, a little afraid I might break something. I'm unfamiliar with front end development. Suggestions?
For a proxied ("orange clouded") DNS record, Cloudflare applies a default caching behaviour. This includes default cached file extensions such as CSS files. The default behaviour, caching and extensions cached are documented here.
When you do a release on your origin (S3 bucket), you could purge the cache so that the old cached versions are discarded and new ones will be pulled and cached. You can also override the cache behaviour by using Page Rules. By the way, Page Rules (and other Cloudflare settings) are also manageable via Terraform.
I use Nginx and I have installed Google PageSpeedModule on one of my domain. This module is really usefull, and easy to use. All CSS and JS are minified, my images are compressed... it has reduced the weight of 500 kb of my pages.
My question is, can I use this module to deliver only ressources ? I create a kind of CDN, containing all my CSS, images, JS... But, I installed Nginx + pagespeedmodule and the module is not working for one image only for example. But it works with an HTML page and compress the images in this page, but can it work with a direct access image ? Thanks.
Yes, you can use InPlaceResourceOptimization to optimize images even if they are not optimized in HTML (Note: That doc says that this is an Apache-only feature, but that's out of date, it works in the latest Nginx as well.). Add this command to your config:
pagespeed InPlaceResourceOptimization on;
Note that the default way that ngx_pagespeed works is by rewriting resources found in HTML. That is the most efficient way to run it. If you only use InPlaceResourceOptimization you will not get some advantages like cache extension and image resizing. However this is a convenient feature if you cannot optimize resources in HTML.
I`m trying to optimze and convert images using mod_pagespeed and it works very good for all tags in html files. But how could it process images that loaded with js? For example images in slideshows and etc.
Thanks!
mod_pagespeed normally optimizes images and other resources by detecting their URL in the HTML and then replacing the URL with a link to the optimized version. As of mod_pagespeed 1.4.26.1 however, mod_pagespeed includes a feature called In-Place Resource Optimization, which allows resources requested with their original URL to be optimized. This can be used in cases like yours where images are being requested through AJAX. It can be enabled by setting ModPagespeedInPlaceResourceOptimization on in your config file, and have a look at the documentation linked above for more details.
Google's mod_pagespeed module only parses HTML files for images, and then optimizes them. You would have to have the images loaded via the HTML file, and then referenced/shown to the client via javascript. (Have the images hidden by default).
I wanted to know that, is there some special requirement for a website to make use of CDN ?
i mean is there some special scheme(or atleast considerations) on which your website must be build right from the start to make use of CDN (Content delivery network).
is there anything that can stop a website from making use of CDN, for example the way it references the content files, static file paths or any other thing conceivable.
Thanks
It depends.
You have two kinds of CDN services:
Services like AWS Cloudfront that require you to upload the files in some special place that they read from (eg. AWS S3) - In this case you need have a step in your build process to correctly upload the files and handle the addresses somehow inside your application
Services like Akamai that just need you to change and tweak your DNS records so they will serve the request to your users instead of you - In this case you would have two domains (image.you.com and image2.you.com) and have the image.you.com pointing to Akamai and image2.you.com pointing to the original source of the file. Whenever a user requested an image in Akamai, they would come to you through the "back door", fetch it and starting serving that file always.
If you use the second approach it's really simple to have a CDN supporting your application.
There are a whole bunch of concerns when dealing with CDN solutions.
The first one is that a CDN can't serve a dynamic page - i.e. a page that is unique to every user. Typically, that includes PHP, ASPX, JSP, RubyOnRails etc. - so if you're hoping to support lots of users for a dynamic site, you have to come up with another solution. Some CDN providers support "Edge Side Includes" - this allows you to glue dynamic pages together with cached content on the CDN, but this creates quite a complex application.
Of course, even on a dynamic application, a CDN can still serve static files - images, stylesheets, javascript files, videos etc.
#Tucaz explains the two major options here (actually, Akamai also provides a "filestore" CDN option). If you select the second option - effectively, the CDN becomes a caching reverse proxy in front of your website - it makes sense to tweak the cache headers on your HTTP server, and tell the CDN to honour those. Make sure you set your .ASPX files to not cache!
I'm trying to find the best way to speed up the delivery of the static images that compose the design of an mvc site. The images are not gzipped, nor cached in the server or on the client (with content expire). Options are:
Find why images are not cached and gzipped direcly from IIS6
Write a specialized http handler
Register a special route for static images and write a bynary actionresult method
What could be the best solution in terms of performance?
Best solution is to let IIS do it.
IIS6 Compression - most likely you need to specify file types to be compressed like .jpg, .png, .gif types, etc.
Caching will come from making sure that the correct headers are being sent to the client from code, and i believe there is a setting you can set in IIS that enables it for static content, but i'm not sure on that one.
Surely the gain from gzipping most images is negligable since they're already compressed ?
Naybe you have some really badly compressed PNG files or something?
You might want to check out yahoo's performance advice site which includes some useful tips on optimizing images including links to utilities such as pngcrush.
its much better to use an image optimizing utility ONCE than to rely on IIS to compress them (possibly inefficiently) on the fly.
There's a nice library up on the MSDN Code Gallery that does this. It's called FastMVC.