How to achieve good Pagespeed/Gtmetrix rating in Wordpress with free solutions

Thrash4875

First, excuse my English as I'm not a native speaker. I'd like to share some strategies I use to optimize my Wordpress sites:
1 - Use a panel with Openlitespeed support, as it has already proven to be superior to Apache and Nginx in benchmarking tests (you can search the internet for some independent tests). I recommend Cyberpanel;
2 - Use the LiteSpeed Cache plugin to configure the minification of html, javascript, css, cache, among other resources. It has the same performance as WP-Rocket and the free options are enough to achieve scores between 95-100
3 - Display images in Webp. The WebpExpress plugin is free and converts any images you upload to this format automatically. The developer said he took time off from the project for personal reasons, but plans to resume soon;
4 - Use an SEO optimized theme. Themes for this purpose are built more carefully because the developers do their best to remove all the useless junk (required fonts and scripts, optimize images, etc.). Avoid Themeforest at all costs!

Some of my metrics. I don't have any expenses with the website other than the monthly VPS payment, I only use free options:

• https://i.imgur.com/fq4RqZA.png
• https://i.imgur.com/e66yXD2.png

kidrock

Litespeed cache plugin has in-built Webp optimization feature. So why do you need extra Webpexpress plugin?

Thrash4875

@kidrock said:
Litespeed cache plugin has in-built Webp optimization feature. So why do you need extra Webpexpress plugin?

Image optimization by the plugin is associated with a paid service, quic.cloud. The advantage of using WebpExpress would be having a free solution for the same purpose, since it automatically converts all images sent to the server into webp format.

stoned

I currently get 100% on GTMetrix, and 100% for desktop, and 93% for Mobile on my site.

Here are Pagespeed scores. Desktop is 100%

Mobile is at 93%

What do you think about using static sites? They are ridiculously fast. Do you need a DB driven dynamic site? Can your content be served statically? WP is just a CMS, easy to use, it's why people use it, GUI, clicky, etc. etc. but if you can get the same from a static site backend, JAM stack, and a GUI front end for it, like Hugo or Jekyll etc. or a self hosted Netlify type deal, that may be better. It could give you what you want. There maybe options for WP to generate static versions of your pages which don't need/require dynamic DB based data pulling on site.

General tips:

• Use HTTP3/QUIC instead. Use caching. Use CDN. Use memcached. Cache common DB Queries and their results so you don't need to repeat that again and again.
• Optimize all the images on your site, use a site like https://tinypng.com/, pngcrush, jpegoptim, etc. to optimize all images for the web.
• Make sure nothing else is loaded other than what's actually dispalyed in the viewport.
• If users have not scrolled down, images have no reason to load on pageload, only images that load should be in the viewport. Implement lazy loading of images.
• Reduce usage of javascripts, fonts, and image, and any other resources you don't use or need.
• Ask yourself this, does my site really need to have all these bells and whistles? Fonts? Tons of plugins and scripts that do this or that but what actual functionality do they serve for the business needs?
• Can you find static alternatives for anything on there?

I embed all my CSS/Js in the html markup itself, to reduce additional requests. Try to reduce the number of scripts, fonts, css, and images you have. If you can, do so. If using libraries and etc and it's not possible, then don't, it's not that big of a deal. Just remove anything that is not necessary for business functionality.

If pagespeed score are very important, you'll have to give up few things in order to get what you want.

@Thrash4875 said: Image optimization by the plugin is associated with a paid service, quic.cloud.

Those not looking to pay for more plugins to optimize images, try installing nginx pagespeed module on your server, or manually optimize the images using the software I suggested.

If you put your page into pagespeed, let it give you results, there should be an option in the results to download a zip of your images optimized/compressed by Google. That used to be a feature, so I'm hoping it still is for some people.

If you want, I am available for hire to optimize your website for you. I've been in the WebDev industry for roughly 20 years now. Full Stack LAMP/LEMP dev and general software development, system administration, networking, etc. etc. Trying to be a one man IT solution! Please DM me if interested. Thanks. Cheers and good luck!

kidrock

@Thrash4875 said:

@kidrock said:
Litespeed cache plugin has in-built Webp optimization feature. So why do you need extra Webpexpress plugin?

Image optimization by the plugin is associated with a paid service, quic.cloud. The advantage of using WebpExpress would be having a free solution for the same purpose, since it automatically converts all images sent to the server into webp format.

Quic cloud is free for 1K images. Does WebpExpress convert all or it has limitations too?

Thrash4875

@kidrock said:

@Thrash4875 said:

@kidrock said:
Litespeed cache plugin has in-built Webp optimization feature. So why do you need extra Webpexpress plugin?

Image optimization by the plugin is associated with a paid service, quic.cloud. The advantage of using WebpExpress would be having a free solution for the same purpose, since it automatically converts all images sent to the server into webp format.

Quic cloud is free for 1K images. Does WebpExpress convert all or it has limitations too?

It has no restrictions. It is a free plugin in all its functions because it only uses the server hardware to do the conversions and display the images

Ympker

@stoned as for wp and static sites: Since I switched to Bootstrap powered Picostrap and LiveCanvas Plugin, my site has been crazy fast. Might be worth checking out if op is fine with bootstrap.

stoned

@Ympker said:
@stoned as for wp and static sites: Since I switched to Bootstrap powered Picostrap and LiveCanvas Plugin, my site has been crazy fast. Might be worth checking out if op is fine with bootstrap.

I'll check it out. I personally strip away everything from every CSS framework which isn't in use.

I can share my CSS postprocessing rules here as example:

 ignore: [
    ".alert-dismissible",
    ".back-to-top-link",
    ".bs.carousel",
    ".carousel-inner > .active.left",
    ".carousel-inner > .active.right",
    ".carousel-inner > .next",
    ".carousel-inner > .next.left",
    ".carousel-inner > .prev",
    ".carousel-inner > .prev.right",
    ".close",
    ".collapse",
    ".collapse.in",
    ".collapsing",
    ".community",
    ".fa",
    ".fa-angle-down.open",
    ".in",
    ".logged-in .navbar-default",
    ".logged-in .navbar-fixed-top",
    ".modal",
    ".modal.in.modal-dialog",
    ".navbar-affixed-top",
    ".navbar-collapse",
    ".navbar-collapse.in",
    ".navbar-fixed-top",
    ".navbar-inverse .innovations.navbar-toggle.open",
    ".navbar-toggle.open",
    ".noscript-warning",
    ".open > .dropdown-menu",
    ".open > a",
    ".open",
    ".page.calendar .events .panel:hover .fa-angle-down.open",
    ".post-content a",
    ".single-innovation .navbar-inverse .innovations.navbar-toggle.open",
    ".slide.bs.carousel",
    ".visible-xs",
    /(#|\.)(open)/,
    /(#|\.)dropdown(\-[a-zA-Z]+)?/,
    /(#|\.)modal(\-[a-zA-Z]+)?/,
    /(#|\.)navbar(\-[a-zA-Z]+)?/,
    /(#|\.)owl(\-[a-zA-Z]+)?/,
    /\.#post-content/,
    /\.cosmic-\w+/,
    /\.dropdown/,
    /\.drugs/,
    /\.navbar/,
    /\.open/,
    /\.post-content/,
        ".community",
        ".panel *",
        ".tagcloud",
        "div",
        "img",
        "img-responsive",
        "#float-toc a",
        "#float-toc",
        "#innovations.collapse.in",
        "#post-content *",
        "#ToC",
        "#TableOfContents *",
        ".affix-top",
        ".alert-danger",
        ".fa-book",
        ".fa-leaf",
        ".fa-newspaper",
        ".fa-newspaper-o",
        ".fa-shopping-bag",
        ".fade .modal-dialog",
        ".fade",
        ".fade.in",
        ".modal-backdrop",
        ".modal-backdrop.fade",
        ".modal-backdrop.in",
        ".modal-body",
        ".modal-content",
        ".modal-dialog",
        ".modal-document",
        ".modal-header",
        ".modal-open",
        ".modal-scrollbar-measure",
        ".modal.fade.in",
        ".modal.fade.modal-dialog",
        "a",
        "h1",
        "h2",
        "h3",
        "h4",
        "h5",
        "h6",
        "img",
        "li",
        "nav",
        "ol",
        "table",
        "ul",
        "ul.page-numbers li a.prev",
        "*:before",
        "*:after",
        "h1:before",
        "h2:before",
        "h3:before",
        "h4:before",
        "h5:before",
        "h6:before",
  ],
});
const autoprefixer = require("autoprefixer")({});
const cssnano = require("cssnano")({
  preset: [
    "default",
    {
      discardComments: {
        removeAll: true,
      },
    },
  ],
});
module.exports = {
  plugins: [
    ...(process.env === 'production' ? [ uncss ] : []),
    ...(process.env === 'production' ? [ cssnano ] : []),
    ...(process.env === 'production' ? [ autoprefixer ] : []),
  ],
};

I tell postprocessing UNCSS to ignore all these classes I absolutely need. Then run the source through a post processor. It keeps only the classes which are actually called inside the HTML markup, and removes all other unnecessary CSS, reducing your CSS framework. Even PicoStrap would have classes you wouldn't use, taking up needless space. You can easily remove almost 80% of almost any CSS framework, saving a few hundred KB on Bootstrap too.

Best advice I give to other devs: remove anything you do not need. Really. Let me know if you need my services. Cheers.