: How Google Web Starter Kit serves adaptive image for mobile? My website weirdly (in a good way) serves smaller images when viewed on mobile. I wanted to know what cause this? As far as I

@Radia820

Website compression

The boilerplate your using uses nginx and ngx_http_gzip_module which will compress components of the website. It's pretty common to find most websites using gzip compression.

Caching

Your website is currently caching meaning that it will use a status of 304 Not Modified combined with an expire data. At present your website is using an expire data of 1 Year which is exactly 31536000 seconds, I personally prefer 2 weeks (1209600 seconds) expires but depends on how often your changing your website and you can actually set different expire times on different file extensions.

Cache-Control max-age=31536000
Connection keep-alive
Date Fri, 22 Aug 2014 07:50:28 GMT
Expires Sat, 22 Aug 2015 07:50:28 GMT


231B shut the front door!

The reason your seeing requests as low as 231 bytes is because those files have been cached and stored in your browsers temp files. Obviously not all people will have those files cached so its important to see what first view reacts like, this can be done simply by holding CTRL and pressing F5 while still holding CTRL. Using the ctrl and f5 will tell your browser to flush cache, this works in most modern browsers, in fact I've yet to come across one that doesn't do this.

Test reliability

Personally I care what actual users will experience rather than what I'm experiencing. You can emulate actual visitors by using WebPageTest, here's one I ran earlier, I recommend testing it from multiple locations all at the same time.

Gulp-imagemin

Doesn't look like you have Gulp Imagemin setup correctly since I'm viewing the same resolution image on the front page for all browser width sizes. You should view through there documentation again, basically the image file-name and resolution should change when the viewpoint is triggered.

Vote Up Vote Down