DEV Community: Syed Saadullah Shah

Most WordPress Speed Issues Are Not Plugin Problems — They’re Configuration Problems

Syed Saadullah Shah — Sun, 14 Dec 2025 02:34:08 +0000

Every time someone asks how to speed up a WordPress site, the advice usually sounds the same:

“Install this plugin.”
“Add another optimization tool.”
“Switch to a different theme.”

I used to think that way too.

But after working on real WordPress sites — especially ones that were already using “all the right plugins” — I realized something important:

Most WordPress speed issues aren’t caused by missing plugins.
They’re caused by poor configuration and heavy architectural decisions.

This post is a breakdown of how I approach performance today, using a minimal stack and focusing on fundamentals rather than plugin overload.

The Real Reason Many WordPress Sites Feel Slow

In most audits I do, the problem is rarely WordPress itself.

It’s usually a combination of:

Server misconfiguration
Too many overlapping performance plugins
Heavy page builders generating unnecessary markup
Unoptimized images and fonts
No clear strategy for asset loading
Plugins can help — but only after the foundation is right.
My Performance Stack (Simple on Purpose)
I intentionally keep things minimal.

Performance Plugins I Use

FlyingPress
Flying Pages (by Gijo Varghese)
That’s it.
No all-in-one “do everything” plugins.
No multiple caching layers fighting each other.
Server Comes First: LiteSpeed Web Server
Before touching WordPress settings, I always look at the server.

With LiteSpeed:

Correct PHP version matters

OPcache must be enabled

Compression should happen at server level

TTFB issues often disappear here

This is where many sites go wrong — they try to fix server problems using WordPress plugins. That almost never works.

FlyingPress: Powerful, But Only If You Configure It Properly

FlyingPress is one of the few performance plugins that respects your setup instead of trying to override everything.

What I focus on:

Clean caching setup
Careful CSS and JS handling
Delaying only non-critical scripts
Avoiding aggressive options that can break layouts
Turning on every toggle doesn’t make a site faster.
Understanding what each option does does.
Flying Pages: Speed Isn’t Only About Metrics
Flying Pages doesn’t just improve scores — it improves how the site feels.

By preloading links a user is likely to click:

Navigation feels instant
Pages appear to load faster
UX improves without adding bloat
Perceived performance matters just as much as actual load time.
Images: WebP, Proper Scaling, No Shortcuts
Images are often the biggest performance issue hiding in plain sight.

My basic rules:

Use WebP format
Upload correctly sized images (no oversized files)
Avoid heavy hero images
Always define width and height to prevent layout shift
No plugin can fix badly prepared images. This has to be done right at upload time.
Why I Avoid Page Builders

Most page builders generate:

Large DOM trees
Extra CSS and JavaScript
Layout shift issues
Instead, I rely on:
Gutenberg
GenerateBlocks

This combination gives:

Clean HTML output

Minimal assets

Full layout control without performance penalties

The difference in page weight is noticeable immediately.

Using Premade Templates the Right Way (Otter Blocks)

For the front page, I used Otter Blocks premade templates.

Premade templates aren’t the problem — poor implementation is.

I make sure:

Structure stays clean
Styling is minimal
No unnecessary scripts are loaded
Used carefully, they save time without hurting performance.
Fonts: Either Local or Not at All
Fonts are another common performance trap.

My approach:

Prefer system fonts
If custom fonts are required → host them locally
Load only the font weights actually used
Avoid render-blocking font requests
This alone can significantly improve first paint and CLS.
Cloudflare: Fixing Network-Level Issues

Cloudflare helps with things WordPress can’t:

CDN delivery
DNS speed
Global latency
Configured properly, it works smoothly with LiteSpeed and adds a strong performance layer without extra plugins.
Again — configuration matters more than tools.
Why This Approach Works Long-Term

This setup consistently delivers:

Fast real-world load times
Low layout shift
Stable performance after updates
Sites that don’t break every few months
Most importantly, the site stays fast because it’s built on solid fundamentals.

These are above my own portfolio sites. Many people ask me if you are expert of that level why you don't show your own site's speed test. So added realtime speed test.

Final Thoughts

WordPress performance isn’t about:

❌ Installing more plugins
❌ Chasing perfect Lighthouse scores
❌ Switching tools every time something feels slow

It’s about:

✅ Understanding the stack
✅ Making clean architectural choices
✅ Configuring what you already have properly

Once configuration is right, plugins become helpers — not bandaids.

Author Note

I regularly work with WordPress performance optimization, clean block-based builds, and server-level tuning.
Some real-world workflows and case studies are available on my portfolio: https://syedsaadullah.com

How to override shortcode in WordPress

Syed Saadullah Shah — Sun, 28 May 2023 01:23:31 +0000

You need to follow a series of steps to override a shortcode in WordPress. Here's a definitive guide to help you override a shortcode:

Identify the shortcode you want to override: Determine the name of the shortcode you want to modify or replace. Plugins, themes, or custom code snippets usually define shortcodes.

Create a child theme (optional): It is recommended to use a child theme to ensure that your changes are not lost when the parent theme is updated. If you're already using a child theme, skip this step.

Create a new folder in the /wp-content/themes/ directory and name it as your child theme (e.g., my-child-theme).

Inside the child theme folder, create a new file named style.css. Add the following code to the style.css file to create a basic child theme:

*css
*

/*
Theme Name: My Child Theme
Template: parent-theme-folder-name
*/

Replace parent-theme-folder-name with the name of the parent theme's folder.

Create another file in the child theme folder named functions.php.

Add code to the child theme's functions.php file: Open the functions.php file in your child theme folder and add the following code:

php

function override_shortcode_function_name($atts) {
    // Your custom shortcode functionality here
}

add_shortcode('shortcode_name', 'override_shortcode_function_name');

Replace override_shortcode_function_name with a unique name for your custom function, and replace shortcode_name with the actual name of the shortcode you want to override.

Customize the shortcode functionality: Inside the override_shortcode_function_name function, you can write your custom code to override the shortcode's functionality. You have full control over the output and behavior of the shortcode.

For example, you can modify the shortcode's output, retrieve additional data, or integrate it with other plugins or functions.

Save and upload the child theme: Save the changes to the functions.php file in your child theme folder. Then, upload the entire child theme folder to the /wp-content/themes/ directory of your WordPress installation.

Activate the child theme: Log in to your WordPress dashboard, navigate to "Appearance" -> "Themes," and activate your child theme. This ensures that your custom code is loaded and overrides the parent theme's shortcode.

Test the overridden shortcode: Insert the overridden shortcode into a post, page, or widget to verify that it's functioning as expected. Make sure to use the new functionality defined in your custom shortcode function.

How to Run VS Code Terminal as Administrator

Syed Saadullah Shah — Fri, 29 Jul 2022 11:50:00 +0000

Visual Studio Code (VS Code) is a powerful and flexible code editor widely used by developers. Sometimes, you might need to run commands in the terminal with administrative privileges.

Whether you're managing system files, installing packages globally, or performing tasks that require elevated permissions, running the VS Code terminal as an administrator ensures you have the necessary access.

In this blog post, I’ll walk you through simple, step-by-step instructions on how to run VS Code’s terminal as an administrator on both Windows and macOS systems.

Why You Might Need to Run VS Code as Administrator
Running VS Code’s terminal with administrative privileges is essential when:

Installing or updating global dependencies (e.g., Node.js packages).
Accessing system-protected files.

Running scripts that need elevated permissions (like editing /etc/hosts on macOS or installing software on Windows).

Note: Be cautious when running commands as an administrator since they can impact your system more deeply. Always ensure you trust the source of the commands you're executing.

Running VS Code Terminal as Administrator on Windows
Method 1: Open VS Code as Administrator
Close VS Code if it’s currently running.

Right-click the VS Code icon on your desktop or in the Start menu.

Select Run as administrator from the context menu.

Once VS Code opens, any command you run in the integrated terminal will now have administrator privileges.

Method 2: Open Terminal as Administrator from VS Code
If you're already in VS Code and want to run the terminal as an administrator:

Press Ctrl + Shift + P to open the Command Palette.
Type Terminal: Create New Integrated Terminal and select it from the list.

Open the Windows Start Menu, search for "Command Prompt" or "Powershell" depending on your terminal, right-click, and choose Run as administrator.
Once your terminal window opens with administrative privileges, you can manually start VS Code with the command:

bash Copy code code .
The terminal that opens inside VS Code will now inherit the administrator privileges.

Running VS Code Terminal as Administrator on macOS
macOS handles administrative privileges differently from Windows. Here’s how to achieve the same result:

*Open VS Code normally.
*
Open a terminal in VS Code by navigating to Terminal > New Terminal or by using the shortcut Ctrl +. Once the terminal is open, prepend any command that requires elevated privileges with sudo. For example, if you're editing a system file, you might use:
bash
Copy code
sudo nano /etc/hosts`

You’ll be prompted to enter your system password. Once entered, the command will run with administrator privileges.

A Note About Security

It’s important to remember that running your terminal as an administrator gives you greater control over your system, but it also comes with risks. Be mindful of the commands you run with administrative rights to avoid unintentional damage to your system.

Conclusion

Running the VS Code terminal as an administrator is simple and necessary for certain tasks, whether you're using Windows or macOS. Following these methods will allow you to perform actions that require elevated permissions, while also maintaining system security by only granting such privileges when absolutely necessary.

Now that you know how to run the VS Code terminal as an administrator, you can confidently manage your system and complete tasks that require this level of access!

Feel free to share this post if you found it helpful or have any questions in the comments below. Happy coding!

Secure Javascript Form Validation with Mootools

Syed Saadullah Shah — Sun, 10 Oct 2021 08:03:07 +0000

Did I get you with the title?

That's right, it's not possible to securely validate a form with Javascript. That is, you can't prevent invalid data from being submitted to the server by using Javascript for validation. We've all seen Javascript-based form validation classes (and classes for Javascript libraries like Mootools, which is my favourite, so I'll be making reference to it here), but it's all too often not made clear enough to those who might use such classes that javascript validation alone provides no security against invalid data being sent to your back-end processing script and making it into your database.

Javascript is executed by the browser, not the server. It allows for all kinds of user-experience enhancements that would not be possible with server-side languages like PHP.

In the context of form validation, javascript allows you to alert the user to an error in his or her input without sending all the data to the form, and presenting a list of errors to the user. This is not only a great thing in terms of convenience to the user, but it can also save you bandwidth in a significant way if you have a high-volume site.

The problem with javascript validation is that it can be circumvented, which means that just as you should never trust user input without validation, you should never rely on client-side validation alone.

The logical approach to validation then is to validate all your content on the server before saving it to the database. What does this mean for you if you want to also have subtle validation messages presented to the user as they fill out the form, not only at the end?

Why duplicate those efforts by writing two sets of functions, one for PHP and one for Javascript?

Personally I prefer to use a single set of validation functions in PHP, and modify my back-end script slightly to call them not only on a full form submit, but on individual XHR requests as well.

This brief tutorial focuses on how you might structure your Javascript and PHP to create two layers of validation that rely on only one set of validation functions, allowing for the security of server-side validation with the convenience and beauty of client-side validation.

Technically the validation is all happening on the back-end, we're simply adding an attractive front-end interface to it, that our users will appreciate. We're not attempting to provide complete code for form validation, instead we're offering an approach for you to build on.

Step 1: build our form, and PHP validation

HTML
For the purpose of this demo, we use a very simple form with one text input.

"<form action="<? echo $_SERVER['PHP_SELF']; ?>" method="get" id="myform">
    Please tell us something you like:
    <input type="text" name="mytext" id="mytext" value="<?=$form['mytext']?>" class="formElement <? if(isset($message['mytext'])){ echo "incorrect"; }; ?>" /><?PHP echo '<span id="msg">'.$message['mytext'].'</span>'; ?> 
    <input type="submit" name="save" id="save" value="Submit" />
</form>
CSS
Two simple classes for the form element to indicate correct or incorrect status. This can be greatly beautified.

<style type="text/css">
    .correct {
        background-color: #b3d483;
    }
    .incorrect {
        background-color: #c76760;
    }
</style>
PHP
Very simple PHP to capture the form submit, and validate it. Since we're using one field, this is extremely basic code. In our example, it sits at the top of the same file as the form.

<?php
//set a default: the form is not complete
$complete = false;

if(isset($_GET['save'])){
    $form = $_GET;
    $message = validate($form);
    if(!$message['error']){
        // if no error, process the form and present a thank you message
        // set "complete" flag to true;
        $complete = true;
    }
}

function validate($form){
    $message = array();
    $message['error'] = false;
    foreach($form as $key=>$value){
        if($key=="mytext"){
            if(strtolower($value) != "peas"){ $message['error'] = true; $message[$key] = "&lt;&lt; Please say \"peas\""; }
            elseif(empty($value)){ $message['error'] = true; $message[$key] = "&lt;&lt; You forgot to tell us what you like!"; }
        }
    }
    return $message;
}
?>"

This is pretty vanilla stuff. We have a form on our page that submits to itself, runs the value of the "mytext" field through a basic validation function, and either processes the input or displays an error. If we add more fields to this, we will obviously have to add to this code to validate each one, and show a list of errors (if any) to the user when the page refreshes.

Now that we have this foundation in place, we can add a little Javascript layer to run this validation on each field asynchronously when its value is changed (tab off the field, or click outside of it). Here we show each code block again, but notice the few extra lines in the HTML, PHP, and the new Javascript added.

Step 2: add the Mootools (Javascript) Layer

This chunk loops through each element of class "formElement," and adds a change event which triggers the asynchronous call to our PHP script. It then interprets the result of the validation and displays a message to the user, or none if there is no error.


<script type="text/javascript" src="mootools-1.2.2-core.js"></script>
var Demo = {
    start: function(){
        $$('.formElement').each(function(el){
            el.addEvent('change',function(e) {
                e.stop();
                var msg = new Element('span').injectAfter(this);
                var request = new Request({
                    url: 'demo.php',
                    link: 'chain',
                    method: 'get',
                    data: {
                        field: this.name,
                        value: this.value,
                        ajax: 1,
                        save: 1
                    },
                    onSuccess: function(response) {
                        var response = JSON.decode(response);
                        if(response.error==false){
                            $('msg').setStyle('visibility','hidden');
                            el.setProperty('class', 'formElement correct' );
                        }else{
                            $('myform').setStyle('visibility','visible');
                            $('msg').set('html',response.mytext);
                            el.setProperty('class', 'formElement incorrect' );
                        }
                    }
                }).send();
            });
        });
    }
}

window.addEvent("domready", function(){
    Demo.start();
});

This is the same as the previous example, except that we add a hidden field called "ajax" (though this is a misnomer.. AJAX stands for "Asynchronous Javascript and XML", which is almost right except for the XML part... our PHP script will return JSON instead. The "ajax" value tells php whether or not it's receiving the input as an asynchronous individual field, or the whole form.

<form action="<? echo $_SERVER['PHP_SELF']; ?>" method="get" id="myform">
    <input type="hidden" name="ajax" id="ajax" value="0" />
    Please tell us something you like:
    <input type="text" name="mytext" id="mytext" value="<?=$form['mytext']?>" class="formElement <? if(isset($message['mytext'])){ echo "incorrect"; }; ?>" /><?PHP echo '<span id="msg">'.$message['mytext'].'</span>'; ?> 
    <input type="submit" name="save" id="save" value="Submit" />
</form>
CSS
This is the same as step 1

<style type="text/css">
    .correct {
        background-color: #b3d483;
    }
    .incorrect {
        background-color: #c76760;
    }
</style>

Here we have added a check for the value of "ajax" which tells the script how to process the input (if it's the whole form, or one field passed asynchronously. All the script needs to do if ajax=1, is output a JSON array and then stop processing, so that it doesn't also return the rest of the HTML on the page.

You might choose to have your forms submit to a separate script, in which case killing the script at this point would be unneccessary. If ajax=1, the validate field now also reorganizes the submitted key and value into an array the same as a form submit would generate so that we don't have to process the input differently. You don't have to do this like this, of course.

<?PHP
$complete = false;

if(isset($_GET['save'])){
    $form = $_GET;
    $message = validate($form);
    if($form['ajax']==1){
        echo json_encode($message);
        die;
    }
    if(!$message['error']){
        // if no error, process the form and present a thank you message
        $complete = true;
    }
}

function validate($form){
    $message = array();
    $message['error'] = false;
    $form = $form['ajax']==1 ? array($form['field']=>$form['value']) : $form;
    foreach($form as $key=>$value){
        if($key=="mytext"){
            if(strtolower($value) != "peas"){ $message['error'] = true; $message[$key] = "&lt;&lt; Please say \"peas\""; }
            elseif(empty($value)){ $message['error'] = true; $message[$key] = "&lt;&lt; You forgot to tell us what you like!"; }
        }
        //other fields we're validating
    }
    return $message;
}
?>

FB Video Downloader

And that's it! With a very small amount of Mootools JS and the addition of 5 or 6 lines to the HTML and PHP, we have a smooth second layer on our validation that saves the user time and frustration if they are having trouble getting their input right.

Now you a trendy front-end without sacrificing security.

How to run JavaScript in Visual Studio Code

Syed Saadullah Shah — Sat, 25 Sep 2021 07:06:34 +0000

VS code is a text editor made by Microsoft and it is an open-source project. It has extensions and other features for debugging your javascript, which we will talk about in this post.

Installing vs code is easy, just visit vs code's website and get the installer here: https://code.visualstudio.com/download

After you install vs code, you can create a new file (ctrl+n), name it something like "test". For this example we use test.js. You can also click on the folder icon and add the javascript there:

Are you Using VS code on your laptop or pc?

Comment Below !

var s = "html > < body > <!-- // --><!-- Placeholder for VS Code generated HTML / --> < script src = "app/app.js" ></ script > </ body > </ html>
";
alert(s);

After that's done, put "console.log('hello world')" in your javascript file! The console will pop up automatically when you click on the vs code's running tab. In the vs code window, you'll see something that says "Attach". Once you click on attach, a new vs code window will pop up and it will run your javascript file!

VS code also has extensions so you can debug your javascript better. Such as debugging multiple browsers at once or have a debugger tell vs code what to do when an exception is thrown.

To view, a list of some vs code extensions visit:

Creating a Web Server in VS Code

Now that's over with let's get into how to create a web server with vs code! You're going to want to drag and drop 2 files into vs code they are index.html and app.js. Open vs code's "settings" by right-clicking on the file name.

Desktops :

Click on settings, then go to "ignored files" and add ".git":

Then you want to click on "open vs editor window here", so vs code knows how to run your program:

Now you can edit your index.html file! You can also see that vs code has already added some stuff for us since it opens automatically:(but we're not going to use this yet)

VS code will try to help you out with minimal errors by telling you that vs code has attached itself to your app.js file, it also tells you that vs code's debugger is running on port 9229.

To run vs code, click on the vs code running tab and click "F5" or hit "F5". To debug HTML files, go under Tools/HTML sub vs sub ctrl+p sub debug or hit F5 :

You can edit index.html, app.js, and any other files in there! Also if you want vs code to automatically open this folder after closing it just do:

Check out the download facebook

Right Click-> Open Folder Here Laptops

The end! Enjoy javascript debugging with vs code!

Nginx VS Apache for WordPress which is perfect?

Syed Saadullah Shah — Sat, 25 Sep 2021 06:29:27 +0000

Apache

The Apache web server, first released in 1995 and now the most popular of its kind worldwide, has a lot to be proud of.

The work done by this software is responsible for up to 80% or more internet traffic on any given day.

In my opinion none of them is best for wordpress only LiteSpeed web servers are efficient and fastest then these

Developed and maintained by an independent foundation with detailed licensing information available through their website (www.apache foundation).

it still remains as one of the world’s leading offerings when compared against other options like Microsoft's IIS or Netscape Enterprise Server 2 - but that doesn't mean people are satisfied! Improved versions continue to receive updates from time to time while there have been some who disagree about how best they should handle "legacy."

Apache’s name originates from the Native American heritage, but some people believe that it is a pun on “a patchy server.” Apache has been around for more than 20 years and since its beginning in 1995, there have been over 18 million downloads of their free web server software!

When you hear about Apache these days or see an icon with two feathers above what looks like an eye near your computer mouse cursor; don't worry…it's just another program trying to protect us while we surf online.

Short info about nginx......

Nginx was created by the Russian developer Igor Sysoev in 2004. It came about for scaling purposes after he successfully scaled website rambler.ru with it previously, which provided him with a new lucrative business venture that has since expanded to include Nginx Plus and open source versions of both licenses available on their site today!

Nginx is an alternative webserver to Apache written specifically as a response/counterbalance against its performance limitations (such as slowness). As project manager Owen Garrett said: "Ngnix was written specifically to address the performance limitations of Apache web servers."

Which one is best for [WordPress](https://www.powertechware.com)?

Apache or Nginx as the most robust and feature-abundant servers for running WordPress, but any server that supports PHP and MySQL will do.

A quick side note: if you only have older versions of either Apache (2) or MySQL 5.0+, then your site may not run well with WordPress on it because they don't work as efficiently when newer technologies come out; upgrade them!

Apache is a powerful, free web hosting service that can host many sites at once while still being fast enough to keep up with traffic spikes--incidentally, this also makes it one of the best hosts for managing multiple blogs in networks like WPEngine's BlogKing plan.

I always prefer LiteSpeed webserver because it is ultra-fast to deliver my content as compare to Nginx or Apache.

LiteSpeed is the perfect solution for businesses, companies, or individuals with websites that receive heavy traffic.

The software can be used to serve high volumes of content without taxing your system's resources such as memory and CPU. No other web server comes close when it comes to serving static content quickly!

Litespeed vs Nginx vs apache

Move Files From Server to Server Via wget Command

Syed Saadullah Shah — Sun, 12 Sep 2021 10:01:58 +0000

The fastest (easiest) way to move files from server-to-server.

Uploading an entire directory of files can take a long time with the traditional method, but if you have SSH access into your server and use SCP instead it will be faster. You'll need to know where on file system(s) or network connection “remote” machine (the one receiving directories/files) has been saved in so as not to overwrite any other stashed data from there like source code for instance!

This way requires more technical skills which may deter some people given how often nowadays we are using these tools intuitively without thinking about their complexity…but at least this procedure allows us do our jobs efficiently while staying ahead by utilizing all available resources such that wasted hours aren't spent waiting around

It would take you hours to download a 20GB file if we were using FTP. But with wget, the downloading and uploading can be done in just minutes!

Steps to using WGET:

Make file publicly available on source server

Which means placing somewhere within public_html (RHEL/Centos) or www (Debian/Ubuntu).

Placing it in a public directory makes it available from frontend url (e.g. https://domain.com/backup.tar.gz).

Download file from destination server.

From receiving server, navigate to the directory you’d like to download it to.

Type wget https://domain.com/backup.tar.gz – to download external file to your current directory.

(Of course, your file path and filename may vary.)
Wait for it to finish transferring. Should be super quick.

Change file ownership to match correct USER:GROUP.

Type ls -la to see what what other files are owned by. You’ll probably see other files listed as jimbob:jimbob or jimbob:nobody, while the one you just downloaded was probably root:root (or whatever linux sudo user you had).

Type chown YOURuser:YOURgroup backup.tar.gz – using the correct user, group, and filename.

Don’t forget to do this. Otherwise, you won’t be able to extra the archive later!

Other tips and tricks

You can use wget 123.123.123.123/wp-content/backup.tar.gz --header "Host: domain.com – nice little trick to download specifically from a certain IP. Useful during DNS changes that haven’t propagated.

If you're unable to compress files on the source server, use rsync instead. I have two guides that will help get your downloads going:

-Rsync Guide #1 -How To Compress Files Using Rsync For Downloading Large Amounts Of Data In Seconds (Without Losing Speed)slow and even disconnect before you download the whole file. You can try rate-limiting your wget.

How to Serve images in next Gen Formats?

Syed Saadullah Shah — Mon, 30 Aug 2021 10:16:19 +0000

Google do recommend converting images from png, jpeg to webp formats that’s why serve images in next gen formats suggestion comes in Google page speed insights. If you don’t know how to fix this issue in your worpdress website then stay here. I will go over a little bit about serving images to next gen formats.

    * [What is Webp]
    * [Use webp plugin]
    * [Convert images to webp by using free tools]
    * [ShortPixe]
    * [Imagify]
    * [Optimole]

Webp is the latest gen formats for images like png, jpeg images. Google prefer smaller size of images that you should use on your web pages. To serve your images in webp formats you simply need to use free tools that we are going to cover later.

Webp images are 26% smaller in size compare to jpeg and png files. On the other hand you can server your high quality images to webp format without losing the quality. This will result in both faster speeds and better PSI reports.

Average webp file size compare to jpeg and png. img source
Here is an example of both webp and jpeg file images and you can see there is no difference at all however webp file is almost 10% smaller than jpeg.

Use webp plugin

Using a third party webp plugin will save you some time and increase page load time by making a copy of your original images and making the file size smaller.

If you are getting this error down to the google page speed insights report:

Serve images in next gen formats
then you simply need to use some of these free WordPress tools that I have listed down below.

1.Shortpixel (free/paid)
2.Imagify (free/paid)
3.optimole (free)
4.EWWW Image optimizer (free/paid)
5.Wpsmush (Free/paid)

The one I recommend for you is webp converter for media. This plugin is super fast and lightweight and less bloated then others. The developer is well skilled and he coded the plugin in his own way.

Belive me after actiavating this plugin the issue was completely resolved on google page speed insights. I will show you how you can do the same.

Go Over to WordPress dashboard and Add New Plugin.

Webp converter for media optimize your images

After installing and activating the plugin you have to go to setting of this plugin. Now if your server/web host allows htaccess files than it’s fine if does not then you have to select the second option to continue the conversion process.

webp converter for media plugin settings

But via htaccess files method is recommended by default in this plugin. After all go to bottom of the setting and click on force regenerate all images.

You can also select the quality of your images but, I prefer selecting 85% because it is the perfect for high quality images so you will never lose the quality of your images.

force convert all images from jpeg to webp
This plugin will create copies of your original images and serve them into next gen formats. Now let me show you how I solved this issue quickly at google page speed insights.

To convert your images from jpeg to webp files install webp converter for media.

serve images in next gen formats

Convert Images To WebP Using Free Online Tools

if you hate installing third party plugins. Then there are some free tools that you can use to server your iamges in next gen formats. One of my favourite one is CloudConvert’s WebP Converter also a popular choice.

convert images to next gen formats with cloudconvert webp converter

for more pc speed up guides

Shortpixel

Shortpixel is a great plugin and it has more than 300,000+ Active Installations. The plugin allows you to optimize your images and help you to make your website faster by lazy loading your images.

You can check this option if you want Shortpixel to serve your images in next gen formats.

Imagify

Imagify is again by far the best plugin but it is limited. If you have tons of images on your website then you have to buy extra credit from imagify. Otherwise I recommend you to stick around with webp converter for media.

Imagify has more than 500,000+ Active Installations in WordPress.

imagify image optimization plugin for wordpress

Optimole

You can replace any image optimization plugin with optimole after installing optimole you have to get an API key to activate it. After that your all images will be compressed and converted to webp or serve scaled from Cloudfront CDN.

All over this plugin has more than 5 starts rating so you can read more reviews. I don’t comment on this plugin because I don’t personally used it for a while.

Conclusion

All right wrapping up this tutorial was all about images optimization and serve images in next gen formats which clearly means that it can improve your web page load time if you follow this guide step by step. And google do like fast websites. If you have any question related to speed security and performance then please let me know in the comment box. I will be happy to hear from you guys.

DEV Community: Syed Saadullah Shah

Most WordPress Speed Issues Are Not Plugin Problems — They’re Configuration Problems

I used to think that way too.

It’s usually a combination of:

Performance Plugins I Use

With LiteSpeed:

What I focus on:

By preloading links a user is likely to click:

My basic rules:

Most page builders generate:

This combination gives:

I make sure:

My approach:

Cloudflare helps with things WordPress can’t:

This setup consistently delivers:

WordPress performance isn’t about:

It’s about:

Author Note

How to override shortcode in WordPress

How to Run VS Code Terminal as Administrator

A Note About Security

Conclusion

Secure Javascript Form Validation with Mootools

Step 1: build our form, and PHP validation

Step 2: add the Mootools (Javascript) Layer

How to run JavaScript in Visual Studio Code

Creating a Web Server in VS Code

Nginx VS Apache for WordPress which is perfect?

Apache

Short info about nginx......

Which one is best for [WordPress](https://www.powertechware.com)?

Move Files From Server to Server Via wget Command

How to Serve images in next Gen Formats?

Table Of Contents

Use webp plugin

webp converter for media plugin settings

serve images in next gen formats

Convert Images To WebP Using Free Online Tools

Shortpixel

Imagify

Optimole

Conclusion