How I got the Shittalk Generator to 80kb pagesize

  • Posted on: 30 March 2016
  • By: davis

Lesson #1: Probably shouldn't have named it Shittalk Generator. It's hard to tell your family what it is. "Well... it's a script to shittalk people". Maybe I would have named it the Trash Talk Generator, in restrospect

You can track the actual commits I made on Github, you'll see the progression in pagesize.

Here are some notes:

Minify HTML (http://www.willpeavy.com/minifier/)

Minify CSS (YUICompressor)

Minify JS (Google Closure Compiler)

Enable gzip compression

Replace jQuery (29kB) with Zepto (9.6kB)

Remove Bootstrap.js dependancy (usually, you don't need it)

Heavy reliance on async ajax calls (only load visible page content, load everything else on scroll using a function like below)

$(window).ready(function () {
          $(this).one('scroll', function () { //only executes once
              // call this data when a user scrolls down for the first time
              // only do this with below-the-fold content
          });
      });

Make efficient database queries, bundle them together when you can.

Use loadCSS to asynchronously load non-essential CSS after the page has been loaded: https://github.com/filamentgroup/loadCSS

Try out different CDN's - some CDN's have bootstrap.min.css around 30kb, and other services have it compressed to 19kB (CDNJS works best for me)

Use the following sites to find what's impacting load times/page size:

http://tools.pingdom.com/fpt/#!/dVQE7B/http://daviseford.com...

https://gtmetrix.com/

https://developers.google.com/speed/pagespeed/insights/