Writing Better Plugins for a Better Web

By Divya Manian

Who am I?

Open Web Vigilante

Web Opener at

Core team


HTML5Readiness.com, W3Fools.com





Some Wordpress Sites I did

Wordpress Plugins Now

How they are now

Start from PHP than work backwards from markup, styles, and script.

Use several assets and files.

Not optimized for highly efficient website performance.

Plugins Should

Be as less intrusive as possible

Maintainable, forward compliant.

Efficient, least time consuming.

Why does website performance matter?

Breaking News! Users use several devices

Even more Breaking News! They don't always have broadband connections!

People use a lot of plugins on their sites. Each adding a layer of traffic burden.

Lets fix this!

Mantra: Use as less as you can get away with.


What problem does this plugin solve?
What is the most minimal solution?
What are the constraints of the minimal solution?
What kind of browsers are you willing to support?
How much user-assistance are you willing to provide?
How much style should you provide and how much should the theme?
Figure out how much control you want your users to have.
Don't neglect the power users.

Start from the end

Write your markup, style and script (if necessary).


Reuse your styles.
Use a reasonably unique namespace.
Keep it short. Make sure you cover all browsers.
Do not inline CSS.


Sass, css3please.com, caniuse.com


Do not add divs just because it is easy to do that in PHP.
Use templates if you can.
If you need a wrapper for style, rethink the styling.
Use browser defaults where available, Wordpress defaults where available.


The Web Standards Curriculum, Dive into HTML5


Leverage existing scripts.
Always minify your script.
  • Avoid using JavaScript plugins (if you can).
  • Plain JavaScript could be faster than depending on other jQuery plugins.
Make sure your script does not conflict with any other.


JsHint, Uglifui.


Videos: The JavaScript Programming Language, Learning JavaScript, jQuery Performance Tricks


Avoid using images for styles, if it is possible.

Use a sprite if absolutely necessary.

Avoid using custom fonts. The theme design should override your preferences.


Use a speed test: Yslow, pagespeed
Make sure your files are minimized
But do have expanded CSS/JS available for front end developers to tweak and use if necessary.

So, Now


Use as less as you can get away with.

  • Find your constraints
  • Use as less styles as possible, let the theme do most of the styling.
  • Choose your markup carefully.
  • Minimize your scripts, and avoid external dependencies if you can.


Questions? Ask @divya