Blog

23 Jul 2020

Pagespeed Framework Update & New Beta

Development / 33 Comments

We would like to update you on the Pagespeed framework that was announced a few months ago. There has been a long delay because Google Pagespeed Insights changed their metrics when we were close to completion. So we ended up re-coding a lot of stuff to comply with the new metrics. Before, Google just evaluated the page size, HTTP requests, scripts, code practices, etc., but now they also audit user experience as part of the pagespeed score. They implemented some new metrics such as Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) to determine how user friendly your page is rendered on user's screen. For example, if you have a large element (whether it is a text, image, video, map, or slider) that takes a long time to load, it will trigger a long LCP. Or if you have an element that causes layout shift during page render (eg. inline popup, ad, social embeds, etc.), it will trigger the CLS issue. The long loading LCP and CLS will result in lower pagespeed score. For more information, read Google's Web Vitals.

The new changes have made it harder to score 95+ on Google Pagespeed Insights for everyone (including our new framework). If you refer to our previous post, the demos used to score 97 to 99 but are now down to 90 to 92 due to the new changes. The good news is we've tackled the new metrics pretty well. Most demos (even with heavy content) can still score 90 and up. In this post, we will share the Ultra and Shoppe beta version and show a few pagespeed comparisions between the old vs new version.

Old vs New Ultra Pagespeed

With the same demo content and plugins activated, the new Ultra can score 95 whereas the old version is 60/100. If you don't see the right score, try to click on "Analyze" to run the report again. Sometimes it takes a few analysis to get the accurate report as server connection can affect the result.

• New Version: 95/100
• Old Version: 60/100
• View Demo
• View Google Pagespeed Report

Ultra Fitness

• New Version: 91/100
• Old Version: 59/100
• View Demo
• View Google Pagespeed Report

Ultra Construction

• New Version: 91/100
• Old Version: 72/100
• View Demo
• View Google Pagespeed Report

New Shoppe Pagespeed

Again, we set-up a few Shoppe demos to audit the pagespeed score.

• New Version: 82/100
• Old Version: 55/100
• View Demo
• View Google Pagespeed Report

Largest Contentful Paint (LCP) Issue

You may wonder why Shoppe homepage can't achieve 90+ score. It is because Shoppe homepage has a big slider in the viewport that triggered the Largest Contentful Paint (LCP) issue. Since the large slider has high resolution images, it increases the LCP load time. To prove this point, we've duplicated the homepage to "Home 2" and added a large text block in the viewport, so that text block would be used to measure the LCP. Because text loads faster than the slider images, the score instantly jumps from 82 to 93 (view pagespeed report).

If you have a text based page like this sample page (without any images, videos, embeds, sliders, etc.), our themes can score 95 to 99 (see report).

Shoppe Men Fashion

• New Version: 95/100
• Old Version: 65/100
• View Demo
• View Google Pagespeed Report

Shoppe Fashion

• New Version: 91/100
• Old Version: 66/100
• View Demo
• View Google Pagespeed Report

Beta Available

We have the beta versions available that is very close to the final version. Please download them, give them a try and help us by reporting any bugs you may encounter. Note that the beta versions do not work with the old Builder addons. Do not activate any Builder addons while testing the beta. Also, do not use the beta theme on your live site.

Download:

• Download Ultra Beta Zip
• Download Shoppe Beta Zip

To test the beta version:

• Download either Ultra Beta or Shoppe Beta zip and install. Warning: do not install the beta version on your live site (try it on your staging or test site).
• Go to Themify > Settings > Themify Settings > Performance and enable the following options to get the optimum result:
  • Enable Themify Cache - This will minify the HTML output on the frontend and create a static HTML file on the server. The cached files will be served next time the visitors view the same page. Enabling Themify Cache can speed up page load on the whole site and reduce your overall server processing resources.
  • Enable Gzip Scripts - It will use the compressed scripts packed in the theme and framework. This can reduce the script file size transfer.
  • Enable Webp Image - Webp is a new image format invented by Google that can further reduce image file size and speed up the page load.
  • Defer jQuery - Many themes and plugins use jQuery Javascript library including Themify. Deferring jQuery load can prevent render blocking. Some plugins might require jQuery in the <head>. If you find plugin conflicts related to Javascript errors, try to uncheck the defer jQuery option.

To check your site pagespeed:

• Once you have the test site with the beta theme installed, go to Google's PageSpeed Insights
• Enter your site URL and click "Analyze". Note: you should analyze a few times to get the average score because server or connection issues may affect the report.
• It will show you the score report on desktop and mobile (the higher the score the better).
• If your site doesn't score 90 or higher, please report it to us and we will assess it.

Important Notes & Changes:

• Child theme: if you have modified PHP templates in a child theme (eg. header.php, footer.php, etc.), you might need to redo the child theme templates again because there have been a lot of changes in most templates.
• Icons: In the old version, the entire icon font file is loaded for all icons (eg. the icons that you insert in Icon, Accordion, Menu, Tab module, etc.). Now the icons are inserted as individual SVG icon (ie. it only loads the inserted SVG icon rather than the whole icon font file).
• Addons: The new framework does not work with the old Builder addons. If you are using the beta version, please do not activate any addons. On the final release, you need to update all addons together.

Bug Report & Feedback

As usual, if you encounter any issues or bugs, feel free to contact us or comment on this blog post below. This update was possible with the help of all our team, as well as all of you! We hope to finalize it very soon and help all Themify users to have a faster site and higher SEO rank.