Optimizing Your Portfolio: Part 3

Optimize your portfolio part 3

Overview: Optimizing Your Portfolio: Examples

This is the final part of our “Optimizing Your Portfolio” series. In this article we will take a look at some real examples of user websites, and provide insight into how to optimize their portfolios. We will cover the most common reasons why your site is scoring poorly. The main items being – caching, image optimization, server response time and page size. I will show the user’s score at a base level before optimization, highlight any issues and then will explain how to resolve them.

 

User Example #1

Kate Lowe – Lovely (LVY) Theme. www.katelowephotography.com
Hosting – Heart Internet shared plan.

Google PageSpeed Insights

Using Google PageSpeed Insights I was able to see that the following items were issues for this user.

 

Optimize images – 700kb of possible reduction on images.
Enable compression – Adding GZip plugin to save around 600kb of data.
Eliminate render-blocking JavaScript and CSS in above-the-fold content – Minifying plugin.
Leverage browser caching – Use of Caching plugin.
Reduce server response time – This may be improved by the caching plugin, however the hosting provider may also be a concern here. If its a shared hosting plan I would recommend upgrading to an alternative hosting provider, such as SiteGroud or Inmotion. Both providers offer WordPress hosted solutions and score highly in stress tests.

Pingdom

Cursor_and_Website_speed_test

When using Pingdom we are trying to focus specifically on the load time of the site. The page size can give an indication on how large your page is, if it’s large it’s going to be a problem for mobiles. The number of requests is the amount of resources the server is asking for, and the grade is the total performance of the page.

Starting Results

Google PageSpeed Insights – 33/100 mobile and 38/100 desktop.
Pingdom (Server Amsterdam) – Perf. Grade – 69/100. Requests 133. Load Time 6.16s. Page Size 4.8mbs.

Analysis and Solutions

As we can see from Google PageSpeed insights, there are multiple items that we can control to improve site speed and performance. The page size is 4.8mb and there are a large number of requests, which we can see from the pingdom results. The objective here will be to enable caching, reducing the server response time; compression for the site, which should reduce the number of requests and the page size. We will also minify the Javascript and CSS further, most notably from additional plugins; and will optimize the images, which again will reduce the page size and response time from the server.

NOTE! Users using version 1.3 of the Flothemes Updater plugin, please deactivate and remove the plugin and install the latest version 1.9. When we switched hosting providers this caused some slow response times for users sites.

Image Optimization

Google PageSpeed Insights – 43/100 mobile and 48/100 desktop (some further reduction can be completed here, however its only 100kb, which will not drastically improve actual load times).
Pingdom (Server Amsterdam) – Perf. Grade – 68/100. Requests 112. Load Time 3.67s. Page Size 4.2mbs. Due to the shared hosting the load times look to be fluctuating depending on the current users requesting files from the server.

Enable Compression and leverage Caching – WP Performance Score Booster

To mitigate this I’ve used WP Performance Score Booster to enable compression and reduce the size of the files being requested by the server.

Google PageSpeed Insights – 65/100 mobile and 71/100 desktop.
Pingdom (Server Amsterdam) – Perf. Grade – 73/100. Requests 112. Load Time 4.25s. Page Size 3.4mbs.

Eliminate render-blocking JavaScript and CSS –Better WordPress Minify

I could see a number of CSS files that could be compressed to reduce the number of loadable resources. Using Better WordPress Minify CSS optimization option, I was able to reduce the CSS code. There were still 2 Javascript queries that could not be removed, and 3 CSS items that are related to google fonts.

Google PageSpeed Insights – 65/100 mobile and 71/100 desktop.
Pingdom (Server Amsterdam) – Perf. Grade – 76/100. Requests 103. Load Time 5.04s. Page Size 3.3mbs. (Size is down, but again note the load time, due to the inconsistency of the server)

Reduce server response time and caching – WP Super Cache

To help reduce the server response time, we are implementing a caching plugin. This means that the site is being served quicker as the files are cached in various servers around the world.

Google PageSpeed Insights – 70/100 mobile and 79/100 desktop.
Pingdom (Server Amsterdam) – Perf. Grade – 77/100. Requests 100. Load Time 2.23s. Page Size 3.4mbs.

End Results

Google PageSpeed Insights – Increase of 37 points for mobile and an increase of 41 points for desktop.

Pingdom – Reduction in page size from 4.8mb to 3.4mb. An increase in the load time from 6.16s to 2.23s, which is significant.

Kate_Lowe_Website_Test_Pingdom

Further Improvements:

I would suggest a switch of hosting provider if the user wants to increase the reliability server response times. The use of a CDN will also improve the site’s overall load time.

 

User Example #2

Caitlin McWeeney – Lovely (LVY) Theme
www.caitlinmcweeney.com
 – Hosting : Name Cheap

Google PageSpeed Insights


Optimize images
– 1.4mb of possible reduction on images.
Enable compression – Adding GZip plugin to save around 500kb of data.
Eliminate render-blocking JavaScript and CSS in above-the-fold content – Minifying plugin.
Leverage browser caching – Use of Caching plugin.
Reduce server response time – This may be improved by the caching plugin, however the hosting provider may also be a concern here. If its a shared hosting plan I would recommend upgrading to an alternative hosting provider, such as SiteGroud or Inmotion. Both providers offer WordPress hosted solutions and score highly in stress tests.

Pingdom

Website_speed_test

Using pingdom we are trying to focus on the load time of the site specifically, the page size can give an indication as to how large your page is, if it’s large it’s going to be a problem for mobiles. The number of requests is the amount of resources the server is asking for, and the grade is the total performance of the page.

Starting Results

Google PageSpeed Insights – 35/100 mobile and 30/100 desktop.
Pingdom (Server Dallas) – Perf. Grade – 73/100. Requests 76. Load Time 5.19s. Page Size 3.2mbs.

Analysis and Solutions

Image Optimization

I was able to reduce the sizes of the images by 1.1mb, there is an additional 300kb that can be reduced for desktop, however using the smaller image here will affect the mobile site. I used Google image optimization options in the mobile tab:

https://flothemes.com/wp-content/uploads/2016/02/Q3Acm4f.png

Google PageSpeed Insights – 42/100 mobile and 45/100 desktop.
Pingdom (Server Dallas) – Perf. Grade – 73/100. Requests 76. Load Time 5.51s. Page Size 2.1mbs.

Enable compression and browser caching – WP Performance Score Booster

To mitigate this I’ve used WP Performance Score Booster to enable compression and reduce the size of the files being requested by the server. I reduced the size by 500kb.

Google PageSpeed Insights – 59/100 mobile and 60/100 desktop.
Pingdom (Server Dallas) – Perf. Grade – 73/100. Requests 76. Load Time 4.95s. Page Size 1.6mbs.

Eliminate render-blocking JavaScript and CSS – Better WordPress Minify

I was able to reduce the number of requests by 32 for the site, showing a small improvement in site loading time, but a larger increase in the site’s performance grade. I used the option to optimize the css and html. Just be wary to test each option when activating as it can break your theme’s styling if done incorrectly.

Google PageSpeed Insights – 59/100 mobile and 60/100 desktop.
Pingdom (Server Dallas) – Perf. Grade – 86/100. Requests 44. Load Time 4.86s. Page Size 1.6mbs.

Reduce server response time and caching – WP Super Cache

Google PageSpeed Insights – 67/100 mobile and 69/100 desktop.
Pingdom (Server Dallas) – Perf. Grade – 87/100. Requests 44. Load Time 2.43s. Page Size 1.6mbs.

End Results

Overall we were able to make some great improvements for the site speed and scores. We increased the scores by 34 for mobile and 40 for desktop. The page speed has improved from 5.19s to 2.43s. The page size has been cut in half to 1.6mb from 3.2. Again for this client, the hosting provider is a shared hosting plan, from a provider that may not score well in stress tests. For improved scores and load times a change of a hosting provider would improve the site further.

page speed pingdom

Google PageSpeed Insights – 67/100 mobile and 70/100 desktop.
Pingdom (Server Dallas) – Perf. Grade – 87/100. Requests 44. Load Time 2.43s. Page Size 1.6mbs.

 

User Example #3

Yvonne Zemke – Crowd Theme
www.yvonne-zemke.de/en
 – Hosting : Hosteurope.de – Shared Hosting

Google PageSpeed Insights

 

Optimize images – 272kb of possible reduction on images.
Enable compression – Adding GZip plugin to save around 630kb of data.
Eliminate render-blocking JavaScript and CSS in above-the-fold content – Minifying plugin.
Leverage browser caching – Use of Caching plugin.
Reduce server response time – This may be improved by the caching plugin, however the hosting provider may also be a concern here. If its a shared hosting plan I would recommend upgrading to an alternative hosting provider, such as SiteGroud or Inmotion. Both providers offer WordPress hosted solutions and score highly in stress tests.

Pingdom

Yvonne Zemke Website speed test

Using pingdom we are trying to focus on the load time of the site specifically, the page size can give an indication as to how large your page is, if it’s large it’s going to be a problem for mobiles. The number of requests is the amount of resources the server is asking for, and the grade is the total performance of the page. Yvonne’s site has actually scored quite highly initially in this test. This shows that Google PageSpeed insights isn’t necessarily a good indicator of speed.

Starting Results

Google PageSpeed Insights – 34/100 mobile and 43/100 desktop.
Pingdom (Server Amsterdam) – Perf. Grade – 84/100. Requests 58. Load Time 2.11s. Page Size 2.6mbs.

Analysis and Solutions

Image Optimization

I was able to reduce the sizes of the images by 300kb. I used Googles image optimization options in the mobile tab:

https://flothemes.com/wp-content/uploads/2016/02/Q3Acm4f.png

Google PageSpeed Insights – 38/100 mobile and 48/100 desktop.
Pingdom (Server Amsterdam) – Perf. Grade – 83/100. Requests 57. Load Time 2.26s. Page Size 2.3mbs.

Enable compression and browser caching – WP Performance Score Booster

To mitigate this I’ve used WP Performance Score Booster to enable compression and reduce the size of the files being requested by the server. I reduced the size by 600kb.

Google PageSpeed Insights – 65/100 mobile and 82/100 desktop.
Pingdom (Server Amsterdam) – Perf. Grade – 96/100. Requests 57. Load Time 2.00s. Page Size 1.7mbs.

Eliminate render-blocking JavaScript and CSS –Better WordPress Minify

I was able to reduce the number of requests by 18 for the site, showing a small improvement in site loading time, but a larger increase in the site’s performance grade. I used the option to optimize the css, Javascript and html. Just be wary to test each option when activating, as it can break your theme’s styling if done incorrectly.

Google PageSpeed Insights – 65/100 mobile and 82/100 desktop.
Pingdom (Server Amsterdam) – Perf. Grade – 95/100. Requests 39. Load Time 1.96s. Page Size 1.7mbs.

Reduce server response time and caching – WP Super Cache

Google PageSpeed Insights – 67/100 mobile and 87/100 desktop.
Pingdom (Server Amsterdam) – Perf. Grade – 96/100. Requests 39. Load Time 1.2s. Page Size 1.7mbs.

End Results

Overall we were able to make some improvements for the site speed and scores. The site was already loading quickly, however it was scoring poorly with Google PageSpeed insights. We increased the scores for Google by 33 for mobile and 44 for desktop. The page speed has improved from 2.15s to 1.20s. The page size has been reduced by 900kb to 1.7mb.

Website speed test yvonne

Google PageSpeed Insights – 67/100 mobile and 87/100 desktop.

Pingdom (Server Amsterdam) – Perf. Grade – 96/100. Requests 39. Load Time 1.2s. Page Size 1.7mbs.

 

Conclusion

This concludes our series on Optimizing Your Portfolio. As you can see, many sites have the same pitfalls – caching, compression, unoptimized images and at times unreliable hosting services. Thankfully many of the items are easily mitigated with some work and a few plugins. You can also see that Google PageSpeed insights isn’t the be all, end all. It’s only an indicator for items that can be improved, it does not test page speed. When testing for speed, please remember to use pingdom, and select a server that is close to your location. You can see more details in the previous posts from this series (Part I and Part II). Each optimization and analysis took on average 3-4 hours. With larger number of images on the homepage it may take longer as many images may have to be replaced to improve the speed.
Let us know if you have any questions.

Flothemes Team,
Empowering You.

 

What Are You Looking For ?