Performance Tutorials

  • By
    Scoping CSS Animations to Media Queries

    When coding my blog's redesigns, I think and design the site in device width stages, and in the following order: Desktop:  all general styles, none wrapped in a media query Tablet:  media query, roughly popular tablet widths Phone:  media query, any width below tablet width Print:  media query, mostly a bunch display: none Since I focus on...

  • By
    5 Ways to Make Your Site Smaller and Faster

    Confession:  I'd say once a week I genuinely wish I was a kid who spent his work day cutting grass and doing landscaping.  Why?  Because at the end of the day, they are able to say "the grass is cut, the job is complete."  As Web Developers, we...

  • By
    Performance Cops and Janitors

    Performance improvements often begin as one person's voice within a company culture. You start to notice how other sites are making optimizations and improving their user experience through tweaks to perceived performance or total page load time. Then you start measuring how your competitors' sites...

  • By
    500

    Over the past four or so months, I've been having a hell of a time with seeing 500 errors on my site.  And while I'm on my site a few hours a day, the amount of 500s my visitors must have seem is probably huge.  And that's...

  • By
    Feature Detection and Function Efficiency within JavaScript

    Efficiency in code execution is incredibly important, especially when the given function is used repeatedly.  You often see repeated function calls within JavaScript frameworks.  When you work on said frameworks, you need to ensure you've hit ever micro-optimization possible.  One micro-optimization you can make is running...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    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...

  • By
    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...

  • By
    Better Compression with UglifyJS

    UglifyJS is widely known as the most performant and effective JavaScript minifier available.  UglifyJS' default minification with --compress is nice but it doesn't do the full job.  There are a number of additional directives for the compress option, including: sequences -- join consecutive simple statements using...

  • By
    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...