Recently I came across Google’s PageSpeed checker extension for Chrome’s developer tools. Page speed in general has always been a common sense thing for me. I think that is one skill that developers who grew up in the dial-up era vs the broadband era understand a little better than most. With that said I’ve apparently gotten very lazy! Nearly all my website properties were testing awfully low and slow.
The increase of widely available high-speed internet is breeding a NEW type of user. This new generation of user is far less patient. Your websites MUST be quick and fast or they move on. Google recognizes this. While there is some debate about your page speed affecting your SERP (Serach Engine Results Page) rank it just makes efficient sense to do everything you can for your clients and yourself when it comes to speed. Why would Google make all of these speed tools and give you graphs about speed inside their Webmaster Tools if it wasn’t a factor?
This video from Google explains gzip in some simple terms.
I tried to find any reason to NOT use gzip in this day and age.
There is NONE!
Apache users can simply put these lines in an .htaccess file at the root of there website directory. This covers most of your bases.
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
PHP has a nice gzip object that will detect the browsers available compression type and serve up the page accordingly. I just add this line to the top of any PHP files in my web projects.
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>
Optionally you should be able to add: AddOutputFilterByType DEFLATE application/x-httpd-php text/html to the .htaccess code above but I have not tested it.
I’m not one but it looks pretty straight forward. Maybe this Stackoverflow thread will help you.
During my testing a spent a great deal of time wondering WHY the PageSpeed tool was constantly telling me my JS and CSS weren’t being compressed. Nearly every other gzip testing utility was telling me they were. In the end I couldn’t figure it out and eventually they went away. If you are worried just try another tool like http://gzipwtf.com/
I obviously violate a few of these rules but that doesn’t mean you have to!
If you are using Twitter Bootstrap you will use LESS if you want to pump out some quick color templates for your designs. In the world of CSS pre-processing there is LESS and SASS at the top. I’ve not dove into any of the SASS stuff but LESS was in front of me so that is what we will focus on.
LESS is for all intents and purposes a CSS programming language. There are variables, mix-ins, functions and all sorts of basic expression operators to speed up your CSS creation process. However, when you create these .less files they are not readable by any of the layout engines (WebKit, Trident, Gecko, Presto). The .less files must be fed into a compiler to generate a CSS file to use on the web. You can use less.js (or many of the other emerging “on the fly” generators) but your website will suffer in speed for something you only had to do once locally. Compiling the .less into CSS locally is STILL the way to go.
Long Answer: I tried out a few so lets just go down the list.
Crunch! Is a LESS editor and compiler in one. This is probably the number one option for MOST people getting into LESS. It provides a nice interface and is built with Adobe Air. The only reason I’m not using it is that the current v1.5 doesn’t compile Bootstrap’s 2.3.1 LESS files. It throws an error every time. V1.6 fixes this problem and is being worked on in GitHub but I’m still kind of a boob about using GitHub so maybe you are able to download a new compiled version to install but it isn’t officially released as of writing this post. Once v1.6 comes out this will be what I will use.
Koala is just a compiler with no built in editor. The cool thing about Koala is that it isn’t limited to just LESS files. It has the capability to compile SASS and CoffeeScript as well. For some reason Koala was VERY slow on my system. It took forever to start but seemed okay once it was started.
SimpLESS’s redeeming quality is the ability to use Prefixr on the compiled CSS files. Prefixr is cool because it automatically generates cross browser CSS. I use the Prefix plugin for Notepad++ to do accomplish this but there are JS files available to do it on the fly. SimpLESS will read your LESS files -> compile them -> Run Prefixr -> Minify the outputted CSS files.
My favorite! WinLESS has won me over until Crunch! is updated. WinLESS allows you to select the files you want to compile and it does so ON THE FLY when the file is changed. It runs in the background and is VERY fast. So my process has become: Open WinLESS -> Load my projects’ LESS file directory -> Open my LESS files with Notepad++ -> Edit as needed. All I have to do is save the .less file and reload the page I’m working on in my browser. The CSS has been already compiled by the time I reload. WinLESS also Minifys the output. In fact MOST of the LESS compilers will Minify the CSS file. All Minify means is that all the white space and new lines in your CSS file are removed. The resulting minified file looks like one giant long string instead of a formatted document a human can read easily.
The time finally came conquer the responsive design monster. I decided to redo my affiliate site Costume-Depot.com to make it friendly across ALL devices. I choose the Twitter Bootstrap CSS “framework” to accomplish this task. All the experience and philosophy stuff is after the pictures.
No. In my opinion, no. But it all depends on who you ask. Some would argue that it doesn’t matter anymore. The cellular networks are fast enough and the data-plans are cheap enough that it shouldn’t matter if the user loads a little extra. I don’t think this is the case just yet but it is all moving fast enough that a responsive design is a very REAL option for presenting your content. Responsive design is a nice catchall to ensure the presentation of your data is controlled as much as possible without having to create multiple versions of your website (ie mobile.yourdomain.com). However I do not think there is enough thought going into the fine details of controlling every element to make it optimized for a mobile browser. Pictures are still loading big and displaying small. The full versions of your scripts and css files are usually all still being loaded. The div style may now be set to “display: none” but the html is still loading. Your site ends up looking tiny and nice but inside it can still be a giant fat beast.
All that being said, “I love it!” I love that it makes you think about every part of the site in more detail and I love that no matter what device I view the site on I know exactly how it will operate and look.