Last week, we were contacted by one of our clients who regularly order articles. This time, the project is not about content writing but website optimization for speed and mobile users. The website is indicated on the image below.
The website had bad PageSpeed and YSlow scores on GTmetrix. It took over 5 seconds just to load the front page. The front page’s total size of 4.79MB was too big. Although the 5-second load time wasn’t as terrible as those websites that take over 10 seconds to load, we knew this website could load faster if optimized.
You’re going to see PageSpeed and YSlow a lot in this article. GTmetrix uses Google PageSpeed and Yahoo! YSlow. These are two of the frequently used speed analysis tools for websites.
We had a two-fold goal. The first was to optimize the website for speed. The second was to make it responsive or mobile-friendly. My team did the optimization on the aesthetics of the website. I took care of the code optimization.
This website was using the Salient WordPress theme before it was handed over to us for optimization. We were asked to replace the Salient theme with the Twenty Seventeen WordPress theme.
If you are familiar with this default WordPress theme, you know that it has very limited capabilities and features compared to premium WordPress themes. Nonetheless, the magic is in its minimalist nature. The simpler the theme, the lesser requests it needs to process when loading the page. Less is faster.
The challenge is in achieving the desired page speed and maintaining the aesthetic of the website. After all, we must keep the exact same content on every page.
Making do with the limited aesthetic features of the Twenty Seventeen theme required lesser work than optimizing the misconfigured elements of the website. So, I’ll focus on the optimization part in this article.
I will show you the BEFORE and AFTER results of the optimization recommendations of GTmetrix. I will also tell you how we achieved the improved scores.
PageSpeed: Optimize Images
- Problem: There were 13 images that needed to be optimized.
- Solution: My team adjusted the dimension of the mentioned images using Adobe Photoshop. They replaced the old images with the optimized ones. Take note that adjusting the dimension of the images on Media Library won’t fix it. You have to adjust the dimension of the images on your computer first. Then you upload them. Make sure the optimized version has a different filename than the un-optimized image. Otherwise, the optimized version won’t be recognized by WordPress.
- Result: The score improved from 0% to 100%.
PageSpeed: Leverage Browser Caching
- Problem: There were 22 cacheable resources that weren’t optimized for browser caching.
- Solution: I went to the cPanel of the website, located the htaccess file, edited it, pasted the code below, and saved it.
- Result: The score improved from 19% grade to 96%.
This is where it gets crazy for most people, especially those who are not coders. For most, finding the htaccess file alone is painstakingly difficult. Some people cringe at the sight of the cPanel for the fear of messing it up. After all, messing up with the htaccess file could lead to an inaccessible website. For this reason, most people prefer to outsource this work to us at iPresence Digital Marketing, Inc.
- Solution: What I did to fix this could be too much to handle for non-programmers. I don’t want to unnecessarily lengthen this post by posting the bunch of codes I adjusted. For learning purposes, I suggest you read this article from GTmetrix.
- Result: The score improved from 44% to 75%.
- Problem: There were 24 resources with a file size that needed to be reduced to 52.3KB
- Result: The score improved from 57% to 95%.
NOTE: Are you wondering why four resources remain un-optimized after the optimization? Errors occurred when I touched these four files. They are better off untouched. Here’s the thing. The recommendations of GTmetrix are not in any way meant to be obsessed about. I know it’s difficult not to be obsessed about perfection especially that I am a computer scientist. However, I know that optimization is not the synonym of perfection. Hence, cutting the page load time by a significant degree is already an accomplishment worthy to be blogged about.
PageSpeed: Minify CSS
- Problem: There were 16 resources with a size that must be reduced to 15.4KB
- Result: The score improved from 87% to 99%.
- Solution: I inlined the affected script. I am not going to detail it how I did it but you can search on. Please search on Google how to inline scripts.
- Result: The score improved from 92% to 100%.
YSlow: Add Expires Headers
- Problem: There were 61 static components without a far-future expiration date.
- Solution: I added an expiry date for the concerned extension names on the htaccess file of the website. The code that I used to leverage browser caching took care of this.
- Result: The score improved from 0% to 67%.
YSlow: Make Fewer HTTP Requests
- Result: The score improved from 0% to 80%.
YSlow: Use Cookie-free Domains
- Result: The score improved from 0% to 30%.
- Problem: There were seven (7) components that needed to be minified.
- Solution: I used the same script and CSS minification technique for PageSpeed.
- Result: The score improved from 30% to 80%.
YSlow: Configure Entity Tags (ETags)
- Problem: There were 18 components with misconfigured entity tags.
- Solution: Yahoo performance rules on ETags suggests that ETags be turned off. So, I went to the htaccess file of the website and put this piece of code: FileETag none
- Result: The score improved from 0% to 100%.
YSlow: Make Favicon Small and Cacheable
- Problem: The favicon was more than 2000 bytes and was not cacheable.
- Solution: Edmark adjusted the size of the favicon. I declared the .ico file type as a cacheable file thru the htaccess.
- Result: The score improved from 90% to 100%.
This is now how the website performs after all of the optimization procedures.
Why Optimize Your Website?
For the past 18 years that we’ve been helping SMEs with their digital marketing needs, I can’t think of reasons better than these:
- An optimized website loads fast. Who doesn’t like that?
- An optimized website has a better conversion rate than cranky websites. Have you ever heard the sound of a cash register? Cha-ching! That’s the sound of a conversion, too. You like that, huh?
- A website that loads fast has a relatively low bounce rate, which is good for search engine optimization (SEO). You don’t want your site visitors to click the Back or X button just because your site takes too much time to load, do you?
- Did you know that 85% of web traffic comes from a search engine such as Google and Yahoo? You have a bigger chance of getting your website indexed on the first page of search engines if it is properly optimized.
- Studies show that approximately 60% of all websites in the world are not optimized. Get your website optimized so you will be in the top 40%.
When Should You Optimize Your Website?
ASAP. Your competitors could be optimizing their websites already while you’re asking this question. You got to move.
Who Should You Hire to Optimize Your Website?
I don’t know why I had to put that question as a sub-heading. Isn’t the answer obvious? Hire us. We’ve been doing this for nearly two decades. Invest in our experience. You’ll never go wrong. Email us at firstname.lastname@example.org.
- AskJaycee#14: Build a Business Based on Your or Customers’ Personality? - August 21, 2020
- AskJaycee#13: Will the Stock’s Price Go Up or Down? - June 19, 2020
- AskJaycee#12: Will the Philippine Stock Exchange Index Re-enter 7,000 This Week? - June 15, 2020