How I Super-Optimized My Website To Load in 1 Second
This month has been all about website optimization for me. A few weeks ago, I realized that certain plugins were weighing down my site’s page load speeds which is obviously very bad because it disciurages your visitors from staying on your site. Infact, according to Kissmetrics, 47 percent of visitors expect a website to load in less than 2 seconds, and 40 percent of visitors will leave the website if the loading process takes more than 3 seconds.
I checked my site on Pingdom and GTMetrix to find that it took a shocking 5-8 seconds to load. Now if you check the initial page load takes anywhere between 990 mms to 1.5 seconds and the complete page load takes 2.2 seconds. Impressed by the result? Here’s how I did it.
Get Rid of Revolution Slider
I recently came across this article where guys over at WP Rocket have compared leading slider plugins based on their performance & speed. After reading about their findings, I started testing different sliders to see which one would load faster. I finally decided to remove revolution slider (which came pre-packed with my theme just like most other WordPress themes do these days and is one of the slowest loading sliders according to Wp Rocket team’s findings) and replaced it with Meta Slider. This saved me a whopping 1 second on Pingdom. The revolution slider may be packed with unparelleled features but speed is not one of them and I did not care much for the others because I just wanted a simple slider.
I found out that my theme was loading certain Google fonts by default and because I had changed my fonts since the installation, it was loading the default ones + the new one I was using. I worked with my developer to prevent unnecessary fonts from loading on to my webpages.
Install WP Rocket
No, I am in no way affifliated with WP Rocket and do not stand to gain anything by promoting them. My recommendation is soly based on my own exprerience. You can get it here.
WP Engine offers a range of features including the following and is the leading and most popular optimization plugin that packs a whole lot in one.
→ Page Caching
→ Cache Preloading
→ GZIP Compression
→ Browser Caching
→ Database Optimization
→ Google Fonts Optimization
→ Remove Query Strings from Static Resources
→ Minification / Concatenation
→ Defer JS Loading
Until now I thought using the ‘Save for Web’ option in Photoshop to export my images and hoping for the best was enough. Guess what? It’s not nearly enough. When I started investigating my GTMetrix report, I realized I has several huge images on my homepage that the browser was scaling down so that they fit in my website layout + the images could be losslessly optimized further.
To fix this, I now use Imagify. Imagify is a very effective image optimization tool developed by the same team that developed WP Rocket and they play nice together.
Convert JPG/PNG Images to WebP
I converted all my JPG & PNG images to .webp format which is basically an image saved in the WebP (pronounced “Weppy”) raster image format developed by Google for web graphics. It is designed to reduce image file sizes over standard JPEG compression while maintaining the same or similar quality. WEBP files allow images to be downloaded more quickly. Since I’m on WordPress, I made this happen using the WebP Express plugin.