Serve images from Cloudinary CDN

CodeWritingCow / NYC-restaurant-inspection-records

Web application for searching New York City restaurant inspection records

http://www.nycfoodsafety.org

1 stars 3 forks source link

Serve images from Cloudinary CDN #44

Closed CodeWritingCow closed 5 years ago

CodeWritingCow commented 5 years ago

Reduce page load times by delivering images via Cloudinary CDN. Issue #42

Cloudinary automatically selects image quality and format (ex. WebP, JPEG-XR).

CodeWritingCow commented 5 years ago

@omenwolf I just ran an Artillery test with the changes. RPS is 233, less than our control RPS of 280.

We're also getting an error message in Node.js: ENFILE: file table overflow, open '/Users/garypang/Documents/GitHub/NYC-restaurant-inspection-records/views/search.hbs'

I think this means the number of open files has exceeded the limit on OSX. I don't know if this had a direct effect on the Artillery metrics.

CodeWritingCow commented 5 years ago

Here's another possibility for the lower RPS. On the homepage, the background image is the last asset to be loaded. The image is loaded synchronously by randomImg.js, a custom script for loading random images.

badwolfbit commented 5 years ago

@CodeWritingCow, I'm seeing positive results. No RPS change, but there is latency reduction in play.

Local testing | @omenwolf local machine

Control

CDN media assets

@omenwolf I just ran an Artillery test with the changes. RPS is 233, less than our control RPS of 280.

We're also getting an error message in Node.js: ENFILE: file table overflow, open '/Users/garypang/Documents/GitHub/NYC-restaurant-inspection-records/views/search.hbs'

I think this means the number of open files has exceeded the limit on OSX. I don't know if this had a direct effect on the Artillery metrics.

@CodeWritingCow Your errors might be occurring from lack of processing power on your local machine. Factors:

CPU throttling (thermal or specs)
Background processes

badwolfbit commented 5 years ago

Here's another possibility for the lower RPS. On the homepage, the background image is the last asset to be loaded. The image is loaded synchronously by randomImg.js, a custom script for loading random images.

@CodeWritingCow On React transition this logic should be handled server-side when dictating the random image generation

CodeWritingCow commented 5 years ago

@omenwolf it is good to see the latency reduction. Once we transition to React, let's implement the random-image picker on the serve per your recommendation.

CodeWritingCow commented 5 years ago

@omenwolf I've Slacked you a compiled list of the Cloudinary image URLs.