white opt

Save the Internet from WordPress speed abuse.

Updated: December 2017

6 minute read

Cities and towns have different website needs than small businesses. We’re rebuilding a website for the local Palouse Chamber of Commerce.

GovPress is a free WordPress theme designed for use by city and town governments. This theme is perfect for our web design goals. But it’s boring. So we’ll change it with customization and give it some life.

The theme custom header allowed a floating logo and a background image. Shown below:

A 8-bit floating PNG banner with transparency featuring the downtown Palouse clock.

The GovPress theme also allowed for color customizations. Our goal is a traditional palette based on the city’s frequent use of Hunter Green. This green is used on the city streets in the clock, light poles, benches, and waste receptacles. Also, Burgundy Red is the color of a dominant building on Main Street. Colonial Blue worked well with these colors.

The old VisitPalouse site was built with HTML Tables.
The old VisitPalouse site was built with HTML Tables.

Hero Widget Image

Click image to enlarge.
Click image to enlarge.

Traditional Color Palette

colors-palouse

Simple Typography

The theme typography is a simple and utilitarian Google Font called Open Sans. This is a popular font and already loaded in most browser cache for speed. It’s not decorative or distracting (like an expressive aesthetic font would be). This keeps the reader focused on featured stories and events.

open-sans-typography

Fast-loading Feature Video

Vimeo Jpeg 45k-image placeholder for the video. The image is loaded first. The video is loaded and starts when the image is clicked.
Vimeo Jpeg 45k-image placeholder for the video. The image is loaded first. The video is loaded and starts when the image is clicked. Notice the red and green building colors of our palette.

Normally, we wouldn’t consider putting a video on a Home page. Too heavy. But, Palouse has a nice, 2-minute video hosted on Vimeo. It was produced for the Palouse Scenic Byways Project. It’s perfect for the design look-and-feel we wanted. We tested embedding that video on the Home page in a feature-column widget. This slowed the page load to over 3 seconds. Badness! We needed a workaround to keep our load time fast.

That’s where this plugin came to the rescue: Lazy Load for Videos. But it would only work as a shortcode placed in the page or post text content. It wouldn’t work in a standard text widget. And we needed to have the video appear inside a widget. Big problem.

The solution was using the Black Studio TinyMCE Widget as a workaround. It allowed using the lazy-load shortcode without corruption or deletion. A Pingdom.com speed test to New York was now 1.24 seconds best case. We were getting the fast performance we needed again.

Google Maps without a plugin.

Image link using a 24k Jpeg screengrab of the Google Map.
Image link using a 24k Jpeg screengrab of the Google Map.

Since a principle site goal is getting people to come and visit the City of Palouse, they need to locate this small town. There are many plugins for embedding Google Maps. But all of them are slow loading – and require multiple HTTP requests. A Google Map can delay a page load by seconds. With a two-second performance budget, we wanted to avoid Google Map overhead at all costs.

The map-weight compromise is simple. Place a much-lighter, 24k, screengrab static image of a Google Map in the “Home page featured widget.” Then make an image link to the interactive Google Map in a new tab. This strategy also allows Google to manage many complex features like current weather, satellite map view, and street view images. This successfully offloads all those heavy features.

Feature Columns

We wanted multiple feature columns in the main area below the full-column-width Featured widget (map). Responsive Column Widgets plugin was the solution to get our 3-wide and 2-up multi-columns. Inside of these widgets we used the HW Image Widget plugin. It let us embed a feature image and also editable text and links description underneath the images.

Prototype Home Page

Above: Prototype Home page. Click image to view actual final page.

Responsive web design for all screen sizes.

desktop-2-visitpalouse
Desktop: VisitPalouse.com prototype Home page on desktop computer.
iphone-visitpalouse
iPhone: VisitPalouse.com prototype Home page on iPhone screen.
tablet-visitpalouse
Tablet: VisitPalouse.com prototype Home page on horizontal table screen.
vertical-ipad-palouse
Tablet: VisitPalouse.com prototype Home page on vertical table screen.

Final load time to New York 387 milliseconds.

Final Pingdom time and score.
Final Pingdom time and score.

251 posts of meeting minutes were converted from DreamerWeaver table-based pages.

It wasn’t too painful. Just repetitive robot work that we could do while listening to loud 70’s rock music. We’ll still be making pages in our dreams. Head banging.

Most of the page formating and text styling transfered well. There is only one remnant that needed changing: bolded subheads had “underlined” text styling.

Underlines are indicators of links. None of these subheads are links. There were thousands of them. We removed all underlining and left the subheads bolded. This is the “best-practice” styling method.

To make all of these changes as quickly a possible, we used Better Search Replace plugin. This stripped all HTML <u> and </u> underline tags from all post’s code.

One new plugin trick.

We used Simple Yearly Archive plugin to create a page with a list of all of the posted counsel-meeting minutes. They appear in the usual reverse-chronological order. There are anchor links to jump to years from the top of the page. The number of meetings (entries) appear in parenthesis next to the year.  All future posts will be automatically added to the list.

35 active plugins added to the GovPress theme. All freebies.

AA Sitemap, Better Search Replace, Better WordPress Minify, Black Studio TinyMCE Widget, Block Bad Queries (BBQ), Brute Force Login Protection, WP-PICShield – HOTLINK Defence, Configurable Hotlink Protection, Disable Emojis, Enable Media Replace, Far Future Expiration Plugin, Huge IT Slider, HW Image Widget, Imsanity, jonradio Current Year and Copyright Shortcodes, Lazy Load for Videos, No Comments, One-Click Child Theme, Optimize Database after Deleting Revisions, Plugin Logic, Remove Google Fonts References, Responsive Column Widgets, Rocket Lazy Load, Simple Drop Cap, Simple Scroll To Top, Simple Yearly Archive, Standout Color Boxes and Buttons, Super Simple Google Analytics, UpdraftPlus – Backup/Restore, Visitor Mailer, WP jQuery Plus, WP Super Cache, WP Updates Notifier, and WP-SpamShield.

Final page design.
Final page design.

Problems We Encountered

We had plugin conflicts that affect the usability of the dashboard and login. These were associated with the caching plugin and minification plugin.

Autoptimize we disabled. And WP-Cache.com plugin. These deletions didn’t affect speed. Pingdom load time to NY was still about 500 milliseconds.

Godspeed—

Steve Teare
performance engineer

Mobile WordPress Speed – without coding!

What others think of us:


"I have been searching for years to find the most accurate information available on WordPress speed optimization but I was never able to get my site fast enough. I was extremely fortunate to stumble upon PagePipe which seemed to have a lot of information that no one was talking about, but it made so much sense." drhedberg.com North Carolina, USA

by - Dr. Nikolas Hedberg