SenDesign is an online agency that emphasizes quality, innovation and speed. We use technology to achieve the best results.
Design is an art! Your website design represents your business perspective. The first impression really matters!
We offer development services for both commercial and internal use. We develop applications for all the platforms you need.
SenDesign is an online agency that emphasizes quality, innovation and speed. We use technology to achieve the best results.
Design is an art! Your website design represents your business perspective. The first impression really matters!
We offer development services for both commercial and internal use. We develop applications for all the platforms you need.
Website speed is the first quality index. Yes, your website is very beautiful, attractive and intuitive, but if it doesn’t load in a maximum of 5 seconds, no one will notice it.
As with previous articles, if you haven’t read the Successful Web Design or The Online Business Guide, I encourage you to read the article Website speed optimization: Introduction, quick guide and useful tips to understand what it is is speed optimization. I will recommend two approaches: one free and one that requires a small investment.
We start with image optimization which takes place absolutely free of charge. Install and activate the reSmush.it plugin.
Go to Media then to reSmush.it. On the right you will find a settings menu. Image quality defines how hard images are compressed. Set it to 80. It’s a good threshold that doesn’t affect quality very much. The checkbox Optimize on upload ensures that all images will be optimized as you add them. Depending on the server upload speed, it may take longer to upload images. Click Save Changes. To optimize the images uploaded so far, click Optimize all pictures.
When the plugin is deactivated, all uploaded images will return to their original quality. Nothing is lost.
We talked a lot in articles and books about the new WebP image format. So, the second way to optimize the images we will use is WebP Express. It automatically creates copies of images converted to webp format. If the visitor’s browser supports the format, it will receive the webp image. If not, you will receive the jpg image.
The plugin has all the necessary configurations ready, just needs to be activated. Go to Settings, WebP Express. Scroll down to the Conversion method section. Here are listed with a green check mark, the ways in which the server on which your website is located can convert images. If nothing is checked, the server will not be able to convert and you will not be able to use the plugin. Click Save settings to activate it.
We will install two plugins that facilitate code optimization and enable caching. The first is Autoptimize. It will generate the server level cache. From the top bar, click Autoptimize. Alternatively, go to Settings, Autoptimize. Enable Optimize JavaScript Code and Aggregate JS-files. JavaScript code will be minified and concatenated.
From the CSS section, enable Optimize CSS Code, Aggregate CSS-files and Also aggregate inline CSS. From the HTML section, enable Optimize HTML Code. CSS and HTML codes will be optimized.
Click the Save Changes button at the bottom. Every time you make changes to your pages, products, articles, or website structure, it’s a good idea to clear your cache to make sure they’re visible. Hover over the Autoptimize button and click Delete Cache.
To enable browser-level caching, we will use WP Super Cache. After activation, go to Settings, WP Super Cache. Check Caching on and click Update status.
Go to the Advanced tab and check the following:
Go below and click the Update Status button.
To clear the cache, click the Delete Cache button in the top bar.
The above two plugins can be equated to one: WP Fastest Cache. In its free version, it is not as effective. Instead, the premium version brings some very interesting features. Do not combine them with the free plugins above, having the same functionality conflicts will occur. Install and activate the plugin in both free and premium version. Using the new WordPress side menu button called WP Fastest Cache, go to the options page. Check all options except Mobile and Mobile Theme. Click Submit.
Their explanation is as follows:
To clear the cache, place the cursor on the Delete Cache button at the top of the control panel, and click Delete Cache and Minified CSS / JS.
WordPress is like a swiss knife, it comes with a lot of tools that you may not need. That’s why we have the Perfmatters plugin. Go to Settings, Permatters. From the General settings, check the following:
The rest of the options depend on each case and the combination of plugins. Once activated, the functionality must be retested.
From the WooCommerce section, which only appears if the plugin is present, you can activate:
From the Lazy Loading section, you can turn off the display of Images by ticking Images, Videos by ticking iFrames and Videos, or even content by ticking DOM, until the user scrolls next to them.
From the Fonts section you can disable Google fonts altogether by checking Disable Google Fonts if you want to use a system font like Arial or Times New Roman. If not, enable the Local Google Fonts option which will serve the fonts directly from your server without making an HTTP connection to Google.
In the Analytics section you can configure Google Analytics. Enable Local Analytics allows you to serve files directly from your server without having to connect to Google. In the Tracking ID field you can enter the Analytics code.
It is not a step you have to take at the beginning, but it is something you adjust over time. As you install and uninstall themes or plugins, write articles and pages, residual entries are stored in the database. They need to be cleaned once. When too much is collected, the database slows down. The result differs depending on how often you clean. If you do it after 2-3 years, you may gain a few seconds. Pay attention! Always make a backup before optimizing the database.
For optimization, we will use the WP-Sweep plugin. Go to Tools, then Sweep. Each category has a button called Sweep. You can press them individually, or press the Sweep All button at the bottom.
As before, if you have questions or need help, I’m waiting for you on the SenDesign Community Facebook group! This is where the series of tutorials ends. From here you can deepen WordPress through a lot of practice. The book Successful Web Design is the next step, you will find all the theory you need to be a successful web designer.