Case Study: Website Tune-Up

How a Nonprofit Organization Improved Its Speed, Security and Overall User Experience


The Sisters Place homepage.

 

Sisters Place, a non-profit, is a “supportive housing community committed to assisting families who are experiencing homelessness in Southwestern Pennsylvania.”  They provide housing, education, life-skills training, and other services to women and their children, while guiding them towards self-sustainability.   Having visited their facilities and residences first-hand, I can say that they are helping families who truly have nowhere else to turn.  That’s why we at Lucya were happy to provide their website with a much-needed “tune-up” – free of charge.  

A tune-up is what we call making a website load faster and smoother, making it more secure, and other technical updates, so that it provides an enhanced user experience.  It’s a series of one-time fixes which last virtually forever, and make the website more pleasing to visitors, and more favorable in the eyes of search engines, particularly Google.  (For the record, Google now considers speed to be the 3rd most important metric when ranking a website.)

So the service is a comprehensive update, and the result is an optimized website. It’s not really a makeover, because the site’s content, look and feel remain unchanged. The closest analogy would be to a car engine’s tune-up – we shake off the rust and improve the efficiency, along with some preventive maintenance – and the website is then running on all cylinders, so to speak.   Most websites should be given this service about twice per year, assuming they’re still committed to the same regular (weekly and monthly) updates and maintenance that all websites need.  (All WordPress websites at least, which is the website builder of choice for most major brands, as well as Sisters Place.)  Depending on the size of the website, the service can take anywhere from half a day, to three or four days.

Diagnostics – What Needs Fixed?

Our goals were as follows:

  1. Secure the site.  Their site was not secure; the “http” designation, along with the accompanying “not secure” message, were showing in their address bar.  Google doesn’t like to promote sites that aren’t secure, and visitors are often hesitant to give any personal details due to fear of being seen by unknown (usually malicious) parties. Sisters Place accepts donations through their website, so securing their site – replacing the “http” designation with “https”, and the “not secure” message with the reassuring lock symbol – is an easy fix that solves these problems.   Most website hosting providers now include these features for free, as part of their standard hosting packages, and it’s only a matter of switching these features on.  It’s a five-minute fix that benefits a site forever.
  2. Speed up the site by setting the browser caching.  “Caching” is instructing visitors to store a site’s files on their own equipment – in this case, the visitors’ internet browser (e.g. Chrome, Firefox, etc.) – so that they load much faster on subsequent visits to the site. As long as no updates to the site are expected in the near future, this will improve loading speed for visitors, while showing them exactly the same website.   Browser caching is done automatically behind the scenes, with no action needed by the visitor.
  3. Speed up the site by optimizing (compressing) its images.   Most of the site’s images were of PNG or JPEG format; the plan was to change them to the lighter, more modern formats WebP and JPEG 2000, to improve the load speed, without sacrificing image quality.
  4. Inline the site’s JS (JavaScript) and CSS code. Every website’s look, structure, and behavior are governed by thousands of lines of software code. (You can see this for yourself by right-clicking on any non-image (i.e. text) portion of a webpage, and selecting “view page source”) The code was written by a programmer – a human being – and is therefore formatted in a clean, orderly style that can be easily read by other humans.  The problem is that web browsers, and other tools that read the code to display the website, are not humans and don’t have eyes; the helpful spaces that are so easy on the human eye, are registered as blanks/pauses for a web browser; and clean, structured code is processed more slowly as a result. So the remedy is to remove those spaces – smush up the code – which is called inlining, or minifying.  The code isn’t changed; it’s just smushed together.

      Confused yet?  Let me clarify for you: 

      “This sentence is not inlined and is read slowly by a web browser.”

      “Thissentenceisinlinedandisreadquicklybyawebbrowser.”

      Get it?  We just scrunch up the code so that a robot reads it lightning-fast! For a WordPress website such as the Sisters Place website, this can be done easily with a plugin.              Popular plugins for this purpose are Autoptimize, Hummingbird and FastVelocityMinify.  All are free and can be installed on a website in a matter of minutes.

  1. Improve anything else that we see upon entering the website’s back-end controls. Updates to plugins, themes, WordPress itself, etc. are just a few examples of opportunities to improve a site’s speed and performance.  There’s no telling what has flown under the radar, so to speak, until you actually peak inside the website’s controls, and the hosting provider’s back-office controls, etc.

So, everything just described were the goals before we went to work on the Sisters Place website.

But – how did we know that these were problems in the first place?  A glaring “not secure” message is obvious enough, but how does one know that images aren’t compressed, browser cache isn’t being used to advantage, etc.?  While it’s often obvious that a site is loading slowly, it’s rarely obvious just what’s slowing it down.   

There are several free online tools to give you this kind of info.  At Lucya, we consult what we think are the two best:  Google PageSpeed Insights and GTMetrix.  

Google PSI ranks a website’s loading speed – both the desktop version and the mobile version – on a scale of 1 to 100, and gives a detailed breakdown of suggestions for improvement.

GTMetrix gives similar recommendations, but instead of ranking the site on a scale of 1 to 100, it gives the raw statistics – it shows the load time in seconds, the homepage’s size in megabytes (MB), the number of requests made by the browser to the website’s server, etc.  These stats can then be reduced as much as possible.

Combined, Google PSI and GTMetrix tell virtually every element by which a website’s speed can be judged, as well as everything that can be done to speed it up.

Now, it should be said that while achieving a perfect 100 with Google PSI is the holy grail in terms of speed, it’s not at all necessary for a website to rank high on Google’s search results.  As long as a website scores above 60 or so, Google will likely not hesitate to suggest it to searchers.   In other words, just as a straight-A student (4.0 average) and a slightly less-accomplished student (3.5 average) are both likely to be hired by an employer, scores from 100 down to about 60 are all seen as passing grades. 

Likewise with GTMetrix: a load time of less than 1 second, and homepage size of less than 1MB, are fantastic, but sometimes just aren’t achievable with media-heavy webpages. (For example, pages with many videos, infographics and other media-rich graphics that take a long time to load.)   The search engines understand this and give leeway to such sites. 

The point is that it’s OK to fall short of perfection when it comes to speed; a site doesn’t have to be the fastest kid on the block, it just has to be running fast enough to not annoy its visitors, and preferably, as fast as it can, given its nature and purpose.   This is usually enough to satisfy Google, who are just as important to please as a website’s visitors. 

With all that out of the way – let’s get into the actual results of the tune-up.

The Improvements

In the order performed, here are the fixes and improvements made to to the Sisters Place website:

The site is now secure.  HTTPS and lock symbol are both present now in the address bar.  

All redirects were set up, since the site was now secure:

a. http://sistersplace.org                → redirects to https://www.sistersplace.org                                                                                                                                                                      b. http://www.sistersplace.org       → redirects to https://www.sistersplace.org                                                                                                                                                                      c. www.sistersplace.org                → redirects to https://www.sistersplace.org                                                                                                                                                                      d. sistersplace.org                         → redirects to https://www.sistersplace.org

Why are redirects important?  First, so that visitors who directly type the website’s address can find the correct site, even if they type the old address, or a variation. Second, because each variation should redirect only once – and straight to the destination website.  In other words, variation A should not redirect to variation B, and then to the destination site; this is called a multiple redirect. Multiple redirects are unneeded actions that slow down a website.  

All unused themes were deleted. (They’re free anyway, and can be restored anytime.)   A theme is a template for a website.  Unused themes within WordPress are effectively deadweight code which, even though not used, still must be read by a browser every time a website is loaded.  Result: slower load times.  So we dropped the deadweight code by deleting the unused themes.  Remaining themes are the Sisters Place theme (currently in use) and a single alternative theme, also custom-made for Sisters Place, which may be used in the future.  Overall, 7 unused themes were deleted, all of them being the free (and recoverable) themes that WordPress gives to all its users, once a year.  (i.e. the Twenty-Ten theme from 2010, the Twenty-Eleven theme from 2011, and so on.) 

Updates were installed for WordPress; they’re now using the latest version 5.2.2.  No conflicts with the theme, or with the plugins, were noticed.

Updates were installed for all plugins. No conflicts with each other, with the theme, or with WordPress were noticed.

New plugins were installed:

FastVelocityMinify – to minify and inline the site’s code. (mainly HTML and CSS; JS code not altered)                                                                                                                                Breeze Caching – to set up Browser Caching; header set to 43,200 minutes (1 month).

PHP version updated: they were previously running version 5.6, and are now running version 7.3, which is the latest version as of the time of this writing.  This is a super-easy, and often forgotten update that can be made within the hosting provider’s back-office to improve the site’s speed dramatically.  PHP is simply the programming language that is used by the host’s servers to perform routine tasks related to serving (delivering) a website.  If forgotten, PHP updates can be missed for years at a time, and all the benefits will be missed along with it.

Cloudflare setup – Cloudflare is a free service (with paid upgrades) that provides both additional security, and a content delivery network (CDN) to improve a website’s loading speed.  “Content delivery network” means that instead of existing only on its hosting provider’s single server, the website’s pages (“content”) can instead be sourced (“delivered”) by multiple servers scattered across the country (“network”).  That way, for example, a visitor from the west coast can source the website from a server that’s also on the west coast; and an east coast resident can source it from an east coast server; rather than each having to rely on a single server in a remote location.  Result: shorter electronic trips to the server, which means faster load times.  Sisters Place is now using Cloudflare’s security and nameservers, and also their CDN service, all on Cloudflare’s free plan. 

The Results

Bottom Line: Website speed and security were vastly improved as a result of all the above fixes.  

Before and After speed scores:

Google PageSpeed Insights – before:                      Mobile 24, Desktop 65 (max score: 100)                                                                                                                                          Google PageSpeed Insights – after:                         Mobile 86, Desktop 94 (max score: 100)                                                                                                                            GTMetrix – before:                                                      Load Time 4.2 seconds, Total Page Size 2.2MB                                                                                                                        GTMetrix – after:                                                         Load Time 0.7 seconds, Total Page Size 0.8MB

The mobile website improvement is especially important, since Google places more importance on a website’s mobile version, because searchers on mobile devices now outnumber desktop searchers.  Both mobile and desktop scores and metrics are now easily in the top 10% of all websites.

Anyone can verify these speeds, now and in the future, at the below sites:                                                                                                                                                                      Google PageSpeed Insights:  https://developers.google.com/speed/pagespeed/insights/                                                                                                                                                    GTMetrix:  https://gtmetrix.com/

(Be sure to check using the website’s full address: https://www.sistersplace.org)

Not completed during the tune-up:  The site’s images are still not optimized to new formats (WEBP, JPEG2000).   The decision was made to forego this step, because all browser types have not adopted these relatively new formats; viewers on some browsers would not have access to these images, which would detract from the experience of the Sisters Place website.   For instance, JPEG2000 is currently only supported by Apple’s Safari browser; and WebP is only supported by Chrome, Opera, Firefox, Mozilla and Edge.   It’s hard to predict whether the majority of visitors are users of Apple products, or other browser types.  So, due to the unique images on the Sisters Place website, the late adoption rate of certain image types by the browsers, and the fact that their site speed is now stellar anyway, the decision was made to postpone image reformatting.  In another year or two, this decision can be revisited.

Post-Results Follow-Up

As I said earlier, many of the updates made in a tune-up last virtually forever.  They never really wear off, or degrade; but do the website speed scores and metrics always stay the same? 

Not exactly. 

Most websites are updated at least semi-regularly: new pages are introduced, and with them new images, videos, and other graphics-rich media.  Also, changes to plugins, themes, WordPress itself, PHP, etc. are guaranteed, and must be updated to the website.  Even hosting providers change their services from time to time.  For these reasons, website maintenance and housekeeping should be scheduled at regular intervals.  If not, the site’s speed and performance will gradually degrade, just like a car’s engine.

For instance, our work for Sisters Place was performed in June, and by early September, its speed rankings had dropped slightly on Google PSI:  mobile score dropped from 86 to 82, and desktop score fell from 94 to 91.   These aren’t significant worries, but over time, you can expect a website’s speed to drift slower, due to new content additions, updates needed to the code and plugins, and even some unforeseen factors.   Over very long times, if not attended and addressed, the drop could be much more dramatic.

At Lucya we consider best practices to be, updates to plugins and themes once a week or so, while a sitewide survey and tune-up should be done every 6 months or so.   This frequency is in line with what most experts consider to be necessary and reasonable. 

Conclusion

The Sisters Place website showed dramatically improved speed and security, as a result of eight or ten technical fixes.   Even though image optimization had to be skipped, its benefit would have been only marginal given the multitude of other improvements that were made.

In the past, speed and security were considered luxuries; today, to rank a website high in the search engines, they’re necessary just to get a seat at the competitive table.  But with proper and timely maintenance, each can be achieved with a surprisingly minimal amount of effort.  And it’s a shame that more websites aren’t given this maintenance, considering the huge difference it can make to user experience and search engine favorability.  (not to mention direct sales) You definitely get a good return on investment, in more ways than one.  That’s why Lucya began offering the tune-up package: it was borne of our exasperation at seeing websites that could be improved so much, in such little time.

The truth is, speed and security alone won’t skyrocket a site to the top of the search engine results; you still need to keep your site’s content helpful, fresh and competitive; that’s always been the most important factor to a website’s success. The saying “Content is King” is as true as it ever was.  But even more important than Content is overall User Experience – and user experience includes speed and security; they’re crucial and inescapable elements. 

In other words, absence of speed and security will hurt you more than their presence will help you.  (Do you think Amazon would be just as successful if its site wasn’t secure?  Would people all over the world still submit their credit card info?)  In the same vein, people all over the world don’t shop at Amazon because the site is fast and secure; they shop there for its products and deals. (Content is King!) 

That’s the best way we can explain the importance of speed and security, when it comes to your website’s overall performance – they’re not sufficient, but they’re very necessary. 

Thankfully, they’re a lot easier to achieve than most people think.

Let us know what you think of this case study!

 

 

 

Leave a Reply

Close Menu