Authoring Critical Above-the-Fold CSS

CSS, JavaScript | Posted by Keefr July 15th, 2014

cssI’m a huge believer in Google Page Speed Insights and getting the numbers as high as possible on every single site I’m involved in. But there’s typically a pair of directives I’ve never been able to affect consistently:

  • Prioritize visible content
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content

The render-blocking JavaScript can at least be minimized in its render blocking by putting it as low in the page as possible (typically right before the closing body tag), but CSS is always high in the document.

The article below highlights a possible solution utilizing a Sass @mixin. Though couldn’t the same distinction be made by just having a set of CSS files with one as the priority and the other as below-the-fold, with the additional http request obviously.

Authoring Critical Above-the-Fold CSS

Async Attribute and Scripts At The Bottom

JavaScript, Web Development | Posted by Keefr July 11th, 2014

javascriptTypically when including JavaScript, unless there’s a really really good reason, I always put my JS at the bottom of the file, but have rarely utilized the async attribute on those included JS files. Looks like there’s a little benefit to utilizing the attribute.

Async Attribute and Scripts At The Bottom

Solving the Hamburger Menu Icon Problem

CSS, Mobile, Responsive Design, Web Design, Web Development | Posted by Keefr June 25th, 2014

cssNice article on the problems of design of the “hamburger” icon and the usability issues with hamburger-driven icon menus — adding another click to save real-estate on the small screens of mobile (or desktops in some cases).

How to Solve the Hamburger Icon Problem

Five Steps to Common Sense SEO

Search Engine Optimization (SEO) | Posted by Keefr June 24th, 2014

1389143184_settings01Just wanted to share my first published blog article from my current employer, Three Ships.

It’s an update to an article I’ve written for two previous employers about how search engine optimization is a series of smart and common sense actions.

I’ve worked a bunch lately in SEO and WordPress — hence all the articles on both subjects posted here recently.

Five Steps to Common Sense SEO

How to Create Additional Image Sizes in WordPress

Content Management Systems, Web Development, WordPress, WordPress | Posted by Keefr June 18th, 2014

How to Create Additional Image Sizes in WordPress Man, I wish I’d read this article years ago (or least when it was first published two years ago).

I’ve had plenty of CMS instances where it would have been great to have images uploaded automatically resized to certain dimensions for specific instances. This is one to refer to for your next CMS-focused WordPress install to make sure you’re having WordPress and PHP taken the burden off clients for sizing images properly.

How to Create Additional Image Sizes in WordPress