For the purposes of this article we will use 2 tests for testing speed and debugging the site. We will use Google Page Speed Insights and Pingdom, both have their uses and will help you review your site as you go along.

Google PageSpeed Insights – Debugging

Google PageSpeed Insights tests around 30 rules that account for page speed, however it does not calculate specific loading times like pingdom. There are 3 grades for rules, should fix, consider fixing, and passed. The items that we will try to remove are the should fix items as these are the most critical to improving your site speed and score.
A note on Google PageSpeed Insights – do not take this score too seriously as this does not calculate speed, it simply gives suggestions on optimizing the various pages on your site, and scoring a perfect grade here is unrealistic or impossible.

The following rules are used for testing the site, if there are any issues google will highlight what you should change.  You can read more about the various items here.

• Avoid landing page redirects – if you have one or more re-directs for your landing page, for example between your main site and your mobile design. This should not be present with Flothemes as our themes are responsive and there is no need to be directed to a mobile site.
• Enable compression – Google will check if all compressible resources were served with gzip compression as per HTML 5 standards this should be
• Improve server response time – how long it takes to load the necessary HTML to begin rendering the page from your server, this will be directly related to your hosting. If there are issues here, it may be a good idea to contact your hosting to see why there are bottle necks. Alternatively consider switching your hosting provider  (WordPress specific hosting is optimal). This will be more common for users using shared hosting packages, where at peak times of the day resources are limited. You can take a look here at a few Hosting providers we recommend with your Flotheme.
• Leverage browser caching – are you using cacheable resources to improve loading time? Browser caching is a core design feature of the HTTP protocol meant to minimize network traffic while improving the perceived responsiveness of the system as a whole. It works by storing HTTP responses, allowing it to be served quicker to a user. There are some items here that are impossible to remove, such as Facebook’s social integration and Google Analytics, they are required to add browser caching to these files, so its unlikely they will be removed:

• Minify resources – Minification refers to the process of removing unnecessary or redundant data, without affecting how the resource is processed by the browser.
• Optimize images – Are your images optimized for web, the less bytes an image is in size, the less load time there is on the server. We will cover this topic in more detail in the second part of Optimizing your Portfolio.There are times when this is useful, for example if there is a possible saving of 500kb plus (or 25% savings), then its important to reduce the image sizes for loading time. However it doesn’t matter if its only meager kilobytes google will still suggest your image as not optimized:
• Optimize CSS Delivery – Google will test to make sure that the way your CSS is delivered is optimized.
• Prioritize visible content – This rule triggers when PageSpeed Insights detects that additional network round trips are required to render the above the fold content of the page. Above the fold content are the items that are loaded on the page without scrolling.
• Remove render-blocking JavaScript – This rule triggers when PageSpeed Insights detects that your HTML references a blocking external JavaScript file above-the-fold.
• Use asynchronous scripts – Using asynchronous scripts means that your page can render more quickly. Instead of forcing users to wait for a script to finish downloading before the page renders, a script can be downloaded in the background. If your site is not using them, it will load slower.

Remember to take Google PageSpeed Insights at face value, some of the items will simply drive you crazy if you’re trying to optimize everything and reach that perfect score.

Pingdom and GT Metrix– Speed

A much better way of actually testing your page speed is using a resource such as Pingdom or GT Metrix. These tools will be used for testing the responsiveness and loading time of your site and then provide a performance grade based on the results. It will allow you to record the load time improvements from before and after completing the recommendations in this article. We recommend that you test your site now and record the results, then after reading the following article you will be able to check for some improvements.

Pingdom is great for users that are using hosting servers in the states, Scandanvian regions, or Central Europe. GT Metrix is good for users in Canada and the UK.

NOTE! Make sure to drop down the settings menu and select the server that is closest to your hosting server. If you need to find out where you server is hosted contact your hosting provider.

You can find out this info using WHO.IS entering your domain name and then in the 4th tab DNS records there will be a location:

Pingdom tools page

Pingdom will summarize your web page performance using 4 metrics:

• Performance grade.
• Requests.
• Load time.
• Page size.

The most important factor you will want to take into consideration here is load time, whilst its nice to have a better performance grade, Google will only be concerned about the loading time of your site, so will your consumers.

To get an accurate reading you should run the test several times, making sure to select the server that is closest to your hosting server. When testing, if using a cache it the score will not be a true reflection of the actual speed, so you will want to run this a few times to make sure you’re testing a cached version of the site. It’s also important to test various inside pages, such as blog posts or galleries.

Benchmarking

Record your Google PageSpeed Insights and Pingdom scores, and then you can begin the next test to review the improvements. Each time a plugin is added you should review its effectiveness and test the score for both Google PageSpeed Insights and Pingdom. With Google PageSpeed Insights you will have to wait 30 seconds between each test due to a cache being on your site from Google.

Now that you know what resources to use for testing your results we can discuss which plugins to use for optimizing your site.

The following section will review 4 plugins that should assist with the load time of your site, they will help with GZIP compression, browser caching and the optimization of your Javascript and CSS. Optimization of images, hosting and CDN’s will be discussed in the next tutorial.

WP Performance Score Booster

With WP Performance Score Booster you will be able to improve various rules for your site including:

• GZIP compression
• Leverage browser caching (only partially, a caching plugin is still required)
• Remove query strings from static resources like CSS & JS files.

Simply download the plugin from the WordPress repository and install it, nothing else is required. You can test your site again in both Pingdom and Google PageSpeed Insights.

Get WP Performance Score Booster Here.

Better WordPress Minify

Better WordPress Minify helps reduce the number of your JavaScript and CSS files being called by your server, it does this by combining the files together to reduce the number of requests made to your server when loading a page, thus decreasing loading time. The standard plugin settings should be enough for your installation, so you can simply install the plugin and activate it.

Get Better WordPress Minify Here.

Autoptimize

Alternatively you can use Autoptimize. This is my preferred tool when concatenating CSS and JS as it has a many options, and its advanced settings give you much further flexibility. Again this does the same as Better WordPress Minify, however be careful when using this plugin as its advanced options can cause your site to load incorrectly. When using optimization plugins, make sure to refresh and view your site to see if it loads correctly. If it does not, deactivate the options and debug. Frank, who makes the plugin also offers great support, its an added bonus as it’s free.

Max CDN does a good article on using Autoptimize which you can read here.

WP Super Cache

This will be one of the main things that is recommended via Google and one of the easiest to implement to improve speed. Installing a plugin such as WP Super Cache is a great way to improve loading time, however it is recommended that you follow a tutorial on how to set this up correctly as a wrongly configured caching plug-in can cause more issues than good. Another note on caching, when you are testing the site for its speed, its best to clear the cache, refresh your page wait 30 seconds and then retest to check for improvements.

For other notable caching plugin options, also take a look at WP Fastest Cache and WP Rocket .

NOTE! If your hosting is using caching options, make sure to review their documentation to see if caching plugins are allowed. Providers such as WP Engine do not allow the use of caching plugins as they cache the site from the source.

Get WP Super Cache here.

Other Optimization Options

The following options may not show improved loading times for your site, but they certainly help maintain an optimized site by keeping the database clean and the load on your site lower.

WP Optimize

WordPress is a great CMS platform, however it can create heavy and slow databased due to the saving post revisions, keeping spam comments and trackbacks etc. WP Optimize helps clear these items for you. However please read all the instructions before using this, and as the plug-in recommends, please make a back up of your database before installing and activating this plug-in for the first time, or before major updates.

You can view a list of back up plugins here.

To use WP Optimize, download and install the plugin, then in WP Admin there will be an option for WP Optimize. When in the plugin admin area, you will have 4 options selected initially, for your purposes this will be fine, do not select the options in red without reading more about them. Remember please make a back up of your database before proceeding with the process. Once you have created your backup simply select Process on the right hand side and wait for the plugin to do its magic.

Disable Trackbacks Pingbacks

You can turn it all off in WP Admin > Settings > Discussion. Just deselect “Allow link notifications from other blogs (pingbacks and trackbacks).” This will help speed up WordPress some more.

Deactivate and Remove Unnecessary Plugins

Using large numbers of plug-ins can affect how your site loads, as each plug-in will load its own JavaScript, some will also use PHP which means your site has to load more resources at the start, slowing down response time. So if you have a lot of plug-ins installed, review them, if they are no longer useful remove them. NOTE! Keep plug-ins up to date, if you do not you can leave your site vulnerable to attacks.

Decrease Content Shown

Are you using a simple list view for your blog showing all the images at once? This can be terrible for loading times due to the number of images loaded. Take advantage of your theme settings, to display only a smaller number of posts/galleries per page.

Why hosting is important?

Speed matters. The simple fact is, users want to see your content, and they want to see it fast. Slow loading sites lead to frustration and the likely hood that your visitors will go elsewhere. You’re selling a service, whilst it’s different than a shop, your potential clients still have to view your “product” which is your images. Also speed is one of the highest ranking components for SEO according to google, so the faster the better. Of course cost will be a factor when deciding which hosting provider to choose, but remember the investment now will pay it dividends later.

Recommended hosting providers

With so many options available, which hosting provider should you choose? Firstly, I’d stay well away from GoDaddy or NameCheap, whilst they are great at offering domain names, their hosting packages are just not powerful enough for WordPress. I’d also suggest avoiding Bludomain, since past customers experiences have been horrible, the speed is slow, and customer service is nonexistent. With that said, who should you choose? The following 2 recommended providers are our choice for 2016 (both are WordPress hosting solutions):

SiteGround – Best shared hosting option – starting from $3.95 they are the best value hosting provider for new and smaller businesses. They do extremely well in stress tests for a shared hosting plan, customer service is second to none and as it’s WordPress hosted your WordPress site will load fast. An added bonus, they manage your WordPress updates for you, making sure that its secure. I would recommend the GrowBig package, as the caching options are better, and it also offers twice the number of processes per hour.

WP Engine – Fastest and most secure WordPress hosted solution. Packages start from $29 per month for one site. Whilst considerably more expensive, WP Engine offers lighting fast speeds for users with larger requirements, an easy to use control panel and excellent customer support. If you’re a growing business and seeing higher amounts of traffic then WP Engine will make sense for your business.

Of course there are many other options on the market, just remember to do your research and choose wisely, don’t get caught up on price alone. You can see the full list of our recommended hosting providers here.

What is a CDN?

Content Delivery Networks (CDNs) will drastically reduce server lag by storing static resources on a network of fast loading servers. What does that mean? Basically it holds a cache of your static content (Images, CSS and JavaScript) in various server locations all over the world. When a user from the UK requests to view your site, they get served images from the closest server, drastically decreasing loading time. GTmetrix put this simple graphic together to make it easier to understand:

Recommended CDNs

CDNs are not for everyone, they should be seen as the final option for really optimizing your site. It depends on your budget and needs, if all the other options haven’t helped then a CDN will do the trick, especially if serving a large base of international clients. The following 2 are viable and affordable solutions for photographers’ needs:

CDN77 – Their pay-as-you-go pricing with no commitments and no minimum usage is suitable for any website owner. $49/TB for small traffic needs. CDN is easy to integrate and known for supporting the newest features. They even deliver images from the Hubble telescope all around the world.

Stackpath – pricing starts at $10 a month for unlimited sites, for unlimited bandwidth. Their solution is great for most small to medium website owners, and is easy to implement. StackPath is a popular and well-known CDN that powers the likes of The Next Web, Garmin, Kodak and WP Engine.

Cloudfare – Offering a free basic plan Cloudfare is useful for testing out a CDN and improving speed. Paid packages start from $20 per site. Unlike many CDNs, CloudFlare doesn’t charge for bandwidth usage. On the basis that if your site suddenly gets popular or suffers an attack, you shouldn’t accumulate a huge bandwidth bill. According to CloudFlare, on average a website using the CDN will load twice as fast, use 60 % less bandwidth, have 65 % fewer requests, and is more secure. Used by Reddit, Zendesk and MIT.

Why optimizing images is important

According to Google images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space. As a result, optimizing images can often yield some of the largest byte savings and performance improvements for your website. The fewer bytes the browser has to download, the less competition there is for the client’s bandwidth. Thus less bytes, the faster the browser can download and render useful content on the screen.

As photographers you will want to upload the best quality images for your site, just take into account page speed. As mentioned previously, slow sites can reduce visitors’ time on your site. Taking time to focus on image optimization before uploading your images to the web is vital. Thankfully there are many ways to compress images without losing the quality, which I’ll explain below:

Lightroom, Photoshop or GIMP

With the above tools you can easily batch save and optimize images for the web. The following tutorial explains how to save images using Photoshop, and the following article explains how to do it in batches. The same principles apply for Lr. When saving images for galleries, you should batch resize by height. We recommend 1000px in height. For slideshow images the height should be 1280px. For blog posts, images should be saved by width, and the max recommended size is 1200px.

You can view full image sizing options for Flothemes here.

JPEG Mini

JPEGmini is another great tool used for post processing images and losslessly reducing the picture in terms of bytes. This means that your images will still look great but load faster. JPEGmini is so simple, a toddler could use it. Simply drag the images into the application and let it work. You can also resize images and export them directly to a new folder. You can find more details on JPEGmini here and see how it works here.

WP Smush Pro

Already uploaded your images and don’t have the time to check and re-do them? You can use a plugin such as WP Smush Pro to reduce the file sizes losslessly right in your WordPress dashboard. This is great if you have an existing site or blog and feel that it’s running slowly. Just install the plugin and bulk Smush all your images. Even better, it has the option to smush your images on upload, so going forward you will know that all your images are going to be optimized for web. There is a free version available, however the Pro version does a much better job and at $19 a month is a great option to consider.