Performance Tutorials
![The Simple Intro to SVG Animation]()
The Simple Intro to SVG Animation
This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery. An SVG element is a special type of DOM element...
![Enable GZIP Compression on nginx Servers]()
Enable GZIP Compression on nginx Servers
Speed kills, and there's nothing like a speedy website. When you come to this blog, I want you to have a great experience, which is why I've worked tirelessly to compress every asset and avoid unnecessary synchronous interactions. In reviewing my site with Google Pagespeed...
![Better Compression with UglifyJS]()
Better Compression with UglifyJS
UglifyJS is widely known as the most performant and effective JavaScript minifier available. UglifyJS' default minification with
--compressis nice but it doesn't do the full job. There are a number of additional directives for thecompressoption, including:sequences-- join consecutive simple statements using...![CSS vs. JS Animation: Which is Faster?]()
CSS vs. JS Animation: Which is Faster?
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...
![JavaScript Debounce Function]()
JavaScript Debounce Function
One of the biggest mistakes I see when looking to optimize existing code is the absence of the debounce function. If your web app uses JavaScript to accomplish taxing tasks, a debounce function is essential to ensuring a given task doesn't fire so often that it...
-
![Improving Web App Performance With Memcached]()
Improving Web App Performance With Memcached
When we think of storage in a web application our first thought is usually a traditional database like MySQL. This is great for long term storage and data analysis, but there's a better option for many short-term needs: memcached. It's a great choice for...
![JavaScript DocumentFragment]()
JavaScript DocumentFragment
One of the lessor known but incredibly useful gems within JavaScript is the DocumentFragment. DocumentFragments allow developers to place child elements onto an arbitrary node-like parent, allowing for node-like interactions without a true root node. Doing so allows developers to produce structure without doing so within...
![Function Debouncing with Underscore.js]()
Function Debouncing with Underscore.js
The ability to listen and react to user interactions with JavaScript is fundamental and incredibly useful. Some interactions happen frequently and some rarely. Some listener functions are light of action, others can be quite taxing on the browser. Take window's resize event for...
![Selector Engines: Right to Left]()
Selector Engines: Right to Left
One lessor known fact about CSS selectors, querySelectorAll, and JavaScript-based selector engines is that they read your selectors from right to left. This news hit me as illogical at first, as you'd think that the first element in a selector string like "#myElement a.something .else" would...
![DNS Prefetching]()
DNS Prefetching
Despite anchor tags having
HREFattributes which lead to other host names, browsers do not execute DNS lookups on those domains. Content prefetching can be invaluable in speeding up your websites, but did you know that you can also implement DNS prefetching? It's as easy...
