Blog

15 Sep 2020

Pagespeed Framework: Final Beta and Pre-release Announcement

Development / 18 Comments

We are excited to announce that the long anticipating Pagespeed framework is close to final. We are going through the final round of testing and ironing the fine details. The project has been taking a long time as we have to re-code some components due to Google Pagespeed Insight algorithm changes. After the previous beta release, we were not satisfied with the pagespeed score, so we further enhanced the lazy load feature to get a better score. Now most Ultra and Shoppe demos score over 90 on Google Pagespeed Insights. The time invested was well worth it. We have the final beta version available if you are interested to give it a try. You can see the new versions being used across all live demos. If you spot any errors, please report them to us. If everything goes well, we will release the official version in a week or two. Another newsletter will be sent on the final release. For now, please enjoy our lightning fast demos below.

Demos:

• Ultra: 97 score (view report)
• Ultra Fitness: 96 score (view report)
• Ultra Construction: 97 score (view report)
• Ultra Yoga: 98 score (view report)
• Shoppe: 91 score (view report)
• Shoppe Sport: 95 score (view report)
• Shoppe Men: 92 score (view report)
• Shoppe Fashion: 97 score (view report)
• Music: 91 score (view report)
• Parallax: 91 score (view report)

Important Notes & Changes:

• Themify Shortcodes: All old shortcodes included in the framework have been discontinued. If you still want to use them, you would need to install the Themify Shortcodes plugin.
• 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).
• Sticky Header: We replaced the Javascript sticky header with CSS position:sticky.
• Device Body Class: All those old device specific body CSS classes (eg. is_touch, is_iphone, webkit, etc.) have been removed. The device body classes were causing inaccurate result in the cached files. For example: when someone views the site with an iPhone, the is_iphone class is added in the cached files. Then another person views the site with a desktop browser, the is_iphone body class remains in the cached files.
• 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.

Final Beta Available

We have the final beta versions available. 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.