Overview: Optimizing WordPress and your Portfolio
There are a number of reasons why a site may be slow. Low-cost servers which are often slow, inefficient coding (theme or plugins), and non-optimized images. These are the three main troublemakers when it comes to your website’s poor performance. In most cases these items can be solved, some can be solved with plugins, others may require a change in hosting and a review of your sites content.
The following guide is the first in our series for Optimizing Your Portfolio. We’ll review and explain site Optimization – how to test your site, and the various optimization plugins that are available to help improve your site speed. The second part from this series will explain why Hosting is important, the use of Content Delivery Networks (CDN), and how to optimize correctly your images for the web. You can also download a free copy of our Beginner’s Guide to SEO ebook to learn and understand all SEO basics and build a strong and efficient SEO strategy.
How to test your site speed and debug issues
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 GT Metrix, 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 GT Metrix. 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.
- 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.
GT Metrix – Speed
A much better way of actually testing your page speed is using a resource such as GT Metrix or Pingdom. GT Metrix 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. 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 or check for yourself using WHO.IS entering your domain name and then in the 4th tab DNS records there will be a location (not all hosts will show this):
GT Metrix tools page
GT Metrix will summarize a 5 number of metrics for page loading time. The
- PageSpeed score
- YSlow Score
- 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 grades for PageSpeed and YSlow, Google will only be concerned about the loading time of your site, so will your consumers.
To get an accurate reading of your page time you should run the test several times, making sure to select the server that is closest to your hosting server. To do this, first set up an account with GT Metrix, then before running a test, select the server region:
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.
To find the a more accurate loading time of the page, run a test, then go to timings, and then look at the onload time:
Record your Google PageSpeed Insights and GT Metrix 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 GT Metrix. 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.
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 GT Metrix and Google PageSpeed Insights.
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.
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.
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.
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
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.
In this article we have scratched the surface and hopefully the optimization plugins reviewed will have helped with some improvements to your site’s loading time.
Still feel that your site isn’t as fast as it should be? In the next article we will cover more details on optimizing your portfolio, specifically focusing on hosting, the use of content delivery networks (CDNs) and image optimization before uploading to your site. Stay tuned.