Optimising page speed: a case study

Custom font

Improvements:

Page size

−96.1 kB

FontAwesome version 4.1.0 contains a total of 439 icons giving fontawesome-webfont.woff a file size of 83.8 kB. A custom font (font-custom.woff) containing only the 12 icons that were required reduced the size to to 7.4 kB.

The associated style sheet font-awesome.min.css with a file size of 20.8 kB was replaced with font-custom.css having a file size of 1.1 kB.

Font Custom was used to create the custom font and Font Custom vectors were obtained from encharm/Font-Awesome-SVG-PNG.

Font Custom configuration is stored in fontcustom.yml, or can be integrated into a Grunt build with sapegin/grunt-webfont. See the next section for the Gruntfile.js which includes a grunt-webfont task.

Custom Bootstrap

Improvements:

Page size

−15.3 kB

A custom build of Bootstrap was built with Compass. By excluding ten unused components from the build bootstrap.min.css was reduced from 109.5 kB to 94.2 kB.

The Bootstrap build process was included as a Grunt task using gruntjs/grunt-contrib-compass.

Below is the Gruntfile.js for this theme which includes both a grunt-webfont task and a grunt-contrib-compass task.

module.exports = function(grunt) {
    "use strict";

    grunt.initConfig({
        compass: {
            dist: {
                options: {
                    config: 'config.rb'
                }
            }
        },
        webfont: {
            icons: {
                src: 'fontcustom/vectors/*.svg',
                dest: 'static/font',
                destCss: 'static/css',
                options: {
                    htmlDemo: false,
                    hashes: false,
                    font: 'font-custom',
                    types: 'eot,woff,svg,ttf',
                    syntax: 'bem',
                    templateOptions: {
                        baseClass: 'fa',
                        classPrefix: 'fa-'
                    }
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-webfont');

    grunt.registerTask("default", ["compass", "webfont"]);
};

Reduce AJAX requests

Improvements:

Requests (SSL)

−1

The original theme included a script which obtained a list of GitHub repositories directly from the GitHub API. To reduce the overhead of a SSL request the list of GitHub repositories was generated during the build process with kura/pelican-githubprojects.

Custom jQuery

Improvements:

Page size

−18.5 kB

A custom build of jQuery was created according to the instructions in the jQuery README file.

By excluding the modules ajax, deprecated, offset, and effects, jquery.min.js was reduced from 84.2 kB to 65.7 kB.

Below is the Grunt command used to build jquery-custom.min.js.

jquery((2.1.3))$ grunt custom:-ajax,-deprecated,-offset,-effects

Merge and minify assets

Improvements:

Requests

−5

Both JavaScript and CSS were combined using webassets via the Pelican assets plug-in.

Five CSS files were merged into a single file and compressed with the YUI Compressor.

{% assets filters="yui_css", output="css/styles.%(version)s.min.css", "css/bootstrap-custom.css", "css/font-custom.css", "css/github-repos.css", "css/style.css", "pygments" %}
    <link href="{{ SITEURL }}/{{ ASSET_URL }}" rel="stylesheet" />
{% endassets %}

Three JavaScript files were merged and compressed, again with the YUI Compressor.

{% assets filters="yui_js", output="js/scripts.%(version)s.min.js", "js/jquery/jquery-custom.min.js", "js/bootstrap/transition.js", "js/bootstrap/collapse.js" %}
    <script src="{{ SITEURL }}/{{ ASSET_URL }}"></script>
{% endassets %}

While the homepage of this site did not include images, page size can often be significantly reduced by optimising images. For example, the two Pingdom screen shots were reduced by pngcrush to approximately 27 % of the original size.

Eliminate unnecessary resources and DNS look-ups

Improvements:

Requests

−4

Redirects

−1

Page size

−8.5 kB

DNS look-ups

−1

Some unnecessary resources were removed from the page including:

• The Creative Commons licence badge was removed saving two requests (one of which was a 301 redirect) and 483 B.
• The JavaScript files github.js (1.5 kB) and jXHR.js (2.5 kB) were removed as they were replaced by pelican-githubprojects.
• respond.js (4.0 kB) was removed as it was decided not to support older browsers.