How We Improved the Page Speed of RCWindowFilms.com by 65%

0
700

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.

BEFORE OPTIMIZATION

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%.
BEFORE
AFTER

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.
<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>
  • Result: The score improved from 19% grade to 96%.
BEFORE
AFTER

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.

PageSpeed: Defer Parsing of Javascript

  • Problem: A total of 699.1KB of JavaScript was parsed during initial page load.
  • 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%.
BEFORE
AFTER

PageSpeed: Minify Javascript

  • Problem: There were 24 resources with a file size that needed to be reduced to 52.3KB
  • Solution: I removed unnecessary data on javascript such as code comments and unused codes. I also used shorter variables and function names. This requires coding knowledge. Practice clean coding, folks. Keep this in mind if you’re an Information Technology or Computer Science student.
  • 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. 

BEFORE
AFTER

PageSpeed: Minify CSS

  • Problem: There were 16 resources with a size that must be reduced to 15.4KB
  • Solution: I removed unnecessary CSS codes such as code comments and unused codes. This is similar to what I did to minify javascript.
  • Result: The score improved from 87% to 99%.
BEFORE
AFTER

PageSpeed: Inline Small JavaScript

  • Problem: The javascript file shown on the screenshot below had small response bodies.
  • 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%.
BEFORE
AFTER

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%.
BEFORE
AFTER

YSlow: Make Fewer HTTP Requests

  • Problem: The front page had 28 external Javascript scripts and 17 external stylesheets. 
  • Solution: I combined the 28 external javascript scripts. I did the same to the 17 external stylesheets.
  • Result: The score improved from 0% to 80%.
BEFORE
AFTER

YSlow: Use Cookie-free Domains

  • Problem: There were 54 components that were not cookie-free. Most of which were javascript scripts and CSS files.
  • Solution: I fixed most of the javascript scripts and CSS files. The only way to fix the images is to use a Content Delivery Network (CDN). Our client isn’t using a CDN. So, I left those images untouched.
  • Result: The score improved from 0% to 30%.
BEFORE
AFTER

YSlow: Minify JavaScript and CSS

  • 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%.
BEFORE
AFTER

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%.
BEFORE
AFTER

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%.
BEFORE
AFTER

This is now how the website performs after all of the optimization procedures.

AFTER OPTIMIZATION

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 contact@ipdmi.com.

Jaycee De Guzman

I am the founder and CEO of iPresence Digital Marketing, Inc. and Equilyst Analytics, Inc. At iPresence, we have been helping SMEs reach and dominate the global market through our digital marketing services since 2001. At Equilyst, we have been helping Filipinos experience a simplified and profitable stock trading and investing experience in the Philippine Stock Market since 2014.
Jaycee De Guzman

Do you have a comment?

This site uses Akismet to reduce spam. Learn how your comment data is processed.