2

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 know this is not the default behaviour, so I think it must be Google Web Starter Kit's doing.Here is the debug information when debugging on device. All images became 231 B size no matter how large it actually is. (On desktop debugging the size varies.)

enter image description here

I tried using Google Web Starter Kit (https://github.com/google/web-starter-kit) recently. The tools in it are made of Ruby, Node.js, SASS and Gulp to help you 'build' website. Pre-build you can enjoy automatic reload because the Gulp script will watch all files for you. When build it will run various tools to minify HTML,CSS and compress images.

According to this page https://developers.google.com/web/fundamentals/tools/build/build_site the gulp-imagemin was used. So I guess the imagemin is doing the mobile optimization for me? What kind of compression can serve automatically resized image on mobile? And why is the size 231 B? Is this related to my screen size?

Improve this question

1 Answer 1

Reset to default
1
+50

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.

Improve this answer
1
  • I see, flushing the cache does the trick. (On chrome mobile I have to go in the Settings > Privacy menu to do this) I have thought all the time that the 'Refresh' button is to re-download everything but pressing enter with URL highlighted is taken from cache. As seen from "Size Content" column, if I press enter with url highlighted (or came from hyperlinks) it says "From Cache" (signifying 0 byte transferred) but with F5 it says a small number of "xxx B" what is the difference? Also what's weird is that only on mobile those small bytes has the same number.
    – 5argon
    Commented Aug 24, 2014 at 9:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.