WARNING! If you are unsure about something or cannot recover from mistakes, then use caution. In most cases, it is better to hire a professional that has an understanding of code. Most of this is a simple process, I suggest making a full backup of your website and database to be on the safe side.
Hire a professional: LWhaley.com
A few key things to remember when designing a website are the following.
1) Security is of utmost importance. Ensure that you enable security on your site first.
2) Create a Maintenance or Coming Soon page. There are several plugins available for WordPress.
3) Connect to a CDN. If you have never connected to a content delivery network, it is easy to do. I use Cloudflare as it provides both free and paid versions. There are other CDN networks available, most are not free. Another one that I would recommend at a low monthly cost is BunnyCDN
4) Last but not least, DO NOT enable any form of caching plugin, you plan to use while you are developing. While in development, the cache will not allow for a quick view of the changes you made.
Run A Scan GTMetrix
Okay, now that the basics are out of the way. Remember that all plugins and code I provide are for after the site development is complete. You may install the plugins, but do not activate them.
The first thing is to run an initial scan of the site. Providing us with a lot of information that we will need. Go to GTMetrix for the scan. This site provides me with the information I need to help me in site speed at no charge. There are many other sites available, but I love the detail that GTMetrix gives me.
I have no caching plugins activated when I run my first scan on GTMetrix. Anytime in-between steps you wish to run a scan you may, but what we are looking for is a baseline of items that need to be removed, repaired, etc.
The red box in the image above is the most important thing. The Fully Loaded Time at 12 seconds is crazy. Most will leave the site if it takes longer than 8 seconds. The total page size is also very high, which needs a reduction. Last is the number of the request that the site makes to render the page. Leave that report of GTMetrix open for future reference.
Avoid Bad Requests
I will break this down into steps and start with the topic Avoid Bad Request. What is it you may ask? Well, in the most basic way of describing a bad request would be to say there is a link that is no longer valid.
When you are in the design process, you know that many plugins add pages. It could be that you began to design using that page and had button links, or images on the page then decided to discard it. You did not remove it from the site it is just sitting in the trash.
You may select the link on GTMetrix and it will display a 404 page on your website. Without answering any real questions, it is left to you to figure it out. This can sometimes be difficult to figure out, so I use a plugin called Broken Link Checker.
Broken Link Checker scans your entire site searching for all links on your site. There is not much to set up you can just install it and let it be. You may want to include it searching for additional items though. You may go into the settings and fine-tune the adjustments on the plugin.
The plugin resides in your Admin Dashboard. Give it some time to scan your site. If your site is an e-commerce platform or a photographer’s platform full of images, it will take some time. I suggest you keep it running and check on it occasionally.
If you or your client has a YouTube Channel you may paste the YouTube API key for searching for broken video links as well. In the dashboard, it is a very simple look, but notifies you of broken links and provides more information to find the destination of where the link is located. As I said, it may be on pages that you trashed because they were not in use. If that page is something that might be placed back into action, then it would be better to save it as a draft instead of published and keep the page or post where it would normally reside.
Time To Install And Activate
Now, turn on caching. The site I am working on is not using a paid cache, so I enabled WP Fastest Cache and A3 Lazy Load to help increase performance. Be certain to check your cache plugin, to see what it has to offer. WP Fastest Cache does offer some features for images, but I do not use the Short Pixel Image Optimizer. Set up your cache and if there is not an image lazy load available, there is no need to worry about it. A free cache lazy load, may not offer the same as a plugin that images are their main concern.
Now install Asset CleanUp: Page Speed Booster. Most likely by now, you have an idea of what you need to accomplish. Except for learning the basic setup and usage of Asset CleanUp, you will know if you require a plugin that specializes in the async of Javascript and to minify files. You may need these plugins.
Async Javascript – Used to async or defer your Javascript files.
Autoptimize – Used to minify and optimize Javascript and CSS.
Don’t double-dip your plugins. If your cache optimizes images, do not use another plugin to do the same thing. The same goes for Javascript minification and defer. Keep that in mind.
The First Step
How can I call this section the first step? Well, thus far, unless you have already cleaned up broken links in your site, it kind of is the first step! You know the old saying, “The first step is always the hardest,” and I do not disagree with that. In the image, I posted of the first scan in GTMetris you will see the following.
Now please allow me to explain something based on the image above. First, you will notice that many of these images have a “New with size” after them. Yes, the first GTMetrix scan was not the first. I had a laundry list of images before I decided to start this article. Do not think for a second that I am that good. It would be wonderful to not have to go through the torture you are about to endure.
Just kidding, it is time-consuming, yes, but not torture. Unless, of course, you just want this to be over with!
Now the nice thing about GTMetrix is it gives you a reduction in size. Because my images have already been reduced in size one time, my total size to reduce is very small. So as you proceed through this next step run scans in between. Remember the original scan. You could always take a screenshot of it to save for reference if you like.
Image Optimization
Image optimization is about reducing the file size of images as much as you can without sacrificing the quality of the image. We all should know that the quality of the image has to do with the format as much as size. Having a lossless quality image would be fantastic, but it is rare to come across a TIFF image. The next best thing is a PNG image. It is much larger than a JPEG image, but you may resize it to a smaller size without too much loss of quality. I did not forget the SVG image by any means, but that is a topic for another document.
With SVG out of the way, let me give you a very brief rundown of the difference between JPEG and PNG. JPEG has a loss of quality in the compression method used. So each time you resize a JPEG image you will have an image that does not look as crisp as what you started with. Using JPEG as the primary image is not a good thing. Where you can improve upon this is to save the original JPEG as a PNG for sizing without the loss of quality. Then after you reduce the size of the image you may save it as a JPEG. If you find the image still needs to be reduced more open the PNG file, and not the JPEG you just saved. Doing this will allow for a much smaller amount of image quality loss.
If you need a transparent image, then you will need to save that as a PNG. A quick example of this is in the image. The image consists of three PNG files. The lady in the image originally had a city behind her. The plant leaves are the same image used twice.
I added animation effects to the leaves which makes them move back and forth in a looping pattern with different timing effects. This is the perfect reason for saving the images as PNG files.
Maybe you do not have a program for images. With a little practice, you could improve with free online services or by using a program like Gimp. In this document, I am not covering the use of the programs.
In some cases, it is better to download the original image and then scale it to the size you need. Remember that if the image is a JPEG save it to a PNG before you resize it.
After I scale the image I optimize it with a free online image optimization tool. There is a number available, but I use Compress PNG. I like this site because I can reduce JPEG, SVG, GIF, and PDF files.
It is important to remember that if you are replacing an image, there will be a new image URL created. It will not replace the original image. I use a plugin called FileBird that allows me to create new folders for images. I will create a folder called original for the current images on the site. I will then create folders for page images, blog images, or whatever else I may need. This organization is more for me to understand, as others usually upload an image to the default location.
I know we haven’t even got to the good stuff yet!
Asset CleanUp
Asset Clean Up has increased in size. That is understandable, though they offer a premium version of the plugin. I am only using the free version for what I desire to do. I will give you a few screenshots of the setup I have on this particular site.
Remember the “double-dip” comment from above? Well, even though this plugin includes the option to minify Javascript, and CSS, I am not going to use it. I am using the plugin as a way of reducing the number of resources placed on a page. Remember that I spoke of two other plugins, and they will handle the CSS and Javascript for me.
The sidebar on the admin screen, select Asset Cleanup -> Settings. The first tab Stripping the “fat” will present you with information for you to read. You must select the toggle there to proceed. Now select the tab Plugin Usage Preferences. The image below will display the settings I used, except that I turn on the front-end for using it.
After you are finished with Asset CleanUp, you may deselect items when you are not using the program. As long as the plugin is not deactivated, all your settings will remain.
A perfect example of this is you are designing for a client, and there may be editors, as well as other user groups that have access to page and post creation. Having Asset CleanUp present itself below every page will just confuse them. I recommend turning off both the front-end and the back-end display.
There is a setting to hide it from the admin bar. I select this option because it offers nothing in return except taking up space. There is also a section that is enabled by default to hide the WordPress Core Files. You may turn this selection off so that you will see what is on the page. You may find things like comments on pages that have no comments which you may remove. In my initial use of the plugin, I hide the items. Later, if I find I may need to remove a few more assets from pages I will display the items and have a careful look. Most of the time I do not have to mess with the core files.
You also have the option to hide it from the sidebar navigation where it will then only be accessed from the settings menu. I suggest doing this as well, unless you are hiding components from other users.
Remember that we have two other plugins for Javascript and CSS, so we are skipping those tabs. It is only my opinion on this topic, but I believe a plugin designed for one purpose is better than a plugin that tries to incorporate too many aspects into it. This is one reason I do not suggest or use Jetpack for WordPress. The plugin incorporates so many things, which in turn creates a very large footprint. I am not saying that Asset CleanUp will not do the same job as the other programs, so you decide to use the other two plugins. The next section is the Site Wide Common Unloads.
Site-Wide Common Unloads
Now in the section, you may disable Gutenberg. I would have as the site uses a page-builder theme, therefore the use of Gutenberg is not needed. Because of other site members that have access to create pages may use Gutenberg, it is a wise decision for me to leave it active.
The oEmbed feature I leave disabled. If a member selects to use a video in a post or on a page, this feature must be available to them. If you as a designer hide the admin bar from users as I do, then disable the Dashicons as well. And the last option is also up to you. If your website does not allow for comments then you may disable comment reply site-wide.
HTML Source Cleanup
Most of the items here I will leave up to you. You have the option to remove RSS feeds, not as widely used these days. These settings do help a little in page speed performance. You may even strip HTML comments if you like.
We are skipping the local fonts and Google fonts. The last section is called Disable XML-RPC. In a perfect world, everything would be secure in WordPress. If you disable XML-RPC you are in turn removing the ability for API applications to talk to WordPress. Do a little research before you disable it. The site I’m working on uses WooCommerce, which uses the REST-API, I must leave it enabled.
There are several tabs at the top you may explore if you like. Now you may use the front-end navigation as I do or the back-end navigation if you so desire. I prefer the front-end because I have a visual of what I do not need on the page.
Oh, wait a minute! I almost forgot something in the settings. Select the Test Mode tab and turn it on. Offering you a way of testing before it goes into action.
After you turn on test mode, you may select pages in the admin and open a page to view. You will see it populate under the page the list of items that load on page load. I use it on the front-end, so the following images are from that perspective.
As you can see, Asset CleanUp displays just under the footer.
There are several options for each item that is displayed on the page. You may select Site-wide, plus several other options. If you select the site-wide, you may use the, Make an exception option to load it on another page on the site. This is a great choice of payment gateways that are always located on every page in the site.
The primary things that I focus on removing are plugins that are not present on the page. In this image, you see RegistrationMagic. There is not a form or login screen on this page that uses this plugin.
I removed a total of 67 assets from the home page and that was just with removing plugins. I followed the same principles and went to every page on the site removing items.
Getting Rid of Expired Headers
The next step is pretty straight forward. You may use PHPMyAdmin or an FTP client to log into the host domain. It will depend on the setup where your directory is. Your root directory may be public_html or it may be in its directory by the name of your site. Select the root folder that holds your site and find the .htaccess file.
I use Visual Studio Code but I am a programmer. There are many options available and each has nice things about it, as well as bad things. I use to use Atom. I found Atom to be slow for me and had better performance with VSC. If you are just a user that inserts code in existing files, then you do not need such a feature-rich product. A simple product that works fantastic is Notepad++. There are many available, just do a Google search for code editor. You may use a default notepad program, but I do not recommend it.
The images below show VSC, Notepad++, and Notepad. Within VSC and Notepad++ you have options for changing display styles. I prefer a darker background because staring at a white screen too long will cause eye strain. I also like how it presents a numbering to the left of the code. Many times when you have issues in WordPress it will give you the file name and the line of code that is causing the issue.
Open the .htaccess file in the editor of your choice and scroll to the bottom. Add the following code to your file.
# BEGIN EXPIRED HEADERS <IfModule mod_expires.c> ExpiresActive On # Images ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" # Video ExpiresByType video/mp4 "access plus 1 year" ExpiresByType video/mpeg "access plus 1 year" # CSS, JavaScript ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" # Others ExpiresByType application/pdf "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" </IfModule> # END EXPIRES HEADER
Now save the file and upload it back to your root directory and overwrite the existing file. Now, what if you can not find your .htaccess file.
There are a couple of reasons for this. The .htaccess file may not have been generated yet or it is hidden by your file explorer. Change your settings to see hidden files.
If you do not have a .htaccess file WordPress will create one for you. Just go to Setting -> Permalinks and create your permalink structure. After you save an .htaccess file will have been created.
Another Bit of Code
Here is another piece of code you may use. You may create a must-use plugin with it as I did so that all my code is ready for each new site. You may also paste it in the functions.php file. The problem I have with the functions.php file is that if the owner decides to change themes, the code is gone.
function defer_parsing_of_js($url)
{
if (is_user_logged_in()) return $url; //don't break WP Admin
if (FALSE === strpos($url, '.js')) return $url;
if (strpos($url, 'jquery.js')) return $url;
return str_replace(' src', ' defer src', $url);
}
add_filter('script_loader_tag', 'defer_parsing_of_js', 10);
I know this is long, but I want to be as thorough as possible. Only a couple of steps to go!
Async Javascript
Remember a paid cache, and maybe some free ones you may defer your javascript files. I do not use Async Javascript on my site as WP Rocket handles it for me. If you are using a free cache plugin, I would probably recommend using this plugin over the cache plugin you are using.
This plugin offers a wizard. Sign up for a free GTMetrix account and place your username and the API key they provide you. Then run the wizard it will set it up for you.
When complete, the wizard will provide you a couple of links. Go to each of the links and ensure that everything on the page is working and looks correct. It may also provide you a couple of suggestions for improvement. I believe that defer the Javascript until after the HTML is the best.
The async attribute is used to indicate the browser that the script file can be executed asynchronously. HTML parsing must pause while the script is executing, creating a delay in the display of the HTML script.
The defer attribute tells the browser to only execute the script file once the HTML document has been fully parsed. This means the page will be rendered for the site visitor before the execution of any Javascript takes place.
Autoptomize the basics
This plugin is a one-page set up for the free version. Feel free to make any adjustments if you like. I do not use the Short Pixel image tool, the extras tab does present a few features, but I do not use them either. I only use this for the optimization and minification of Javascript and CSS. Below is the image of the settings I used.
The Last Step
Wow, we are getting somewhere now. I know this has been long, and I am proud that you are still with me. I also know that I titled this the last step. For the most part, it is, although there are a couple of followups before we get to that point.
Go back to GTMetrix and run a new scan in a new tab. You still should have your original scan for comparison. Here is an image of my new scan.
I created a chart for the results.
Content
1st Scan
Final Scan
PageSpeed Score
C (78%)
A (91%)
YSlow Score
D (64%)
B (83%)
Fully Loaded Time
12.0s
5.3s
Total Page Size
2.16MB
1.30MB
Request
165
75
From the chart above, you see my improvements. I have got my load time from 12 to 5.3 seconds. My total page size was reduced by .86MB, and my requests have dropped by 90.
As a side note on the scan above, notice a few items that are not parsed files. These are external sources that may be added to Async Javascript. This is a simple process that I did not follow up with yet.
The setting of Async Javascript allows you to add additional file extensions. It is possible that because I set it to defer in the original setup, that I may need to add the links to the files to the Scripts to Async in the image above.
There is also a place to exclude certain scripts as well as extensions. Use what is available to you here and include additional scripts that did not pass in GTMetrix.
Conclusion
With the use of all free plugins and a little work, I was able to get a website running both smoothly and quickly. Even with a premium cache, I still use Asset CleanUp to improve page load times. I want to give my thanks to the plugin authors of all the plugins I mentioned in this document. Even though your name is not in the document, there are links to all of the plugins included.
I hope you enjoyed the document and that you found it useful. If you need assistance, please leave a comment. If you need to hire someone to design, repair, or improve your website performance contact me at LWhaley.com.
List of Links
I’ve created a list of links for all items I mentioned in the article. Please consider a purchase of the professional versions of any of the plugins mentioned in this document.
The WordPress community is a fantastic place with a great many contributors furthering the development of one of the best content management system.
- https://lwhaley.com/
- https://cloudflare.com/
- https://bunnycdn.com/
- https://gtmetrix.com/
- https://wordpress.org/plugins/wp-fastest-cache/
- https://wordpress.org/plugins/a3-lazy-load/
- https://wordpress.org/plugins/wp-asset-clean-up/
- https://wordpress.org/plugins/async-javascript/
- https://wordpress.org/plugins/autoptimize/
- https://wordpress.org/plugins/imagify/
- https://wordpress.org/plugins/filebird/
- https://compresspng.com/
- https://code.visualstudio.com/download/
- https://notepad-plus-plus.org/downloads/
- https://wordpress.org/plugins/broken-link-checker/
- https://wordpress.org/plugins/shortpixel-image-optimiser/
- https://gimp.org/
- https://inkscape.org/
- https://pixlr.com/
- https://www.sumopaint.com/
- https://atom.io/
