DaedTech

Stories about Software

By

Speeding Up DaedTech

As I get back into doing web development more and more these days, I’ve started to pay attention to some of the finer points, such as not having a sluggish site that turns off visitors. To that end, my Trello Board for this site had a card/story sitting in the “To Do” bucket for speeding up DaedTech’s load performance.

The first thing that I did was visit GTMetrix and run a baseline to see if subsequent things that I did would improve performance. From there, I installed W3 Total Cache which is a WordPress plugin that provides a whole bunch of functionality for speeding your site, mostly revolving around setting cache settings. After a bit of poking around and research, I figured out what was going on, and I enabled settings that helped with some low hanging fruit.

This included “minification” of CSS and javascript, a process whereby the whitespace is compressed out of these things as they’re sent from the server, thereby reducing the total amount of data sent (and thus time to process that data on the client side before displaying it). It also included optimizing the caching settings that the site suggests to returning visitors so that pages, styles, media, etc are stored locally on your machine as much as possible, which prevents reloads. This also setup the further use of GZip for further compression.

For improvement in the future, I installed a plugin called WP-Smush.it that will use the Yahoo utility for image compression to any file I add through the media library. This seems convenient enough that I should probably start adding files through the media library in general rather than simply putting them on the server and linking to them at their full local URL to get this functionality.

While I’m at making resolutions to improve speed going forward, here are some other tips that I’ve picked up today:

  1. Serve scaled content. Meaning don’t put up some huge image that the browser downloads only to use CSS or HTML in to tell the client to shrink it down. Send over the smallest possible image.
  2. Favor using my own images instead of embedding them from other sites. This lets me control the cache expiration suggested to the browser and the size as well. With hyperlinked images, I don’t have this control.
  3. Specify the image dimensions rather than simply accepting the default.
  4. Consider using image “spriting” to combine images such as the gaggle of social buttons into a single “image” to reduce the amount of stuff getting sent over the wire.
  5. Consider using a content delivery network to store your resources in places closer to site readers.
  6. Try to limit the number of things that make HTTP requests (like social media buttons)
  7. Use a utility to defer javascript execution so that it doesn’t block page load

I’m no web performance guru by any stretch. This is just what I pieced together in a morning after saying “I want my site to load faster”. I’m hoping that people in a similar situation to me will see this and realize that there is some pretty low hanging fruit to be picked here and that it isn’t terribly complicated to do so.

By

Links As Buttons With CSS

I’ve recently started working on my home automation web server in earnest, and am trying to give it a nice look and feel. This is made more interesting by the fact that I’m developing a site intende specifically to be consumed by desktops, laptops, tablets and phones alike. With these constraints, it becomes important to have big, juicy click targets for users since there’s nothing more irritating than trying to “click” tiny hyperlinks on a phone.

To do this, I decided that what I wanted was a button. But, I’m using Spring MVC and I want to avoid form submissions for navigation and handle that through hyperlinking. So, after some experimentation, I came up with the following via a composite of things on other sites and my own trial and error tweaking:


/* This is for big content nav buttons */
a.button {
     padding: 5px 10px;
     background: -webkit-gradient(linear, left top, left bottom, from(#CC6633), to(#CC3300));
     background: -moz-linear-gradient(top,  #CC6633,  #CC3300);
     -moz-border-radius: 16px;
     -webkit-border-radius: 16px;
     text-shadow: 1px 1px #666;
     color: #fff;
     height: 50px;
     width: 120px;
     text-decoration: none;
}

table a.button {
    display: block;  
    margin-right: 20px;  
    width: 140px;  
    font-size: 20px;  
    line-height: 44px;  
    text-align: center;  
    text-decoration: none;  
    color: #bbb;  
}

a.button:hover {
     background: #CC3300;
}
a.button:active {
     background: -webkit-gradient(linear, left top, left bottom, from(#CC3300), to(#CC6633));
     background: -moz-linear-gradient(top,  #CC3300,  #CC6633);
}

/* These button styles are for navigation buttons - override the color scheme for normal buttons */
a.headerbutton {
    padding: 5px 10px;
    background: -webkit-gradient(linear, left top, left bottom, from(#1FA0E0), to(#072B8A));
    background: -moz-linear-gradient(top,  #1FA0E0,  #072B8A);
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    text-shadow: 1px 1px #666;
    color: #fff;
    height: 50px;
    width: 120px;
    text-decoration: none;
}

Nothing here is really rocket science, but it’s kind of handy to see it all in one place. The main things that I wanted to note were the gradients and border radii to make it look pretty, the webkit/mozilla stuff to make it compatible with versions of browsers not yet supporting HTML 5, shadowing and fixed height/width to complete the button effect.

In terms of client code, I’m invoking this from jsp pages:

<section id="content">
	    <a class="button" href="hello.html">Say Hello</a>
    	<a class="button" href="sample.html">Sample</a>
	</section>

And, that’s about it. Probably old hat for many, but I haven’t done any web development for a while, so this was handy for me, and it’s nice to have as reference. Hopefully, it helps someone else as well.

Edit: Forgot to include the screenshot when I posted this earlier. Here’s the end result (and those are normal a tags):

Acknowledgements | Contact | About | Social Media