Web Design and Development Articles

An Obsession With Site Speed

About two months ago I was hired on as the lead developer for MyGreenFills.com. We are an amazing company creating quality, eco-friendly, subscription based household goods including: laundry soaps and detergents, softeners etc. My first project coming in was to evaluate our website and find solutions to page speed issues.

Here’s the site set up we were running as a reference:

  • WordPress
  • Thrive Themes
  • Thrive Page Builder
  • Yotpo Reviews Embed
  • Typeform Embeds
  • Wistia Embeds
  • Lots and Lots of tracking scripts

To start any site speed project like this, I start by running a report through GTmetrix and evaluate from there. The first and most common things I look for are page load times, optimizing images, loading js in the footer when possible, caching, minifying and amount of requests a page makes.

In our case, we were scoring an F with a page load time of 8.5 seconds, page size of 3.95mb and over 130 requests. In my view these numbers were way to high. So now comes the fun part, how do I fix these.

Step One

Our first step was to evaluate our theme. I love Thrive Themes, don’t get me wrong but what most people don’t realize is the overhead that these huge themes and page builders come with. So, the decision was made to build a custom theme that was lean and mean.

Step Two

How do we fix all the requests from embed codes? Since loading in iframes brings in all of that pages requests, adding to the page load, we needed to rethink our approach.

Yotpo is a great solution for housing customer reviews but embedding an iframe was not the way to go. Luckily, Yotpo has a fairly robust REST API. So instead of embedding the reviews, we made an API, processed it with some PHP, and sprinkled some HTML and CSS to make things look nice.

To fix the Typeform embed issue, we had to look at the experience. In our case, we always allowed Typeform to open full screen. If we allowed our forms to open in a new window, customers would have the same experience but we no longer had to load the forms. So we linked to the forms instead of embedding them.

To solve our Wistia video embed issues we chose to use the Wistia pop ups as opposed to the embed codes. This solution reduced our page load and give customers a pop video experience versus viewing a small video in a box.

Tracking scripts are tough issue sometimes. One that is not easily solved, in most cases you cannot cache these scripts, so you will take a hit on your page score but it is minimal. Some scripts we were able to remove and others had to stay. Such is life.

Step Three

Image optimization is huge when it come to page speed. If your not compressing your images you need to be. If your not keeping tabs on your image sizes a page size can grow very quickly. On our site we had a header image that was 3mb on every page. Converting it to a jpg and optimizing took it down to under 100kb. All theme images were then optimized ensuring our theme base was as fast as possible. To compress our images in the media library I enlisted TinyPNG. I created an account, got my api key and downloaded the plugin. TinyPNG allow you to choose which image sizes get crunched, so i chose my size and let it run through the library. Now, anytime we upload an image, they get compressed, stored and served in the smallest way possible.

Step Four – The Geek Stuff

Now it was time to get on the geek side. We already were using Cloudflare but it was never configured in a way that was optimal. I updated the settings to combine all of our js scripts and then serve them as one script. Now we have js file to download. I set the same for our css styles. I am also allowing our HTML to be minified also. I also configured our server caching to be better also. The next step was to use PHP7 instead of PHP5.6. This is something you have to ask your host about but our host gives us the option of which PHP version to run. PHP7 is significantly faster than previous versions, so if you have the ability to use it, I would.

Random Stuff

The new theme was built on Bootstrap 3, but we used the old design as a base for the build, trying to recreate closely but not completely. Now that we didn’t have Thrive’s page builder I needed to create a new one so our marketing team could quickly build posts, pages and products quickly. Using Advanced Custom Fields PRO, I built a new page builder with styles for each piece so there was uniformity across the website.

We are not really playing the organic search game but realized it was still an important piece. We added YOAST SEO and built out nice titles and meta descriptions for each page. I used the SCHEMA plugin to add microdata to pages, posts and build out business information. We also added markup for our products and reviews. This important so Google and other search engines can know what your products are and details about them.

Wrapping up

I’m sure there is more that was done than this but I was able to bring our GTmetrix score from an F to an A. Dropping page load times by two thirds and page request by more than that.

I have a huge passion for building fast sites because faster sites lead to more conversions. If you also have the passion for a faster WordPress site contact me. I would love to give your customers the best WP experience possible.

Yellow Lab Tools Site Scanner

Like lot’s of other developers and even clients, it can be hard to determine why a site is running slow. This could be due heavy script loading, a slow server and many other things.

A great tool was just shared with my for finding details in why a site may be slow by detailing the resources it needs to render a page. It’s Yellow Lab Tools, and it’s awesome! Here’s a look at the recent results from code-local.com.

screencapture-yellowlab-tools-result-eh6n5d1luv-1470318969981

If your next client is worried about site speed give Yellow Lab Tools a try or if your looking for a developer that can help you with speeding your site up give Code Local a call or send me a message here. I would love to help you get your site running fast!

Using wp_remote_get to fetch Hubspot posts

One of the clients I work with relies heavily on Hubspot for his marketing needs. Over the last few years we’ve moved all of his posts from his website to Hubspot. In order to accommodate this and receive the fewest errors, we would make a post at both his site and Hubspot and redirect the posts to his Hubspot blog with a script on our single and index file that replaced the domain and redirected automatically.

Recently, we completely removed the blog from his site. Along with creating redirects for any 404 errors that may pop up we were left with how to incorporate his blog into his site. That is where wp_remote_get comes into play.

It took a little while to find the right information but this is what we have come up with.

Using wp_remote_get we can retrieve a json string with our blog feed here is an example:

This returns a json object that we need to decode.

Of this, we also need to decode $hs[‘body’], which is another json string stored inside our $hs array.

We are really close to getting what we need for our post now. Just one last drill down. From the $body array we now have, we need to grab the objects.

Great! We’ve got what need to loop through to create our feed. What’s great is that Hubspot lets us grab pretty much all the data from a post. In our we case we wanted a feed of three posts with featured images, titles, excerpts, permalinks and alt text for the image.

Lastly, we need to create our html. I’m using Bootstrap for quick layout but this can be ignored here and replace with whatever structure you may need.

So here is a quick wrap.

Although in this example I didn’t, I would recommend escaping the variables before output. Also, in the next phase I will save what we need into the wp_options table as a json string, which will speed the site up from always having to retrieve posts on every page load.

I hope this can help anyone out there looking to integrate Hubspot blog posts into a WordPress website.

How to Add Text to Featured Image Meta Box

As a WordPress theme developer, one of the things I run into is clients using images that maybe too small to fit the theme. In some instances I will use Advanced Custom Fields to replace the featured image box. By applying a few rules I can make sure that images are always a size that will fit. For other scenarios this might be a bit of overkill.

After lots of searching I found this hidden gem in the WP filters, admin_post_thumbnail_html. This will allow you to hook in a function to append the text in the featured image meta box. Although it offers no actual validation, it can guide a client to insert an image that best fits the theme.

Here’s an example:

I hope this helps other developers out there get the best from their themes.

Lots of New Gists For November!

I’ve been working hard over the last few weeks to add more education to my resume and also improve my workflow. One of the the things I have done is add lots and lots of new Gists to my Github account. Most developers are familiar, but if you are not, Gists are code snippets saved to your Github account. I have incorporated this with Sublime Text 3 using the GIST plugin. Although I will keep many as Sublime Text snippets, if my workflow changes to another text editor or IDE, I won’t lose the pieces of code I use the most.

Here’s an example:

All of the snippets I have put here on the site are also available along with many, many more! Here’s link to my gist account, if there is something you like, feel free to fork it!

Fixing Crawler Issues

Today I want to share a post I just wrote for GT Business Design. Over the last few months I have been working hard, using Moz.com, to fix high and medium priority crawler issues across benjamintwiggs.com. After our most recent crawl, the website has dropped from 1553 high priority issues to 0 and from 36,819 medium priority issues to 470. It has taken a few months but these results are fantastic and if you would like to read more, follow to the post here.

Northern Michigan Design Launch

The past week has been awfully busy. I have launched 3 new websites including this, Northern Michigan Design. Although this is a soft launch, I wanted to feature it here because, well why not!

This may seem like a very simple site, but behind the scenes had some fun programming and is using some CSS3 features that will be used more in the future of the web. Enjoy!

Design by Doug Cloud for GT Business Design

New Goals, New Design

Mason Construction has been one of GT Business Design’s longest standing clients. His first website was one of the first websites I had ever built. Over the years, as his business goals have changed so has the design of his site. This is, currently, the fourth version of masonconstructinc.com. By far this is my favorite!

New goals for the site involved large and expressive photography, with a focus on building beautiful portfolio pieces. We also wanted to take the focus away from just listing a bunch of services in the hopes that someone would stumble across one that they needed. The new photography and project page designs reflect the vast amount of services they cover without cluttering up the site. All services can be seen directly in the photography of the project.

I am very proud to have designed all of the pages (excluding the home page), programmed a simple to use backend for adding our new projects and submitted it to Google, Bing, Yandex and Alexa to have our new website crawled and updated on all search engines.

This project was completed for GT Business Design

A New and Updated Gear To Go Rentals

I just had the privilage to work with Dave Weber of Gear To Go Rentals, in developing and launching a redesigned and developed version of geartogorentals.com. Originally, this website was hosted and designed using the website builders from Vistaprint, but as his business expanded Dave knew it was time to move on if he wanted to get more creative and add more functionality.

Gear To Go Rentals is now a full fledged rental booking application. Using WordPress as the content management system, I chose WooCommerce and some of its great extensions to create a simple, easy to use site where customers can rent PA and musical equipment and Dave can easily add and manage orders from the backend of the website.