As a page optimizer, your job is to ensure that your website’s pages are easy to navigate, visually appealing, and optimized for search engines. While you can use many techniques and tools to achieve this, sometimes the most straightforward tips can make the biggest difference.
While working with websites, we had to solve some issues with themes and slow pages without losing the content as nice graphics, fancy plugins, etc.
We know that user experience comes from the website’s high speed and the pages’ aesthetics. Therefore, some websites require hours of tweaking to gain milliseconds and keep the design intact.
Is it worth it? We don’t know, but finding simple tips for tricky problems is satisfying. So keep reading and check the latest 7 tips to optimize your website.
First, let’s discuss the generic and simplest but most effective tips that every page optimizer needs to know:
- Keep it simple: Regarding web design, less is often more. Ensure your pages are clean and uncluttered, with plenty of white space and a clear information hierarchy. You should use clear and concise language without jargon or technical terms your audience might not understand unless your content is supposed to be technical.
- Focus on user experience: Your website’s pages should be designed with the user in mind. Make sure that your pages are easy to navigate, with clear calls-to-action and intuitive menus. Optimize your pages for fast load times, and ensure they are mobile-friendly. These days it’s critical to have your website design ready for both desktops and mobile devices.
- Optimize for search engines: Finally, take care of your website visibility by optimizing pages for search engines (SEO). Use relevant keywords in your page titles, headings, and content, but avoid over-stuffing your pages with keywords. Ensure your pages have meta descriptions, and use alt tags to describe your images.
- Protect Admin Panel: A good rule of thumb is to disable plugins in the admin panel. This ensures the proper functioning of pagebuilders and other site administration elements.
Effectiveness and flexibility as principles of every page optimizer
I believe you have heard about WordPress and how easy it is to create basic website. Modular design in WordPress is beneficial for website owners because it offers a vast selection of plugins that can be easily installed and configured to extend website functionality. With plugins, website owners can add features like contact forms, social media sharing buttons, e-commerce capabilities, and more without knowing how to code. This makes it easy to customize and enhance a website and saves time and money. Overall, the modular design of WordPress, coupled with its extensive plugin library, makes it an ideal platform for businesses, bloggers, and anyone looking to create a robust, feature-rich website.
WARNING: don’t install too many plugins because they can extremely slow down your server.
Yes. As every page optimizer knows, having too many plugins installed on a server can slow down the website’s performance and negatively impact the user experience. This is because each plugin adds its code to the website, and if there are too many plugins, they can conflict with each other and cause errors or slow down the website’s loading speed. Therefore, it’s crucial for website owners and page optimizers to carefully select and only install the plugins they need to ensure that the website’s performance remains optimal. They should also regularly update plugins and delete any plugins that are no longer necessary to keep the website running smoothly.
Stating all the above, you can install plenty of plugins and achieve decent results regarding your website speed. Moreover, those plugins can offer free functionality and quite good improvements. I will describe them in 7 tips for every page optimizer, but first, let’s talk about a theme shortly.
DIVI – beautiful theme, easy to use with plenty of features, might be slow
Did you hear about DIVI? After testing many of them, in my humble opinion, it’s one of the most interesting on the market. Don’t get me wrong, it has pros and cons, but it is very intuitive, and we teach our business partners how to use it efficiently.
Nevertheless, it requires some skills, technical knowledge, and experience to make it run smoothly. Unfortunately, this statement is valid regarding any other theme, whether DIVI, SeedProd, Elementor, Thrive Theme Builder or Beaver. All have pros and cons.
Coming back to the topic. You will get 7 tips that you can use to optimize your theme and pages, but some of the tips will require your knowledge and experience in adapting the solution to your needs. Let’s dive in.
7 Tips for every page optimizer
IMPORTANT NOTE: After each installation and configuration, you must clear the caches because you might think the plugin doesn’t work or there is an error. That is normal because, at some point, you might have old files pointing to the wrong content optimized by the new plugin or configuration. So remember clear the cache after each configuration change.
THE MOST IMPORTANT NOTE: make a backup of your website and database right now – before you start!!! You can use UpdraftPlus Backup/Restore Plugin.
TIP #1 – Optimize your Media
The “Converter for Media” plugin is a helpful tool for WordPress website owners to convert media files, such as images or videos, into different formats, for example, WebP or AVIF. With this plugin, you can easily optimize your media files for faster load times and better website performance. In addition, it allows for batch conversions, making it a powerful tool for website optimization. But the best of all is the flexibility of this plugin providing proper file format for each browser. It handles 3 formats, original (jpg, png, …), WebP, and AVIF. The server checks if the browser supports the AVIF format during image file download (when enabled in plugin settings). So, the browser receives the AVIF format equivalent of the original image if supported. If the browser does not support AVIF but supports WebP, it gets the WebP version. Finally, the original image is loaded if the browser doesn’t handle WebP or AVIF formats.
What is great about Converter for Media, it works with Cloudflare. If you use Cloudflare, as we suggest in one of our tips, you should configure Converter for Media to provide proper format of the picture. Cloudflare can distinguish WebP, AVIF, or native format and provide the proper one. Read more about Vary for Images: Serve the Correct Images to the Correct Browsers
After installing the Converter for Media plugin, go to the General Settings tab and choose options. On the screenshot, you can see what we have.
Next, open the CDN Settings tab and configure Cloudflare, providing Cloudflare Zone ID and generated Token (instructions here). You might have to come back here after step #6 where I explain the use of Cloudflare.
TIP #2 – as a page optimizer, you should efficiently load your media
The “a3 Lazy Load” plugin helps improve website performance by delaying loading images and videos until they are needed – visible. This reduces the number of requests made to the server, thus improving website speed and performance. As we tested, this plugin is easy to use and compatible with various themes and plugins. It also includes advanced features such as lazy load for iframes and background images. Iframe lazy loading is vital if you have, for example, Amazon Ads like this one:
You may have noticed, but the image was downloaded after you scrolled down. Disable your ad blocker and refresh the page if you can’t see it. Moreover, this plugin can exclude specific images or pages from lazy loading, which makes it very useful. If there is a problem with some pictures that don’t want to lazy load, then you can exclude them, and they will be loaded as usual.
After installation, you don’t have to configure anything. Default settings should work without problems. So it should already improve the performance and user experience of your pages. However, if some pictures don’t work, you might want to go to the Lazy Load Images tab to check the skip-lazy class and usage. This will help you if you need to skip lazy loading for some of the pictures.
Nonetheless, I recommend disabling this plugin inside the admin panel. To do that, go to the “Exclude by URI’s and Page Types” section and enter /wp-admin/ inside the URIs field. This will stop the plugin from optimizing your admin panel, which might interfere with page builders.
TIP #3 – optimize pages for CSS and HTML
Autoptimize is a popular optimization plugin for WordPress that helps to speed up websites by optimizing files. The plugin aggregates and minimizes HTML, CSS, and JavaScript files to reduce the number of requests made to the server, thus improving website performance. Autoptimize also includes image optimization, lazy loading, and cache management to improve website speed. Nevertheless, we use this plugin only to optimize the CSS and HTML files. After testing a couple of similar plugins, this one works quite well and offers the functionality for free. We don’t recommend optimizing JS files unless you test your website thoroughly to ensure that javascript works as expected.
After installing the plugin, open JS, CSS & HTML tab and select these options:
- Optimize CSS Code
- Aggregate CSS-files
- Optimize HTML Code
- Save aggregated script/css as static files
- Minify excluded CSS and JS files
- Also, optimize for logged-in editors/ administrators
- Enable configuration per post/ page
You might consider leaving unchecked the optimization option for editors/administrators. This will prevent any unwanted errors from your pagebuilder.
In addition, I prefer to enter wp-admin/ inside the field titled “Exclude CSS from Autoptimize“. This might save you some headaches regarding some plugins that will stop working inside the admin panel because of optimization.
- Combine and link deferred in head (fonts load late, but are not render-blocking), includes display:swap
- Removes WordPress’ core emojis’ inline CSS, inline JavaScript, and an otherwise un-autoptimized JavaScript file.
This will preload the logo, one of the first elements that the user can see. You can also preload other elements of your website that are critical for the above-fold content. This way, you ensure that the browser can present the website as fast as possible.
STEP #4 – good page optimizer takes care of JS files
JS files are an indispensable element of almost every website. Thanks to JavaScript, we have flashing and active pages – not to mention HTML5, of course. As a good page optimizer, you must take care of the number of JS files downloaded with each page.
Here comes with help another WordPress plugin. The “Flying Scripts” plugin is a practical tool for WordPress website owners who want to control JavaScript file loading. The plugin allows you to delay loading JavaScript files until the page fully loads, reducing the impact on website performance. In addition, you can prioritize JavaScript files, loading important files first to optimize website speed further.
We use it to paint the above fold page first and speed up the interaction. This approach creates a very positive user experience. In the meantime, when the user is busy reading the above fold content, other scripts are being downloaded in the background and executed to not interfere with the user.
Here are the JS files that we load on user interaction:
- gtm4wp-form-move-tracker.js
- wishlist.js
- ajax-search.js
- wp-polyfill.min.js
- frontend.js
- add-to-cart.min.js
- share-link.min.js
- gtm.js
- cart-fragments.min.js
- masonry.pkgd.min.js
- public.min.js
- admin-bar.min.js
- idle-timer.min.js
- smoothscroll.js
- frontend-bundle.min.js
- dipl-text-animator-custom.min.js
- dipl-button-custom.min.js
- dipl-text-highlighter-custom.min.js
- custom.js
- dipl-blog-slider-custom.min.js
- photon.min.js
- morphext.min.js
To achieve good results, you must find the JS files your website uses and test which ones can be delayed and which need to be preloaded for the pages to work correctly.
If you need help, contact us, and we will help you.
If you would like to do it by yourself, open Chrome browser, then Dev Tools (CTRL+SHIFT+i). Next, click Network, Disable cache, and JS. After selecting all that, refresh your page and observe what files are downloaded. Next, go one by one and put the file name inside the “Include Keywords” field. For each file, Save Changes, clear caches, and reload the page at least twice, observing Dev Tools. Don’t forget to check the Dev Tools Console tab for errors.
When the page is completely loaded, check if everything works as expected. If it works, then go with the following file. If it doesn’t, remove that file from the list and go with the next one. Don’t remove the previously added file names when you update the list. You want to have a complete list of files you can delay loading to improve the speed of your page.
DIVI page optimizer – READ THIS IMPORTANT NOTE: for Divi pagebuilder you must exclude et_fb. Simply input et_fb inside the Disable on pages field and you admin panel will still work as expected
Good luck, and we wish you a lot of patience.
STEP #5 – caching is almost the first thing that every page optimizer tackles
The “WP Optimize” plugin will be one of the most interesting if you want to speed up the page. We initially tested the Breeze WordPress caching plugin, but unfortunately, there was a conflict between Breeze and DIVI builder. As a result, changes inside the admin panel didn’t want to save correctly, and the panel was slow. Therefore, we started to look for another powerful optimization tool for WordPress. Finally, we stumbled upon “WP Optimize”, a plugin that cleans up and optimizes the database, removes unnecessary data, and improves your website speed. It also includes features such as image compression, cache management, and lazy loading, but we use it only for database optimization and static content caching.
WP-Optimize stores dynamic content in a static HTML file in the cache folder. Then, whenever the page is requested, WP-Optimize retrieves the cached content and serves it to the visitor. This approach works well with CDNs because they cache the static content and, as a result, improve your website’s performance.
Install the plugin. BEFORE you continue, make sure you have a current backup of your website. You can use UpdraftPlus Backups – the free version works without problems. After generating backup files, download them to your hard drive to ensure they are safe.
Now you can open the Cache tab, select Generate separate files for mobile devices, and toggle the Enable page caching. Finally, you can save the settings and open Preload tab to start the Preload now function. This way, you will ensure your cache is ready to be delivered to visitors without delays.
Last, go to Advanced settings and input /wp-admin/* in the URLs to exclude from caching field to prevent your admin panel from being cached.
You can track the performance of this function by observing the number of created cache files.
STEP #6 – as a page optimizer, even as a beginner, you know the CDN, do you?
CDN, known as a Content Delivery Network, supports your server in delivering the content of your website to the users. One of the most popular ones you can use for free (limited services) is Cloudflare.
Cloudflare is a popular content delivery network providing page security, performance optimization, and other website-related services to businesses and website owners like you. Cloudflare offers a suite of services, including DDoS protection, content delivery, SSL/TLS encryption, and website optimization tools, for example, caching and image compression. The company also offers website analytics and insights, as well as a variety of integrations with popular content management systems (CMS) like WordPress. Cloudflare’s services are used by businesses of all sizes, from small startups to large enterprises, to help protect and optimize their websites.
In the previous tip, we installed the WP-Optimize caching plugin for static objects like HTML or JS files. Those are generated, stored on your server, and downloaded by your visitors as static content representing your pages.
Here comes into play Cloudflare, which caches static content and, thanks to a spread network of servers, offers your content to the user from the nearest server with the highest speed. The “Super Page Cache for Cloudflare” is a plugin that works with Cloudflare. It helps to improve website performance by reducing the number of requests made to the hosting server. Super Page Cache for Cloudflare also includes features such as cache preloading and automatic cache clearing to ensure website content remains up-to-date.
We will not cover the complete configuration of this plugin and Cloudflare but instead will present one of the options that fixed the issue with static content without proper caching. In our case, most JS files (32 files) were not cached, and Google complained about that during tests on PageSpeed Insights page.
To fix it, we had to go to the Cache tab and turn it on under the BROWSER CACHING option called Add browser caching rules for static assets. Select Yes and Update Settings. Now clear all the caches, reload the page, and go to PageSpeed Insights to verify if there are no static files that bypass the cache.
STEP #7 – an advanced technique to solve the Accessibility issue
The “Code Snippets” plugin is a handy tool for WordPress website owners that allows them to easily add custom code snippets to their website without editing the theme’s files directly. The plugin provides a simple interface for adding and managing code snippets, including PHP, JavaScript, and CSS. Code Snippets also include syntax highlighting and error checking to ensure your code is formatted correctly and error-free. Additionally, the plugin allows you to add custom functionality to your website or modify existing features without risking the integrity of the website’s codebase. Most importantly, you can change the functionality of your theme files, like functions.php, without creating the child theme. In addition, you will still be able to update the theme and not lose your modifications.
This tip helps remove error messages from Google about the scalability of your website on mobile devices. Usually, users can zoom in on the pages for convenient reading, but not with DIVI, which has a function that sets the user-scalable parameter to 0 – no scaling.
We were looking for a solution for our business partners that would not require heavy modification to their themes and an easily reversible solution. Now you can implement it and use it.
function et_add_viewport_meta_2(){
echo ‘<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1″ />’;
}
function remove_divi_actions() {
remove_action( ‘wp_head’, ‘et_add_viewport_meta’ );
add_action( ‘wp_head’, ‘et_add_viewport_meta_2’ );
}
// Call ‘remove_divi_actions’ during WP initialization
add_action(‘init’,’remove_divi_actions’);
This snippet enables zoom on mobile devices and tablets. This snippet can be used with any theme with a hardcoded user-scalable parameter. For other themes, you must find the proper function name to remove. For example, in DIVI, it’s called et_add_viewport_meta.
The enabled snippet will work all the time. Every website initialization will remove the current viewport from the meta and add a new one with proper values. While the result is saved in the cache, it will be executed only once per cache.
If you deactivate this snippet and clear all caches, your theme will revert to its original state.
Summary
We have discussed several popular WordPress plugins that can help even a beginner page optimizer to optimize the website’s performance. We presented tips for improvements using WP Optimize, Autoptimize, Converter for Media, A3 Lazy Load, Flying Scripts, Super Page Cache for Cloudflare, and Code Snippets. These plugins can help improve website speed, reduce server load, and provide various optimization features to enhance the user experience. Using these plugins lets you easily optimize your website without extensive technical knowledge or experience.
Right now, I want to ask you for a favor. If you found this article helpful and informative, please share it with your friends, and don’t forget to subscribe to our newsletter. This way, you will not miss future updates, tricks, and tips that will help you get the most out of your WordPress website.
