Skip to content

Instantly share code, notes, and snippets.

@patrick-wc

patrick-wc/frontendplugins.md

Forked from chriscoyier/frontendplugins.md
Last active August 29, 2015 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save patrick-wc/2019d1025f093072784c to your computer and use it in GitHub Desktop.
Save patrick-wc/2019d1025f093072784c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
frontendplugins.md

How WordPress Plugins Should Handle Front End Resources

It's extremely common for people to be unhappy with how a WordPress plugin adds front end resources to their site. If a plugin needs CSS, it'll slap in a <link> to that stylesheet. Or a <script>. Or link up images.

Plugins do this because it works. It's damn important for a WordPress plugin to work, even in adverse conditions.

In optimizing front end performance of a site, reducing the number of HTTP requests is a huge thing. It's my site, I want to decide and control how front end resources are being handled.

So perhaps we can suggest how WordPress plugins should handle external resources:

  • If it needs CSS, default to including it in wp_head, but have setting to turn that off and display the CSS that should be included elsewhere. We envisage actually loading up the CSS file into an area in a similar way that WordPress loads up the htaccess rules it wants to write if it has no write access to the file.

  • If it needs JS, default to including in in wp_footer, but have setting to turn it off and show the code to be included into project elsewhere, noting the dependencies carefully.

  • "If using images, dataURI them or using inline SVG when possible. Even better, don't." (I still have to support IE8 at my company, so I'm not 100% on this although I do like the idea of SVG. Also, I'm pretty sure WordPress is all about supporting as many platforms out of the box as it can and unfortunately IE8 is still very much used). I would say whatever format you use make sure they are OPTIMISED. There are web based tools like Smush.it™ http://www.smushit.com/ysmush.it/, Grunt addons like grunt-contrib-imagemin https://github.com/gruntjs/grunt-contrib-imagemin, Mac tools like ImageOptim https://imageoptim.com/ and Windows tools like http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer that can do this for you. All of these solutions are free.

  • "Just use something to handle this for you" isn't good enough. A lot of smaller hosting companies do not allow plugins like W3 total cache and it doesn't always get the ordering of concatenating right, especially javascript files.

img

[maybe a small section explaining why they should bother? Not everyone knows how important it is, especially when trying to load the site on 3G]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment