Save the Internet from WordPress speed abuse.
Updated: December 2017
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:
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.
Hero Widget Image
Traditional Color Palette
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.
Fast-loading Feature Video
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.
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.
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
Responsive web design for all screen sizes.
Final load time to New York 387 milliseconds.
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.
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.
Mobile WordPress Speed – without coding!