Okay
  Print

Increasing Pagespeed

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. For more information on image optimization please check this useful article

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:


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


You can control the buffering area with this setting:


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:


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/fast-velocity-minify/
https://wordpress.org/plugins/wp-super-minify/
https://wordpress.org/plugins/w3-total-cache/
https://wordpress.org/plugins/wp-super-cache/
https://wordpress.org/plugins/wp-fastest-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/

https://wordpress.org/plugins/wp-fastest-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