From the past few days, I was on a mission to create a WordPress site that is super fast and achieves 100% on Google’s PageSpeed Insight’s test. I succeeded. From knowing almost nothing on how to tweak my WordPress site to making it as I desired seems like an achievement.
My blog is showing 100% score on Google’s PageSpeed Insight. Whether it is desktop or mobile version, it has achieved 100%. I know my site is super simple in design, it is because I removed all the bells and whistles. My goal was to have a small and fast website that is solely content focused rather than having a glossy and colorful site. Because I know that whenever you – a reader – visits a site, you directly go for the content. You read the content, and if you get what you wanted, you stick there, else you run away. You do not worry about what design the site’s footer was or the design of its header. If you do not like the content, you may probably never ever visit again. Therefore, I decided to focus on what matters most – the content. You can read the content of this page with ease. No distraction of any kind. This site does not even have a header with the website’s name on each page. It should be kept, but… :)
Another important thing was to ensure that a reader finds the content of this site quite easily, that is, navigation should be intuitive. Navigation should not force you to learn new things. Therefore, I kept it simple. Traditionally, navigation is either found at the top or at the bottom of a webpage. So, you are already trained in where to find a site’s navigation. I kept the navigation at the bottom. You can go to the homepage of this site from the Home link at the end of this article. And there you will find what this site is about along with the list of all the articles that I have written on this site.
How to create a superfast WordPress site?
I am not in a position to give you a full blown technical know-how, but I can tell you what I did to achieve the above goal so that you can replicate if you desire.
The first thing I did was to remove all the plugins that was not necessary. Plugins generally decrease the site speed. I decided to use custom codes wherever possible. It often happens that in order to do a small thing on your site – like hiding footer links – you download a plugin, but that plugin comes with additional features that become a burden for the site. Where you could have used one or two lines of code to get what you wanted, with plugin you get hundreds of lines of code. Each character or letter that you type in a code increases the size of your page. So, you can imagine what a plugin does to your site if it has several lines of unnecessary code that load on your front end.
The second thing I did was to create my own custom WordPress theme rather than using freely available bulky themes out there in the market. With some research I came to know that a WordPress theme has two main files – index.php and style.css. So I started to test it and moved one step forward with each progress.
- I first created an empty index.php and style.css on my computer and zipped them in a folder.
- Uploaded this folder on my WordPress as custom theme. It gave me an error. It was because as per WordPress’ guidelines, there are some information regarding a theme that you must provide in your style.css file like Theme Name, Author Name, Version, etc.
- I inserted required information by researching through WordPress’ documentation, and then reuploaded the folder. It got accepted.
After I followed the above step, it was kind of a Eureka moment for me. I had a clean slate from where I can move forward to fill whatever I needed on my site. So I created a list of things that I needed on my site:
- Blog post pages with headings, content, and published date
- A static front page where I can list all posts
- A footer visible on all pages to list static pages
- A 404 pages where users will land if they mistype any page or post URL
Now, as I had limited understanding about the hooks and other codes of a theme, I decided to attempt a different approach. I went over to Underscores.me and downloaded a template. Underscores is a bare minimum WordPress template that is provided by Automattic (the team who is behind WordPress’s success). I uploaded this template on WordPress and found that this template is an skeleton with necessary codes to kick start a site, in which you can add some necessary CSS as you want. But, the template was not scoring 100% on Google’s PageSpeed Insight. Also, it had lots of features that were not on the list that I wanted.
I had a distance to cover. At one end there was the empty theme that I had uploaded on WordPress. It had nothing. And on the other end there was Underscores template. I had to be somewhere in between, but question was where to start? Should I start with the empty theme, bit by bit copying necessary codes from Underscores and test on my site? Or, should I start with the Underscores theme, bit by bit deleting unnecessary codes and test the theme on my site? I decided to pick the Underscores theme and make it thinner. I chose this route because I thought it is easy to remove the lines of code that I can understand and determine I don’t need rather than picking what I need from all the files of Underscores. I was more afraid of breaking the site (because once I had broken the site and I had to reupload a backup theme file through FTP to regain the site’ access via the URL).
And then with several trial and error, I successful scrapped everything that I did not need in Underscores and uploaded the final version of the theme. The best thing I found about the Underscores’ theme is that it is somewhat straightforward and you can understand it with some effort. Contrarily, if you pick some custom themes that are out in the market, published by some company or a developer intended to sell, then you may have a hard time decoding those themes. It is because often coders create complexity in their themes either to make it harder to understand for average users or due to their style of building websites. On the other hand, Underscores’ theme has no intention to generate income of any kind and the theme has been intentionally made to be tweaked.
Here, I have not gone in too much detail on what I removed and what I kept in my theme. I will have to spend another two-three hours writing. But, I can tell you one thing that if you are attempting to create such theme, then constantly check your progress. I had the goal to achieve 100% score on Google’s PageSpeed Insight. So after I was done with all the necessary removals of the site features like page navigation, header, post tags, and others, I checked the score on Google’s PageSpeed Insight.
One of the nice features of Google’s PageSpeed Insight is that it also tells you what you can remove or improve to increase your sites’ speed. So, once you have uploaded the theme on WordPress, check for its speed to get the list of issues from Google’s PageSpeed Insight. After getting the list, pick one item from the list and search on Google to know how to handle that problem. I am pretty sure you will find several blogs with tutorials on how to resolve that problem. Those blogs will have some lines of codes that you can insert in your theme file to resolve that problem. Be aware, that you will also find sites that offer plugins to handle that error, like using WP-Cache to compress images and all. But, it is a vicious circle. Using plugin to solve one issue may give rise to another speed issue that you may have to solve. So go manual. It is time taking, but fruit will be sweet. This is how I did it.
And every time you solve an issue, check your page URL on Google’s PageSpeed Insight to see if the issue is still there. If it is still there, delete the code that you inserted in your theme and go back to Google Search and look for someone else’s solution. There can be variety of solution for one problem, what may work for you is a matter of trial, error, and patience.