I converted my blogs from Wordpress to static pages generated by Jekyll. There are several reasons why I made the switch:
- No software to update on a regular basis
- No database to setup or configure
- All posts and files are in version control
- Editing posts in Vim, I love vim!
and last but certainly not least
- Speed! Super Zippy Website Performance!
All of the pages on my site are now static, there is practically no server-side, no database calls, no loading of numerous includes or plug-ins, authentication or permissions. Just plain old HTML. And it is wicked fast!
My Google PageSpeed score is now a 96 out of 100. Average page load is <400ms, less than half a second!
I would not recommend running a Jekyll site for everyone, especially if you don’t like the command-line and coding, Wordpress is far simpler, but if you are interested, here’s how I converted my blog from Wordpress to Jekyll.
This post is about how to get the most out of your web site and make it as fast as possible.
I worked at ETRADE in the early days, for a time I was in charge of Site Performance, we were in an epic battle with Ameritrade to claim the title of fastest on-line broker. Each of us would make crazier claims on ability to trade quicker, I think it got down to two-second guarentees! A big chunk of that time has to do with trades actually going through the clearing house, which has nothing to do with the web site. However it was my job to make sure the web site added the least possible time to the transaction.
So besides converting your site to jekyll, here are some tips I’ve picked up along the way to squeeze the most performance out of your website.
Use Text and Fonts for design elements instead of images - Avoid throwing images around just for flair, such as icons, bullets, or headers. Use text and html elements when possible, it may require to change the design slightly, but users will prefer a faster site than a stylish bullet. On my site I use the » as my bullet, small simple and a little style.
Use Sprite Maps if you must have images - A sprite map is a collection of small images, such as icons or tool bars, so if you must use images as decorators on your site, gather them up in a sprite map. This allows the browser to only make one request and retrieve numerous images. Typically the largest time suck is the number of requests a browser has to make to go back to the server and not the file size, this is especially true for mobile.
Use font file instead of Sprite Map - Here’s a really intersesting trick I came across recently, it was to embed your icons, widgets and styles as vector images in a font file. This font file becomes your sprite map, and allows you to easily scale and size icons on the page, since you have all your CSS and text formatting.
If you use JQuery, or other common libraries, load them from Google. The more people who use Google as the host, the more likely it will already be in the user’s cache. I’d love to see the browsers have a local embed built-in and load JQuery from there. Google Library Hosting
Use CSS, early and often - There is so much CSS can do these days, learn it. Using CSS can give you very inexpensive ways to develop style without affecting performance.
A little overboard - If you want to go crazy, reduce the name of directories, files, etc. For my assets, I simply use the directory letter “a” instead of the longer “images”. This saves 5-bytes in every load, not a huge difference but its simple enough to do, so why not.
An easier way is to keep the file name the same and lie to the browser that it changed, you can do so using Apache rewrites. Keep the filename the same, but when loading the file in your HTML include the verison number, style-001.css. You then setup a rewrite rule in Apache to ignore that number and load the file, the browser thinks the file is new and loads it, but you don’t have to create new files on every change.
Each time you do a deployment, change the number. At work we have an automated process that inserts our subversion number into this spot, so each release we get a fresh cache.
Apache Rewrite Rule for Cache Busting RewriteRule /a/style-\d+.css /a/style.css
Default Character Set - Google’s Page Speed and Microsoft both say weird things about specifying the charcter set. Due to browser wonkiness, its best not to set within a meta tag, but to do so from the web server. Read more at Google Here is the Apache config for setting the default characyer set to UTF-8 AddDefaultCharset UTF-8
One Wordpress tip since there are so many people who do use Wordpress and it is a great platform particularly for larger companies, bigger sites with multiple authors and the need for plug-ins. You can get some great performance out of Wordpress by using batcache.
For BabyCenter’s Blog, we saw an 40x increase in ability to handle load when using batcache. This allowed us to scale our wordpress blog to handle Yahoo referral traffic without adding any additional servers, though we already had a couple servers to start. Batcache Plugin
Google Page Speed or YSlow
Use Google Page Speed or YSlow to test your site, they offer up a good set of ideas and suggestions on how to improve. Google’s Page Speed is available as an online test at: https://developers.google.com/speed/pagespeed/insights
Here are the errors from Google’s own files:
The following publicly cacheable, compressible resources should have a “Vary: Accept-Encoding” header: http://pagead2.googlesyndication.com/.../expansion_embed.js http://pagead2.googlesyndication.com/.../show_ads_impl.js http://pagead2.googlesyndication.com/pagead/show_ads.js
The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources: http://pagead2.googlesyndication.com/pagead/show_ads.js (60 minutes) http://www.google-analytics.com/ga.js (2 hours)
The following resources are missing a cache validator. Resources that do not specify a cache validator cannot be refreshed efficiently. Specify a Last-Modified or ETag header to enable cache validation for the following resources: http://fonts.googleapis.com/css?family=Kelly+Slab
- Web Page Analyzer - Testing Tool
- Google Page Speed Best Practices - Documentation
- Website Optimization: Speed, Search Engine & Conversion Rates - Book [Amazon]
- Even Faster Web Sites - Book [Amazon]