Pagespeed optimizations 

Probably you are already aware of this topic and have checked this kind of useful articles
on how to optimize your website for better loading speed and Google’s pagespeed results:

https://www.keycdn.com/blog/google-pagespeed-insights-wordpress

https://www.wpbeginner.com/wordpress-performance-speed/

To keep this short, here is the list of criterias which should be met:

1. Usage of web-optimized images & media
2. Smart image loading
3. Minimization of client-server requests:
– minimization of number of scripts used on the page
– minimization of number of styles used on the page
– minimization of number of media & other resources used on the page
4. Proper positioning of page’s styles and scripts
5. Usage of html minifiers
6. Usage of webpage caching
7. Fast server response time
8. Usage of CDNs
In addition, specifically for WordPress, one more point is important:
9. Use as less third-party WP plugins as possible

Brief explanation of this criterias:

Usage of images & media, optimized for web (in your todo):

Optimize images you are using on your page. Using large not optimized images affects the
loading speed of your pages, resulting in lower pagespeed ratings. You can use such online tools like:

https://www.jpegmini.com/

https://tinypng.com/

to get the most of image  compression. Or you can use traditional tools like “Save for web” in Photoshop. The main aim is to reduce the filesize of your images for better pagespeed scores. Another useful recommendation is to use modern image formats for web. For example WebP. Recently, Google updated the logic of their pagespeed tool and now PageSpeed Insights strongly recommends to use WebP format for images, increasing the pagespeed score in case it is really used.

Smart image loading (already done, can be enabled in Theme Options)

TheGem includes one very useful feature, allowing you to enable the image loading on your webpages in a smart way. In common terms it is a lazy loading of media resources upon arrival of the browser/device viewport. In this way, by loading your webpage, all images below the fold (which are not immediately displayed for user) are physically not loaded. And only by scrolling down the page, as soon as this images appear in above the fold area they are being loaded and displayed. In order to avoid any unpleasent loading interruptions, there is a special “buffer” zone below the fold, which enables the image loading some pixels before this images appear in above the fold area. You can enable and set this feature in TheGem here:

 TheGem for Elementor theme version

TheGem for WPBakery theme version

By default, this feature is disabled and can be enabled with this setting:

 TheGem for Elementor theme version

TheGem for WPBakery theme version

You can control the buffering area with this setting:

 TheGem for Elementor theme version

TheGem for WPBakery theme version

You can enter an any value in pixels here; we recommend to use 400-600 pixels.

In case your website uses any caching or minification plugins or technologies (see above;
we strongly recommend to do this) you need to activate this setting:

 TheGem for Elementor theme version

TheGem for WPBakery theme version

in order to get this feature to properly work.

Minimization of client-server requests (already done)

While using TheGem you should not care about this point, because all scripts and styles in TheGem are already optimized to be kept at the lowest needed level. However, while building your own new webpages, keep in mind, that the higher number of used media content (for example images) results in higher number of server requests.

Proper positioning of page’s styles and scripts (already done)

Again, you should not care much about this point, because all scripts & styles in TheGem are already positioned properly to get the highest loading pagespeed scores.

Usage of html minifiers (in your todo)

It is strongly recommended to minify the html code of your web-pages to achieve better pagespeed result. For code minifications you can use one of the following plugins:

https://wordpress.org/plugins/bwp-minify/
https://wordpress.org/plugins/wp-super-minify/
https://wordpress.org/plugins/w3-total-cache/
https://wordpress.org/plugins/wp-super-cache/

Usage of webpage caching (in your todo)

For faster delivering of static content Google recommends to use webpage caching. In this way all your pages are getting cached and saved on your server, so by requesting this pages the delivery occurs in much faster way. For webpage caching you can use one of the following plugins:

https://wordpress.org/plugins/w3-total-cache/
https://wordpress.org/plugins/wp-super-cache/

Server response times (in your todo)

This is how quick your server with your website reacts to client’s requests. In case the response time is low, you need to contact your server’s provider to resolve this issue or, alternatively, use another server & hosting provider

Usage of CDNs (optional, recommended)

CDNs are an excellent way to speed up your webpage loading by delivering it to the user from the nearest available server, in this way reducing the number of nodes needed to deliver your content. If your website audience come from all around the world or from different countries, we recommend to use CDN services. Another useful feature here is an option to use smart image compression (available via CloudFlare, https://blog.cloudflare.com/introducing-polish-automatic-image-optimizati/). If you choose to use such tools like “Polish” in CloudFlare, you don’t even need to care about image optimization by yourself – all this will be automatically done by this service and you will get excellent results

Use as less third-party WP plugins as possible (optional, recommended)

The last thing we would strongly recommend is to keep your WordPress installation as deflated as possible. Try to avoid any third-party plugins, which are not really needed for your project / websites. Firstly, it could be a great security leak (as the experience of the previous decade shows) and secondly, it brings additional code, scripts and styles which can slow down your website.

Other tips

a) We would recommend to use „Load more“ pagination style for blogs, portfolios, galleries etc. This type of pagination is preferable by Pagespeed Insights, because in case of classic pagination all items are being loaded at once

b) You can use Chrome’s developer tools to check the size of your webpages. Check https://developers.google.com/web/tools/chrome-devtools/#network As stated above, try to keep your pages deflated in size and number of resources being requested