Fixing a Slow Site, in Real Time

  • Posted on: 23 January 2015
  • By: davis

Due to other responsibilities popping up, I haven't been able to devote much time to optimizing americanlibertypac.com. As such, the performance has taken a hit due to heavy use, frequent experimentation, and the usual reasons for performance degradation. 

Anyways, I logged the experience. Follow along as we fix a website.

Important benchmarks to note before heading down the rabbit hole. This table is my initial measurement of the site.

Pingdom Load time: 3.07s

Requests: 177

Perf. grade: 70/100

Page Size: 3.0 MB
GTMetrix PageSpeed: 87%

YSlow: 74%

Page load time: 6.31s

Total page size: 2.06MB

Total number of requests: 127
Google PageSpeed

Mobile: 50
Desktop: 70

Google Mobile Friendly Not mobile friendly

START OF LOG

Hypothesis: Removing sidebar widgets (or perhaps the entire sidebar) will yield performance increases for mobile users.
Displet Pop-up Also appears on mobile, slowing down users. Not supposed to do that.
---------------------------------------------------------
ACTUAL WORK
---------------------------------------------------------
Added some scripting to Dipslet. Did I make it worse? probably ---- definitely
Upgraded to Metro Pro Theme, which may solve my mobile issues right away.
Yup, responsive is good.

Removed Facebook "Like" widget. Also took 

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=************&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

out of footer

This is in the header

<meta property="twitter:account_id" content="*********" />

do we really need it? Maybe.

Save this for later?

.title-area {
    float: left;
    padding: 0;
    width: 561px;
}

.site-title {
    background-image: url("http://americanlibertypac.com/wp-content/uploads/2015/01/american-liberty-pac-561x87.png");
}

Having trouble with the header. Small logo very unimpressive. Hardcoded cropping of image, ugh
Fixed footer box at bottom by increasing div height

Okay, in functions.php, I have this line

//* Add support for custom header
add_theme_support( 'custom-header', array(
    'width'           => 270,
    'height'          => 80,
    'header-selector' => '.site-title a',
    'header-text'     => false
) );

That's likely the hardcode. I'll need to update the "title-area" element to be 769x117px wide, but I think this could work
CHANGES**************

//* Add support for custom header
add_theme_support( 'custom-header', array(
    'width'           => 700,
    'height'          => 108,
    'header-selector' => '.site-title a',
    'header-text'     => false
) );

Added the below via a "Edit CSS" tool. This lets me override theme CSS without touching the original file, which is pretty handy when experimenting.

.title-area {
    width: 700px;
    height: 108px;
}

.header-image .site-title a {
    background-color: none;
    max-width: 700px;
    min-height: 108px;
    padding: 0;
}

*************************

Probably need to hide #displetpop for mobile
Okay, I am just disabling Displet for now.
What?!?! That just made the Slack plugin reappear in the dashboard. Lollllllll  <<<< I still have no idea why.
Well, I went to test on pingdom, and ALPAC had a 20 second loading delay. Talking to Rackspace.

In the meantime, I checked what was taking so long to load - it's the Genesis Simple Edit CSS tool. Might just integrate the CSS

As usual, images are the biggest problem with load times.
There's still a stray Facebook "Like" script floating around

Experimenting with removing duplicate instances of google scripts in the sidebar

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Removed 6 or 7 widgets along the side (indluding images!!!) and duplicate forms, searches, etc.
Getting better! Realized "Minify JS" in W3TC was disabled, so re-checked that and ran a test - slower?? why

ShareThis Plugin - Disabled two "current" buttons - meaning FB was connecting to check on the number of likes per post,- G+, Pintrest, and dynamic FB gone

A CDN would help enormously

Went back and removed the "Edit CSS" changes and just put them in the main CSS file
Had to reimplement as it broke. I can do this when I have more time.

/* Logo, hide text */

.header-image .site-title,
.header-image .title-area {
    max-width: 700px;
    min-height: 108px;
    padding: 0;
}
.header-image .site-title a {
    background-color: none;
    max-width: 700px;
    min-height: 108px;
    padding: 0;
}

Made those changes, gonna remove contents of Edit CSS - that worked!!

Pingdom: Before Load time: 3.07s
Requests: 177
Perf. grade: 70/100
Page Size: 3.0 MB
Pingdom: Current Load time: 1.55s
Requests: 92
Perf. grade: 81/100
Page Size: 2.3 MB

HUGE IMPROVEMENT
Let's keep moving, we'll do the other benchmarks later, here are my observations below of what needs fixed or improved
Well this is pretty fucked up. Simple Edits introduces a wait time to the load - 189ms. And that's with no custom content!
Running Smush will help, but let's leave that for later.

Here's my WebTest at the time: http://www.webpagetest.org/result/150123_X5_13YY/

Using YSlow plugin, I noticed that I could make big gains because approximately 60% of my load (in bytes) was images. I opened up the main culprits in Photoshop, compressed them, and redid the test.
Remember that I started with ~3mb on the page, it's down to 1.5mb, and I'm about to run another benchmark to see where this got me
3mb -> 1.5mb -> 1.3mb
Now it really gets interesting.

I can't get rid of Disqus. I could get rid of ShareThis in an ideal world, but not here.
I can't get rid of Google Ads.
I am going to not minify JS real quick, one sec. Nah nevermind
This custom CSS thing is killlllling me. 749ms wait for a 557b file
I cheated a bit and straight up removed a duplicate local ad (for polls). That will save me space and time.
Going to maybe (!) modify the Simple Edits plugin to remove the custom CSS business.

AHAHAHA After spending a couple minutes peeking in Simple Edits' source, it's definitely not that...... but it is MOTHERFUCKING JETPACK'S "Custom CSS"

I've been getting mad at the wrong developer, ahahaaaa.
Disabled that shit

I think I can disable WP.me shortlinks from Jetpack as well. As well as JSON API

Down to 1.2mb pagesize


That brings us to the end of this log (for now)

End of the day stats:

  Before After
Pingdom Load time: 3.07s

Requests: 177

Perf. grade: 70/100

Page Size: 3.0 MB
Load time 1.44s

Requests 92

Perf. grade: 82/100

Page Size: 1.2 MB
GTMetrix PageSpeed: 87%

YSlow: 74%

Page load time: 6.31s

Total page size: 2.06MB

Total number of requests: 127
Page Speed: 87%

YSlow: 77%
Page load time: 5.54s
Total page size: 1.14MB
Total number of requests: 73
Google Pagespeed Mobile: 50

Desktop: 70
Mobile: 55

Desktop: 71
Google Mobile Friendly Not mobile friendly Awesome! This page is mobile friendly!

Big improvements in the numbers I'm worried about (the actual numbers, not vague "grades").

Next up is working on setting expires headers, difficult given the on-the-fly minification of JS and CSS

Lots of requests from external scripts. Not much I can do at a certain point other than accept those inefficiencies.