Optimizations (requested by @xhmikosr)

[coderberry]

Image Optimizations

• Ensure all images are optimized using ImageOptim
• Support retina images on image tags
• Consider adding extension to image uploads
• Add no-sniff for the images (CDN) because we serve them without extension

Ad Optimizations

• Specify the image dimensions in the HTML b/c HTML is drawn first and avoid reflows
• Ensure ad rendering does not proxy through CloudFlare
• Add cache-control to header of files, even if it's max-age: 0

Documentation Optimizations

• Document supported browsers
• Document reason for calling two px.js calls in embed

CSS Optimizations

• Replace all 0px with 0 to prevent quote escapes
• Replace obsolete attribute align="center" with CSS text-align

Retina example:

<img class="img-fluid mt-3 mx-auto"
    srcset="/docs/4.3/assets/img/bootstrap-themes.png,
            /docs/4.3/assets/img/bootstrap-themes@2x.png 2x"
    src="/docs/4.3/assets/img/bootstrap-themes.png"
    alt="Bootstrap Themes" width="500" height="200">

The following doesn't work in IE10. Is there a workaround?

var evt = new Event('codefund');

[XhmikosR]

I want to add another thing. We need to verify the 3rd parameter in all xhr.open calls is either set to true or absent (which means it's true IIRC). Personally I'd set it explicitly to true.

• About the Event issue, this should help: https://stackoverflow.com/questions/26596123/internet-explorer-9-10-11-event-constructor-doesnt-work

• About the CSS optimizations, apart from us making some obvious ones, I think we need to automate the minification of CSS and JS.

  • For css I found https://github.com/joseph/ruby-clean-css.

  • For JS I found https://github.com/lautis/uglifier, although uglify-js seems dead at this point. I couldn't find a gem for terser.

  • All this JS optimization, I assume are done only once. If they are performed on each request, we are better off not applying them.

  • Also, while at it, see if we can reduce try/catch usage. For XHR we can use xhr.onerror and so on. Seems cleaner to me. :) See here for a list of properties: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequestEventTarget

• One last thing: Any specific reason you wait for DOMContentLoaded?

• Add autoprefixer with a .browserslistrc. At least for the CSS that is used in the themes. This should help about the browser versions support and automates prefixes.

• I also suggest that you add Stylelint with a sensible default config to make the CSS codebase consistent and less error-prone.