How to ace the Google PageSpeed test (100/100) with React and Next.js
PageSpeed Insights is a free online tool provided by Google, which measures the performance of your website. Both mobile page speed and desktop scores are shown, as well as providing suggestions on how that score may be improved.
Google has frequently refered to PageSpeed as an important ranking factor for both Google Search and Google Ads (e.g: Speed is now a landing page factor for Google Search and Ads). But it’s not just about ranking well — fast responsive websites make a huge difference to a site’s “bounce rate” and “conversion rate” metrics. 47 percent of consumers expect a web page to load in two seconds or less. 40 percent of consumers will wait no more than three seconds for a web page to render before abandoning the site.
What are the key Google PageSpeed metrics:
- First Contentful Paint — the point at which the very first piece of content is delivered to your page via the browser
- First Meaningful Paint — The point at which the user can see a substantial, meaningful piece of content in the browser window
- First CPU idle — the point at which your device has loaded enough of the webpage content to be able to handle user inputs such as scrolling, clicking buttons or typing inputs into fields
- Time to interactive — the point at which the site is fully loaded and can be interacted with by the user
- Estimated Input Latency — A measure of how well the javascript code translates to a responsive webpage (i.e. not laggy in the browser)
Each metric has a different weighting:
Factors that typically lower a website’s Page Speed score:
- Using oversized images: all images uploaded onto your site should match the pixel size which they are displayed by the browser. Typically this practice goes awry when using WordPress or other CMS products and the responsibility for uploading images is given to an inexperienced or non-technical employee.
- Slow hosting provider: often companies will naively opt for a cheap hosting solution with a budget company, not understanding the importance of high performance website hosting. Many of our clients have had painful experiences with high profile, budget hosting providers that fail abysmally to deliver performant hosting.
- Uncompressed assets: javascript files and images can be compressed using images compression tools like gzip.
- Uncached endpoints/server-side requests: often sites which use an API on the back-end neglect to provide caching for endpoints which would reduce loading times.
The shift to client-side applications
Traditionally the vast majority of a webpage’s processing occurred on the server-side using languages such as PHP, Ruby, Java, .Net or Python. However in recent years there has been a significant technological shift towards modern client-side javascript frameworks such as React, Angular and Vue.
Front-end javascript frameworks have shattered the traditional programming paradigm for web applications, redefining the structure of web applications. Far more of a website’s content is now loaded on the front-end (using javascript files). This includes historically server-side functionality such as: data retrieval, state management (sessions), URL management, business logic and data validation rules.
Shifting so much functionality from the server to the client often leads to page speed performance issues affecting many new build applications. Slow-loading web pages is a key issue. Google’s “first contentful paint” and “first meaningful paint” criteria, important ranking metrics, tend to rank lowly with modern JS frameworks. A browser is forced to wait for all assets to load, then javascript files are processed to render the application — a more complex, slower process than server-side rendering.
The React framework & SSR
React being our front-end tool of choice we decided to research Server-side rendering solutions for the framework, seeking to improve performance and deliver a performance-optimized solution for our clients.
Server-side rendering is an attempt to combine the benefits of a modern JS frameworks such as React (rich interface, smooth browser experience) with some of the benefits of server-side rendering, such as faster load times and search engine optimization (SEO) through easily indexable content.
SSR with Next.js offers developers a vitally important function and that is the ability to render different aspects of the application, such as essential API calls, on the server-side. Imagine a blog page, able to efficiently grab post content, render it to the browser server-side, then finish rendering lower priority content client-side after initial page load. In such a scenario the google PageSpeed metrics (e.g. “first contentful paint” and “first meaningful paint”) are catered to, as important “meaningful” content is quickly loaded. Less significant content is loaded subsequently and unobtrusively by the browser.
Major SEO ranking factors such as page title and meta tags should also be pre-rendered server-side, as dynamic tags (e.g. a product page title on an ecommerce site) may not be parsed correctly by the search engine, resulting in major indexation issues.
One of the major drawbacks of modern javascript frameworks, not widely understood, is that front-end rendered applications do not result in an easily indexable source code. Application code remains in javascript files processed by the client, no meaningful html source code file is generated.
Implementing Server-side rendering with Next.js will allow your application to generate search engine friendly html source code. By default React apps only include the root element where the javascript source file is loaded. Javascript renders the page content only on the client-side (as a virtual DOM), indexation thus relies upon search engine javascript indexation, contingent upon compatible developer code practices.
Next.js in production mode also provides javascript file compression and code bundling for the client which greatly speeds initial loading times.
Another client-side optimization which should be a staple of any website deployment, is CSS file compression. Tools such as SASS and Gulp, which can be combined with React, allow developers to minify/compress their style rules into a single file, or even create separate files such as an essential stylesheet for base styles and a non-essential styles file, loaded after initial rendering to maximise page speed performance.
Typically developers rely on 3rd party solutions for common tools such as the omnipresent Twitter Bootstrap.js for CSS or the Google maps API. To enhance performance, developers should look to load these assets from a remote CDN if possible. Remote CDN’s relieve the burden on a site’s internal server infrastructure to deliver assets and allow the client browser to grab assets from multiple locations minimising blocking delays in the asset pipeline.
Developers should also employ server-side optimisations for internal API requests, such as query caching and image compression which is something most host providers will permit.
By rebuilding our site with Next.js and throwing in some server-side optimizations, we were able to shift the page speed scores of our site (built in React) from 75 & 65 to a respectable 100 for desktop page speed and 99 for mobile page speed.
Click the link here to test your site’s PageSpeed: https://developers.google.com/speed/pagespeed/insights/
Useful links:
- React https://reactjs.org
- Next.js https://nextjs.org
- Speed is now a landing page factor for Google Search and Ads https://developers.google.com/web/updates/2018/07/search-ads-speed
- Is React SEO friendly https://moz.com/community/q/is-using-react-seo-friendly
- Gzip compression support for AWS — https://aws.amazon.com/blogs/aws/new-gzip-compression-support-for-amazon-cloudfront/
- An introduction to Server-side rendering React https://alligator.io/react/server-side-rendering/
- What is caching and how it works https://aws.amazon.com/caching/
Marc Rice is a freelance startup consultant and software engineer, founder of Inspire Digital, a web agency based in the UK, offering modern high performance web applications, combined with digital marketing, hosting and CRM solutions.
📝 Read this story later in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
