Donation Page Performance #2: How to Improve

In the last post I provided a summary of why performance matters, focusing on three main areas for non-profits: the bottom line, ability to scale, and mobile donations.

In this post I’ll provide a brief overview of a few ways to improve donation page performance. Some are very easy to do, and depending on your technical skills, others may require your development team, agency, or web host to help out.

How do you test donation page performance?

First off, here are three good places to start testing your donation page to see how it measures up before you start making improvements:

Google PageSpeed Insights

Pingdom Website Speed Test

GT Metrics Speed Test

Improvements: low hanging fruit

#1 Optimise and Compress Images

This one is very easy to do and something you can action very quickly. Large images can significantly hamper page loading time.

Use the right file format with PNGs generally better for graphics with fewer than 16 colors and JPEGs normally better for photographs. Make sure images are compressed for the web using your Photo editing software. Most packages, like Photoshop, have optimisation facilities build in. Here is starter guide on optimising your images.

#2 Remove unnecessary applets or plugins used on your site

Too many plugins can slow your site, create security issues, and cause crashes and other technical difficulties. Delete any unnecessary plugins and then weed out plugins that slow your site down by selectively disabling them.

Improvements: slightly more advanced

#3 Enable Compression

Larger pages and files can be easily compressed, servers can compress files in Gzip format before sending them for download, either by using a third-party module or using built-in routines. Here is a guide on setting this up.

#4 Minify CSS, JavaScript, and HTML

WYSIWYG editors in CMS systems can make it easy to add content, but they sometimes create messy code which can slow your website down considerably. Minification is the process of removing unnecessary pieces of code and markup that add to the size of your page. Eliminating extra spaces, line breaks, and indentation so the pages are as lean as possible.

Some good places to start reducing bloat are the PageSpeed Insights Chrome Extension for HTML and YUI Compressor for CSS and Javascript.

#5 Use Browser Caching

Browsers can cache a lot of information (stylesheets, images, JavaScript files, and more) so that when a visitor comes back to your site, the browser doesn’t have to reload all these again. Google has more information about this here.

#6 Reduce Server Response Time & Use a CDN

Google recommends a server response time under 200ms (milliseconds). There are dozens of possible areas which may slow down server response time: slow database queries, slow routing, libraries, frameworks, resource CPU starvation, or memory starvation. Have your hosting or development team to investigate the options for improvement.

Using a Content Delivery Network can also distribute the load of delivering content to improve speed. Essentially, copies of your website assets are stored at multiple, geographically diverse edge locations closest to users giving them faster access to your donation page.

These are just a few examples of areas you could focus on, there are many other techniques, from reducing re-directs, optimizing CSS delivery to prioritising the loading of certain ‘above the fold’ elements of your page, to caching content to static files. The opportunities for improvement are diverse.

Further Reading & Resources

Armin Jalili provides a quick list of ways to improve your page speed (Reference)

Browser extensions from Google to help diagnose speed issues (Reference)