Strategy to speed up a portfolio website.

7 minute read
PagePipe specializes in mobile WordPress speed strategy for web businesses using free plugins and themes.

Save the Internet from WordPress speed abuse.

Updated: June 2017

Hellish Simplicity is a clean and simple WordPress theme. Responsive design makes the theme look good on all devices and the header text (logotype) can be easily modified via the theme customiser. This theme is our choice for a minimalist portfolio website, www.DebraTeare.com.

Theme: Hellish Simplicity 1.7.7 by Ryan Hellyer

hellish-simplicity

We originally tested this fast theme in our article:

From our tests, Hellish Simplicity theme has a “raw” load speed of 971 milliseconds (first view) and 777 milliseconds (with a primed cache). On a portable device like a smartphone or tablet, that translates into about a 2-second load. This doubling is because of wireless-connection time delays. Two seconds is our performance budget or goal.

Comparing image compression quality.

Compressing all of the images is important for any portfolio gallery. The bulk of the load slowing down pages is images. Most artists want images to be better quality than necessary. Viewers aren’t too discriminating about online image quality – especially on small screens. Below is a demonstration of the image-quality difference for the same files saved in different formats and quality settings:

126k
Original screengrab: A 126k PNG image of Debra Teare’s portfolio website as seen on a smartphone.

 

16k-deb
Saved with a Jpeg quality of 70. Produced using “Save for web …” in GIMP image editor file size is 16k. That’s 110k smaller file size!

 

50Q-13k-deb
Jpeg quality setting here is 50 for a more compressed file size of 13k. Only 3k smaller than the 70Q image above center.

It’s hard to see any visual difference! But what a difference in page weight. We decide that Jpeg 70Q is the compression setting we’ll use for all portfolio images. That makes the Home page image only 25k.

The single image to appear on the Home page.
The single 25k image to appear on the Home page.

It’s typical for a portfolio site to place a slider of sample images upfront on the Home page. This is poor strategy. Even with 12 well-optimized images, the slider page will load in 3 to 4 seconds on a shared server. While many designers may think that’s just dandy, usability tests demonstrate visitors are impatient and not willing to wait – especially on Home pages.

And yes, we only recommend about 12 photos per section. From our own testing, viewers get bored around 7 to 9 images into the art slideshow. So break things up. Too many images is a bad choice. Just show the artist’s best and most recent works. Lead with the star image.

The main purpose of any Home page is letting visitors know they are in the right place and allow them choices to navigate to what they want to see. The visitor wants to make decisions fast.

The solution is simple: don’t put the slider on the Home page. Place it on a separate page called, “Gallery.” Splitting the load  improves the expectation and minimizes frustration. Visitors expect the gallery section to take longer to display.

13 free plugins we used:

Better WordPress Minify
This is our favorite minifier plugin. It allows you to minify your CSS and JS files for faster page loading for visitors. Not all minifier plugins work – in fact – they frequently break your site. This plugin really works. It combines (concatenates) all possible files to reduce the number of HTTP requests and removes code “white space” and comments. In our case, that was the combination of several calls. All the little things add up for improved performance.

Captcha on Login {plugin retired}
This is for security to prevent the site from being hacked. It protects from login brute force attacks adding a captcha on the login page. Also locks IPS after a specific number of login tries fail. Allows changing the default administrator user name from admin to whatever you want for better security.

Disable Comments
Comments require babysitting and allow for spam intruders. We say, “Don’t do comments!” This plugin allows WordPress administrators to globally disable comments on their site.

Disable Emojis
This plugin disables the new emoji functionality in WordPress 4.2+. WordPress does not need emoji. Probably, the worst decision ever by WordPress Core is enabling emojis by default, and providing no way to disable them. WordPress core developers should have a disable setting instead of us installing another removal plugin. Emoji functions add 5.6k to 14.7k page weight and 2 or 3 HTTP requests to a site. Waste.

Emoji are the 12-pixel-square-grid ideograms, emoticons, or smileys used in Japanese electronic messages and Web pages, the use of which is spreading outside Japan. Originally meaning pictograph, the word emoji literally means “picture” + “character”.

Beyond the standard emoticon-type “smileys”, there are hundreds of emoji, ranging from plants and animals to people, objects, vehicles, food, the Sun and Moon, and more. All dead weight.

Email Address Encoder
To avoid spam harvesters from snagging the email address on the contact page and selling it, we use this easy plugin. The lightweight plugin protects email addresses from email-harvesting robots by encoding them into decimal and hexadecimal entities. We’ve used these techniques for a long time and it really prevents email spam.

Far Future Expiration Header
This plugin will add a “far future expiration” date for various file types to improve site performance. This is a best practice advocated by the Yahoo Extreme Performance Team. It keeps files and images cached longer. There is also a radio button to enable Gzip – a nice addition.

Meta Slider
Easy to use slideshow plugin. Create SEO optimised responsive slideshows with Nivo Slider, Flex Slider, Coin Slider and Responsive Slides. Fast – only the minimum JavaScript/CSS is included on your page. After some experimenting, we used the Responsive Slides option.

Plugin Logic
This activates plugins on pages only if they are really needed. We  wanted the contact form to be just loaded on the Contact page – not universally. Universal loading adds weight to every page.  This keeps the Home page load time as fast as possible.

Simple Drop Cap
Simple drop cap plugin. Transforms the first letter of a word into a drop cap or initial letter simply by wrapping the word with a shortcode. The plugin is much faster and easier to customize and use than some other methods we’ve tried.

Simple Image Widget
A simple image widget utilizing the WordPress media manager. Simple Image Widget is the easiest way to add images to your sidebars.

Title Remover
Gives you the ability to hide the title of any post or page without affecting menus or titles in the admin area. It’s handy. It’s just a select box on the page or post. On or Off. Easy.

Very Simple Contact Form
Use the shortcode *contact* to display an email form on a page or use in a  widget. We use it on the Contact page.

WP Super Cache
Caching plugin for WordPress. We find this plugin doesn’t always help with speed. It may not be needed since this site is extremely optimized already – but isn’t hurting anything.

So what are the page load times?

Home page
Time: 812 milliseconds, 4 HTTP requests, and 31k pageweight.

Gallery page
Time: 2.624 seconds, 19 HTTP requests, and 757k pageweight.

Interview page
Time: 1.326 seconds, 10 HTTP requests, and 94k pageweight.

About page
Time: 976 milliseconds, 6 HTTP requests, and 89k pageweight.

Contact page
Time: 1.0 seconds, 5 HTTP requests, and 59k pageweight.

The high-performance website is hosted on an economy, shared Linux server. No pricey CDN is used. In fact, a CDN wouldn’t improve anything for an efficiently optimized site. Also, it’s doubtful any speed benefit is derived from the Super Cache plugin.

The secrets to excellent speed is:

  1. Selecting a fast theme.
  2. Optimizing all Jpeg images at 70Q.
  3. Load-splitting – by not placing the gallery on the Home page.
  4. Only activating the contact plugin on the Contact page.
  5. Minifing JS and CSS files.
  6. Disabling Emojis.

Are there any other tricks to improve site speed?

Yes. We really wanted to disable the Google Font Droid Sans and Droid Serif – and just use faster-loading browser default fonts. Calling Droid from the Google Cloud was adding about 50k to the home page.

We tried both Remove Google Font References and Disable Google Fonts plugins. We’ve had success with these plugin before on some – but not all – themes. Neither worked for this theme.

The only remaining solution was customizing the code in the style.min.css and style.css files. It really wasn’t worth the effort. We reduced one HTTP call on the Home page and saw at most a 100 millisecond gain in speed. Home page weight dropped from 80k to 31k.

Godspeed—

Steve Teare
performance engineer

Serious Mobile WordPress Speed Strategy for Business

What others think of us:


"Bloat was out, lean and speedy sites on multiple platforms with easy editing was the new target. Steve hit the bullseye with our new WordPress sites … Give Steve a call if you're serious about a highly effective website for your business or organization." visitpalouse.com Washington, USA

by - Mike Milano