Hexalys hexalys

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.

update

I've created a little repository that simply exposes the final utility as npm module.

It's called html-escaper

there is basically one rule only: do not ever replace one char after another if you are transforming a string into another.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Hacky way to detect if app was launched in standalone mode in Chromium (with manifest.json) without problems with `AppCache` (and possibly `ServiceWorker`).

As suggested on one of the Google Developers sites, one may use search params in start_url of the manifest.json to notify page about that it was launched in standalone mode: start_url: '/?standalone'.

This works well unless your page uses AppCache (or ServiceWorker). In case of AppCache, every url with different search params is treated as separate entry in cache. So if you have listed / path in AppCache and naively used start_url: '/?standalone' in your manifest.json, then your Web App won't work offline from the Home Screen.
_With ServiceWorker, however, there is few ways to fix this directly in its code, like ignoreSearch option for match() method (currently not supported in Chromium) or just traversing cache entries manually and comparing new URL(event.request.url).pathname with stored request `new URL(...).path

	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"

	/**
	* 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/
	*/

	# Create a new jail via Plesk
	# generated in /etc/fail2ban/jail.local
	[wp-auth]
	enabled = true
	filter = wp-auth
	action = iptables-multiport[name=NoAuthFailures, port="http,https"]
	logpath = /var/www/vhosts/system//logs/access*log
	/var/log/httpd/*access_log
	maxretry = 15

	// This list of common devices was put together from various online sources by me, Jan Keromnes.
	//
	// The device features are:
	// - name: The device brand and model(s).
	// - width: The viewport width.
	// - height: The viewport height.
	// - pixelRatio: The screen's pixel ratio (e.g. HiDPI > 1).
	// - userAgent: The device's UserAgent string on the web.
	// - touch: Whether the device's screen is touch-enabled.
	//

	interface AesGcmEncryptResult {
	readonly attribute ArrayBuffer ciphertext;
	readonly attribute ArrayBuffer tag;

	};

	interface BookmarkCollection {
	readonly attribute long length;

	any item(unsigned long index);