With Google and other search engines factoring speed into desktop and mobile search rankings, speed is essential in website design. Google reports on speed metrics in Google Analytics and probably uses some combination of its Speed Index and Pagespeed Insights score. This article shows how we used mod_pagespeed, a speed plug-in, and some manual optimization to improve the Pagespeed score of a complex website.
Pagespeed Insights is a free online tool that measures the performance of a page both on mobile and desktop devices. Pagespeed grabs a page twice, once with a desktop user agent, and once with a mobile user agent. Based on web performance best practices, the higher the score, the faster the site. A score of 85/100 or above is considered a well performing site according to Google (see Figure 1).
Google also provides a server module to help webmasters speed optimize their sites, mod_pagespeed. mod_pagespeed is an open source server module available for Apache and nginx servers. mod_pagespeed automates many of the best practices tested for in Pagespeed Insights, so is a natural solution to improving Pagespeed scores. Optimizing your site manually or with server modules is preferred to plugins as they don't add as much overhead.
We've found that the mobile speed score is usually the lowest score on a typical website. His mobile score was 58/100 on Pagespeed (see Figures 3 & 4), and his desktop score was 75/100. We wanted to see how high we could make his score using mod_pagespeed, and then using manual tweaking and a Wordpress plug-in or two.
After installing mod_pagespeed on his server with the default mod_pagespeed configuration, the scores improved to 70/100 for mobile (see Figure 5), and 84/100 for desktop.
Turns out that flattening @imports wasn't working in the version of mod_pagespeed we were using. @imported CSS files are not optimized in mod_pagespeed, so it is important to "flatten" them and convert them to linked CSS resources.
<style type="text/css" media="screen">@import url(http://www.mymanhattancosmeticdentist.com/wp-content/themes/drwei/style.css) ;</style>
Upgrading to the latest version of mod_pagespeed solved the problem, and allowed us to add lazy-loading images among other things. Here is the initial snippet of the mod_pagespeed configuration file we used with this site.
After upgrading mod_pagespeed to the latest version and upgrading to the configuration file above the mobile score increased to 75/100 and desktop to 86/100 (see Figure 6).
The pagespeed analysis shows that mainly offsite files are the culprits now. We're down to only 1 blocking CSS file, and this is from a plugin.
Note that you must test each change with this plugin, as you can get strange behavior and even take the site down. CSS and Caching caused an error on this site. Your mileage may vary.
After optimizing this complex site we learned a few things. Most importantly the faster your initial theme, the higher the ultimate Pagespeed score. Don't handicap yourself choosing or creating a slow theme, choose a fast one instead. For maximum speed we recommend the following:
A website is never completely finished. There are other things that could be done to speed up this site, but these would take some surgery. Ultimately the site could be recoded from scratch with a lighter theme, but we'd probably lose the dynamic nature of the site that Dr. Wei likes. Here are some additional ideas:
No matter how complex the website, it can be speed optimized. In this article we show how to boost the Pagespeed scores of mymanhattancosmeticdentist.com with mod_pagespeed, some manual tweaks, and the WPOptimize Speed Plugin.
By website optimization on 4 Jun 2015 PM