Tuesday, August 26, 2014

A quick rundown of website performance optimizations from Smashing Magazine

I'm a subscriber to the Smashing Magazine newsletter. Every once in a while when I receive one of their newsletters I'm presented with a nugget of information that is nothing short of pure gold. Their latest newsletter (August 26th, 2014) is one such email.

The following comes from their newsletter and are some optimization tips they present get your site to render quickly:

What's the best performance optimization strategy for a (responsive or non-responsive) website? Actually, it's pretty simple. You make sure that your WebPageSpeed's SpeedIndex is under 1000 and ensure that your main content is within the first 14Kb round-trip — and keep your critical rendering path as short as humanly possible. The latter usually means that you have a very clear understanding and agreement of what is critical for the page to start rendering and what is not so essential, and, consequently, could be deferred.

Google Pagespeed Chrome Extension

The next step would be to identify the JavaScript that can be deferred and load it asynchronously because otherwise it would block the construction of the DOM tree. You defer web fonts, too. This can be done by either storing them in localStorage (or potentially AppCache) or by using Web Font Loader if you don't have the WOFF files. You can also export critical CSS and embed it inline in HTML to fit within the 14Kb budget (for TCP Slow Start). This way you also avoid unnecessary HTTP requests. Also, you can load full CSS asynchronously once the page has started rendering or has fully loaded, e.g. on DomContentReadyor on Load event.

Well, that's pretty much it. And if your server-side configuration is solid, it's going to be very difficult to be very, very slow. Unless, of course, you don't optimize images. A little trick we've recently discovered is that PageSpeed Chrome extension provides a little handy tool to optimize images aggressively. Once you install the extension and run it for a given website, you'll find a tab called "Optimize Images". It doesn't just show a list of unoptimized files but also allows you to open and save perfectly optimized files without using any external tools. The compression is usually at least as good as in popular compression tools.

So that's basically the strategy we followed on Smashing Magazine, resulting inGoogle PageSpeed Score 97–99 — both on desktop and on mobile (although it varies depending on the advertising we display). Building a fast responsive site isn't that difficult as long as you are strict about what is and what isn't important on the page. For example, we defer loading of ads, tracking scripts, syntax highlighting, web fonts and other non-critical resources, all of which have helped us immensely speed up the entire site.

Nevertheless, some work still lies ahead of us. We are planning to move to new servers soon (server response time is just unacceptable with our current provider), and will defer the loading of Gravatars on article pages as well as move to SPDY shortly. An article explaining all of the mini-optimizations we've done over the last few months will be published on SmashingMag in early September.

Bottom line: if somebody tells you that responsive sites are fat, bloated, unusable and take too much time to develop, tell them that they're wrong. It's animplementation problem, not the technique itself. And with a proper strategy, it can be done right.
— Stay responsive!
Vitaly (@smashingmag)
I couldn't have said it any better. If you haven't subscribed to the Smashing Magazine newsletter please do so here, you won't be disappointed.

Wednesday, June 18, 2014

Leaving one front end framework for another


Earlier this year my colleagues and I worked on a digital plan for the marketing department in order narrow down our focus in getting the projects done in a uniform matter. Part of my contribution to the plan was determining what tools could be used in the creation of our micro sites, landing pages, and full websites. Being that a majority of my time is spent doing front end web design, picking a framework that was robust and made it easy to create responsive websites was a number one priority of mine. While there were a bunch of options to choose from, the two major frameworks that (pretty much) lead the pack were Twitter's Bootstrap and Zurb's Foundation. I wasn't too pleased with the uniformity I saw with sites built with Bootstrap so ultimately chose Foundation for our development.

Things were great for a long while and I was able to take our designers mockups and transform them into functioning sites with little problem thanks to Foundations various plugins and easy grid system. The downside which ultimately hurt development was that the lack of support for older versions of Internet Explorer (primarily IE 8 which a lot of our customers use). Although usage of IE 8 is dwindling (http://theie8countdown.com/) we still needed to support it and this resulted in me using hacks and extra markup to get things to function.......barely. Fast forward to a couple of months ago.

I personally decided to ditch Foundation for Bootstrap, both for personal projects and work related sites. The sheer fact that it supports IE 8 was a huge plus for me and overriding their inherit styles out of the box was much easier than in Foundation. I was also pretty happy that it supports both LESS and SASS for writing style sheets (Foundation only supports SASS) and that the ecosystem for themes is HUGE! Overall, I'm pretty happy with Bootstrap and I've realized that the previous uniformity I saw was only skin deep and didn't take advantage of what was really possible. I'm looking forward to seeing how Bootstrap evolves!

Friday, December 13, 2013

The Google Glass Explorer program

When Google Glass was first announced I was extremely fascinated with the technology and wondered what the implications of it were. Like everyone that was excited about the announcement I went to the Glass website and told them what I would do with Glass if I was given the chance to get a pair. This was done with a grain of salt because I knew the world was practically making their case and the program was extremely limited. Well, that as well as the fact that there was a $1500 price tag attached to the early release device which would make anyone cringe.

Now, lets fast forward a year. I was recently offered the chance to receive an invite to the explorer program thanks to some organizers at the Google Developers meet up I attend every once in a while. Once the time came in which they sent me the email practically saying "give me your money" I jumped at the chance and now, I am a Glass Explorer! Being a prototype device I have to admit that it is extremely advanced, from its bone conducting speaker to the handful of versatile voice commands. More than wearing it myself I like showing it to people in hopes of spreading a little awareness to break down the many phobias you tend to read about in recent news. Being a programmer I'm also trying to think of what I could experiment with to see how flexible it is. I haven't walked around with it in public just yet because I don't want to be labeled "that guy" but I predict that will change soon.

Playing darts while wearing glass.
The first photo I took with Glass at the Glass studio in NYC

Monday, November 25, 2013

Cloud scripting with Google Apps Script

Lately, I've been interested in scripting the various Google apps to output various forms of data that our websites at my job can use. The Apps Script playlist by Google on Youtube has been an invaluable resource for me in keeping up to date with whats new as well as a great companion to the online documentation.

Wednesday, November 13, 2013

One year later, new passions, and awesome experiences!

This past year has been a roller coaster of a ride in my professional life. November 16, 2013 will mark the 1 year anniversary that I accepted an offer letter by the Berkshire Hathaway company "Richline Group". Now some of you may say, "Wow Berkshire Hathaway! That name sounds familiar?!?" or "Richline Group, what do they do?", well, let me answer both of those for you. Whenever you hear the words "Berkshire" and "Hathaway" in the same sentence just think of Warren Buffet, that's his baby. As for the Richline Group, that's a little more complex but let me break it down.

First and foremost, Richline is a jewelry company. More specifically, it's a company that specializes in fine gold jewelry which we manufacture and distribute to a lot of the major retailers (both online and brick and mortar). We make other types of jewelry but gold is the bulk of it. Now for the complex part, it's actually a company that is the parent of a bunch of smaller jewelry related companies. These include Leach Garner, Rio Grande, Inverness, Honora, and Richline Brands (which is just a conglomerate of all out proprietary brands under one umbrella). Leach Garner specializes in processed materials for jewelry making (chain, beads, etc), Honora is one of the oldest pearl companies in the U.S., Inverness is an international ear piercing company. If you have your ears pierced it's possible you had it done using their patented ear piercing gun.

With that long winded introduction out of the way you may be asking, how in the world did you go from doing 3d stuff to jewelry? To that I say, I am part of the marketing team as the web developer and I absolutely LOVE IT! Not long ago I felt drastically different about web development (it was a hobby that became an "occasional" job) but, given the major advancements in what can be done in the browser my excitement for the craft has been renewed and I've been trying to keep up with the pace of awesomeness that keeps being birthed online.

Fortunately, this past year has been spent "modernizing" the various company sites, which means embracing a lot of the cool trends going on in web development and design. We have some really talented designers in the Florida office which I collaborate with to create engaging experiences and although we communicate through email and the occasional Google hangout it's mostly been a smooth ride. Here's the short list of projects I've worked on:


We're in the process of revamping the last three on that list for next year and I'm working on the "major" site redesign of one of our sister companies (to be launched Jan 1st 2014). So, that's what I've been up to these last few months. I haven't given up on 3D, I want to shift my focus to programmatic 3d on the web (Three.js and webGL), since programming is my original background. This blog will probably take a more web development focus in the future as I experiment and continue to learn.

For those that haven't seen my work, my 3D stuff is at thatguy.tv and my web development portfolio is at jonkkelly.tumblr.com. I'm planning a complete redesign of my personal site that will combine both areas of my work but that's going to take some time. I'll be sure to announce it when it happens.

Thursday, July 19, 2012

Migrating blog from Tumblr

I decided to move my blog to Blogger from Tumblr. While I was really happy with Tumblr I found it really difficult to pick a layout that wasn't too "busy". I was really impressed with the way Blogger allowed viewers to choose which layout they wanted and also how I could manage all my posts. There are still a few issues with some of the post saying you need Flash 10 to view the videos. This is an issue with Tumblr and I'm waiting for them give me an solution to the problem.

Monday, July 2, 2012

Passion Pictures BBC Olympics Titles

I was fortunate to do some pre-vis for this nice little piece created at Passion Pictures, directed by the great Pete Candeland.

Passion Pictures BBC Olympics Titles