With my recent move from GoDaddy to Dreamhost, I decided to take the time to make a few other modifications, both under the hood and to the UI. Below are a few notes on the process, for anyone interested…
Responsive
A big bit was making sure the site was completely responsive. It was pretty good before, the right column would drop down below the content, etc., but I wanted to really test it thoroughly. There is not enough going on here to necessitate testing on real devices, all I really needed to look at was breakpoints, to make sure the content flowed and reflowed nicely.
Some time ago I created the Responsive Test Environment site for just such a reason, and decided to give it a go:
https://aarontgrogg.com/rte/#https://aarontgrogg.com/|240,320,480,640,800,1024,1400,2500
I’m pretty happy with the results I’ve achieved! Be sure to scroll to the right to see all the breakpoints. I started with 240 because that’s a pretty common starting point, and made sure I liked everything there. Some times that meant removing some CSS (actually, just moving it into a @media query until I decided if/when I would need it again).
Once I was happy with 240 pixels, I moved to the next panel, gradually increasing width, looking for the moment when something started to look “odd”, then decide what to do about it, add that CSS, then move on to the next width. I even decided to be silly and include a ridiculously large “big boy”, at 2500 pixels wide (super monitors are out there, and TV browsers are coming across the horizon!). Each breakpoint changes something, but not just for the sake of change.
The changes include the obvious expanding from single-column to multi-column, but also some changes in the navigation layout, and font-size changes. In one sense, it seems intuitive to decrease font sizes on smaller devices, but when trying to read something on a phone, some times a slightly larger font size is actually better.
I also noticed a few issues with a, code, th, and td elements not wrapping properly and breaking my layout, so I had to play with the CSS some. Naturally, Chris Coyier had the solution I needed:
... {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
User Interface
As for the aesthetics, I decided to switch my fonts around, changing from sans-serif headers and serif body font, to serif headers and sans-serif body font. Something about that just makes it easier to read for me, how about you?
I also beefed-up the underline for each article and section header, chunking from 1px to 4px (again, looks better to me, more “intentional”) and expanded my use of the orange color from just the main navigation, to a few other hover highlights, such as article headlines on the home page, article images, and the Categories and Archives links in the sidebar. Browsers that can, will get a nice fade-in/-out; those that can’t will get a slightly more jarring experience…
Lastly, I decided to play with icon-fonts, since they are suddenly all the rage, and for some time now I’ve been wanting to enhance my Contact page. I checked around a little and finally settled on IcoMoon Icon Fonts. My reasons were simple: the interface was easy, and I liked the icons they had to offer for what I needed.
I was able to easily select only the icons I wanted/needed, and even save my collection as a JSON file so when/if I return to make changes, I don’t have to start from scratch! (In fact, I initially had a Facebook icon and no GitHub, but have since gone back and removed Facebook and added GitHub; couldn’t have been easier!) Then, the site basically handed me the font files and CSS I needed to get the icons up and running.
In fact, I liked the look on my Contact page so much that I decided to make a new widget for the sidebar, offering the same icons, using the same font, just with a different font-size and orientation. Again, couldn’t have been easier!
Performance
Since the impetus for my site migration was mostly speed to begin with, I looked around for ways to make the site faster. Aside from editorial images, which I tend to keep to a minimum anyway, the site normally loads just the HTML and one CSS file, no fancy bells and whistles here, just what I feel the content needs.
But I felt that minifying and caching even just these two assets could only improve my load times, so I decided to go for it. I added W3 Total Cache, configured it, and thought I had reached Nirvana.
But not quite: the site was still running far more slowly than I wanted. So I turned my suspicious eye to the Plugins page. At this point, here’s what I was running:
- Akismet
- Better WP Security
- Enhanced Admin Links in Multisite ‘My Sites’ Drop-Downs
- Jetpack by WordPress.com
- JM Twitter Cards
- Live Comment Preview
- Micro Anywhere
- Multisite Robots.txt Manager | MS Robots.txt
- Simple Multisite Sitemaps
- TinyMCE Advanced
- TinyMCE Valid Elements
- W3 Total Cache
- WP-Optimize
- WP Security Scan
Now, obviously some of these shouldn’t affect the front-end (like WP-Optimize), and some should be making things much better (like W3 Total Cache), but I was still seeing average page loads of around 8 seconds, which is ridiculous for this site!
My initial suspicion was Jetpack (I had just added it so that I could start collecting analytics), but just to be sure, my first step was to turn everything off. Average page loads instantly dropped to just over 1 second. Wow. Okay…
So, I then slowly turn them on, one-by-one, occasionally seeing very minimal increases, but nothing Earth-shattering yet. When I turned Jetpack on, I expected the speed to go through the roof, but it didn’t; the number of items increased by more than four-times, but the load time increase was trivial. I was stumped, but continued.
Surprisingly, the culprit was W3 Total Cache, the one plug-in that should be making my site faster… Now, maybe I had something configured incorrectly, there are certainly enough options available to confuse all but the most ardent cache expert, but I saw my number of items remain the same, KB transferred drop nearly in half, but page load speeds more than doubling, some times even tripling!
I don’t know what the reason was, and I suppose I really should reach out to the plug-in author to ask for guidance, but for now, no minification, no caching, a total of 9 items being fetched (nearly all of it Jetpack stuff), and average page load speeds for my home page should be under 2 seconds. I’m pretty happy with that.
I hope at least a little of this is helpful, happy web developing,
Atg