Blog

How we got our web site a 100% score in Google’s PageSpeed Insights - and why you shouldn’t

Jan 11th, 2018 by Max Tokman

Quick intro:

PageSpeed Insights is an analysis and guidance tool for improving web sites' UX. As with other Google web tools, its aim is to encourage web site optimization for faster SEO crawl and indexing. PageSpeed Insights’ analysis focuses primarily on improving load speed for the first screen (https://developers.google.com/speed/docs/insights/about). Unarguably, people prefer faster sites to slower sites and the importance of near instantaneous loads can be understood by using e-commerce as a metric, in which case a 100 ms (millisecond) increase in web site’s load time can result in 1% drop in sales (http://www.globaldots.com/how-website-speed-affects-conversion-rates/).

While encouraging use of PageSpeed Insights for site optimization, Google does not make any representations about using its results in its search algorithm itself. Google certainly does use PageSpeed Insights to rank search results, at least for mobile. And while a lot of established digital properties might have a poor PageSpeed Insights score, new sites or those fighting for visibility would do well to aim for the highest score possible.


Why we did it:

I am a firm believer that actions speak louder than words. To that effect, we try to make our own web site best represent our work in Drupal development and site optimization. One of our internal projects for 2017 was to attain a 100% PageSpeed Insights score for our own website, both to improve our web site’s visibility and performance but also as a study on the possibilities as it applies to our clients’ sites.


Here’s how we did it and why you shouldn’t.

off_site_services_drupal_wordpress_web_development_pagespeed_insights_score_0.png

1. We made all the changes required by PageSpeed to achieve the 100% score, but that score is not a set value. It can vary day to day, sometimes for no apparent reasons and without any changes to the web site itself. One day it will be 100% and the next day it will drop to 95%.

2. To achieve the score, especially on a Drupal site, you have to use code hacks, writing code outside of the framework. This creates two problems - it violates established principles of Drupal development and creates issues with future updates. Ideally, all website code will be done within a specific framework and web site’s core and modules are updated with security and maintenance updates as those become available. By replicating page styles via https://www.sitelocity.com/critical-path-css-generator so they load per PageSpeed Insights’ requirements as soon as the content of the first screen becomes available, we had to reference a separate custom CSS file that needs to be kept in sync with styles used on the site, and edited separately if the web site's CSS are modified.

3. One of the recommendations was to minimize calls to external resources, such as Bootstrap via CDN, fonts and JS libraries. Calling on those external resources is a standard practice, as it keeps the library maintained for all sites at one central location. By copying assets to our own server we introduced another maintenance requirement, as now it is our responsibility to keep localized resources up to date. This is done via cron script on a daily basis, but in reality cron scripts and other types of scheduled tasks have a chance to fail after server updates and require ongoing monitoring and manual restarts as necessary.

4. In theory, any framework site should update seamlessly within a major version (for instance, within 7.xx or 8.xx for Drupal), and the few modules exceptions that cannot update are documented in the ongoing maintenance notes. Modifying a Drupal site to get the 100% score on PageSpeed Insights introduces such a degree of site customization, covered in point #2 above, as to make site maintenance notes very extensive and rather challenging. While it might work for a web development shop that has the internal resources for this type of support, it might be hard to justify the added maintenance expense to a client, given the elusive nature of the 100% score.

To sum it up, we certainly recommend implementing PageSpeed Insights suggestions to the fullest, as long as these changes are natively supported by the web site’s underlying technology. Once Google’s modifications begin to require changes that necessitate complex maintenance procedures, the value of this incremental score increase is likely not to be justified.

Categories:

wordpressSEOweb designWeb DevelopmentHTML5productionresponsive designDrupaldesignCSSPhotoshopsecurityADAgooglebeta testingautomationharness-btoolsGoogle AnalyticsTestingmarketingFlashproduction tipstypographyAdobe Museweb imagesite speedintegrationswebsite buildingtechnologiesJavaScriptfirefoxbrowsercomplianceserver securityquality controlfontsthemesMicrosoftmodulesApplemobile websiteapp developmentplug-inAPIweb standardsweb preflightiOSInDesignE-commerceOpenSSLSSLIE8JSONQAmobile devicestabletsAdobe AirRIAsInteraction MetricsAdvertisingLong TailExporting from InDesign to PhotoshopInDesign to Photoshop conversionresponsive buildWordpress pluginshorizontal layoutBacklinksAdobegTLDscustom domain suffixesdevelopmentwireframeaugmented realityweb awardprogramming awardPhotoshop Layer compsdesign best practicesmobile app challengeapp lifespannon-Flash animationHTML5 animationAdobe EdgeiPad screen templateICANNweb development awardvertical layoutvideo playbackfaildudrevolutionary softwareInDesign to HTMLcommunicationclienthtmlimage sizesoftwareimage compressionweb compatibilitybreakpointresponsive statePDFAdobe Edge ReflowconvertingEdge ReflowParfaitweb design softwareogvcloudawardhostseleniumFoundationBootstrapCKEditor3rd partyAppleScriptecommercetechnologycollaborateupdatevulnerabilityCMSwebsiteiPhoneCSS3Ps. and CSS HatProject Parfaithigh fidelityconceptcodecwebmformatweb developerssidney garberVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunescustom fontsHTML4web-fontsRGBweb colorsrelationship marketingOSSW3Cfragmented technology landscapeAndroidvideo sizegammamp4microsoft’s project natalUDIDvideoCVE-2014-0224integrationLinkedInFacebookWindows XPInternet Explorer 8interactive banner adsbrochurewaresony playstationinstant video playback solutionHeartbeatonline subscriptionWebOSabletCMS for Flashoptimizednintendo wiioutsourcing
2018 WP plugins recommendations

Jan 11th, 2018 by Max Tokman

Here's our pick of WP plugins, recommended for use in 2018 Caldera Form is a free and powerful plugin that creates responsive forms with a simple drag and drop editor that makes it easy to create forms for WordPress.  The plug-in  includes conditional logic, anti-spam, notification emails, and databas

Identifying 10 common web site caching issues and their solutions

Jan 12th, 2018 by Max Tokman

Caching is both a blessing and a bane for web sites.  Cached files and images allow end user to see a previously visited web site almost instantaneously, and those same cached assets can ruin user's experience by serving outdated code that conflicts with recent programming changes.  Besides web pages there ar