chriscoyier

How WordPress Plugins Should Handle Front End Resources

This is a WORK IN PROGRESS intended for fleshing out and feedback

It's very common for people to be unhappy with how a WordPress plugin adds front end resources to their site. If a plugin needs CSS, the plugin will add a <link> element to that CSS. If the plugin needs JavaScript, it will add a <script> to that JavaScript.

Plugins do this because it works. It's damn important for a WordPress plugin to work, even in adverse conditions. They rightfully want good ratings and little customer support.

But this comes at the cost of additional HTTP requests. In optimizing front end performance of a site, reducing the number of HTTP requests is a huge thing. Front end developers want to decide and control how front end resources are being handled, and WordPress plugins don't typically make this easy on them.

pburtchaell

/**
 * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
 * 
 * To overcome this, create media queries that target the width, height, and orientation of iOS devices. 
 * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing 
 * the height of element `.foo` —which is a full width and height cover image.
 *
 * iOS Resolution Quick Reference: http://www.iosres.com/
 */
 

PeterMK85

Stylesheets download behave on browsers


  Downloading all stylesheets
    Notes:
    "If you use separate CSS files (and I'd urge you not too) the browser will download each of them even if it doesn't need them, this is a limitation of the CSSOM. Some browsers e.g. WebKit and Blink based ones prioritise the stylesheets so the ones needed to render the page are downloaded first and the others at some point later."
    
    Responsive Media stylsheet behaviour
    Link: https://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/
    "We've already established that the browser is smart enough to defer the loading of stylesheets which (a) do not match the media query, and (b) do not match the media device type. All other stylesheets are given a PriorityVeryLow to allow other critical assets, like JavaScript, to go ahead in the download queue"

ryboe

OBSOLETE PREFIXES
    -xv-interpret-as      // -xv- and -o- are old Opera prefixes for the Presto
    -xv-phonemes          // engine. Opera switched to the Blink engine with
    -xv-voice-balance     // version 15. The current version is 34.
    -xv-voice-duration
    -xv-voice-pitch
    -xv-voice-pitch-range
    -xv-voice-rate
    -xv-voice-stress
    -xv-voice-volume

scottjehl

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/

---

For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

bloodyowl

;(function(win){
  var doc = win.document
    , i = keys(doc.body.appendChild(doc.createElement("iframe")).contentWindow)
  return keys(win).filter(function(a){return i.indexOf(a) == -1})
})(window)

cou929

function retry(isDone, next) {
    var current_trial = 0, max_retry = 50, interval = 10, is_timeout = false;
    var id = window.setInterval(
        function() {
            if (isDone()) {
                window.clearInterval(id);
                next(is_timeout);
            }
            if (current_trial++ > max_retry) {
                window.clearInterval(id);

patrickkettner

  Modernizr.addTest('atviewport', function() {                                   

    return Modernizr.testStyles('', function(node, rule) {
      var style = document.getElementById('smodernizr');                         
      var sheet = style.sheet || style.styleSheet;  
      var supportsAtViewport                                                   

      for (var i = 0; i < Modernizr._prefixes.length; i++) {                                
        try {                                                                    
          var viewport = sheet.insertRule('@' + prefixes[i] + 'viewport{}', sheet.rules.length - 1);

jslegers

/* Add the desktop-hidden class to any HTML tag that contains mobile specific content */

.desktop-hidden {
    *display:none !important; /* IE6-7 */
}

@media \0 screen {
    .desktop-hidden {
        display:none !important;  /* IE8 only */

geksilla

.navbar
.caret
.label
.table
.img-responsive
.img-rounded
.img-thumbnail
.img-circle
.sr-only
.lead