Last week, I was contacted by one of my clients who regularly order articles.
This time, the project is not about content writing but website speed optimization, particularly for mobile users.
I hid the domain due to the non-disclosure agreement.
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, I 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.
I had two goals.
The first was to optimize the website for speed.
The second was to make it responsive or mobile-friendly.
This website used the Salient WordPress theme before it was handed over to me for optimization.
I was asked to replace the Salient theme with the Twenty Seventeen WordPress theme.
If you are familiar with this default WordPress theme, you know it has limited capabilities and features compared to premium WordPress themes.
Anyway, 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 achieving the desired page speed and maintaining the website’s aesthetic.
After all, we must keep the 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.
I will show you the BEFORE and AFTER of the optimization recommendations of GTmetrix.
I will also tell you how I achieved the improved scores.
PageSpeed: Optimize Images
- Problem: 13 images needed to be optimized.
- Solution: I adjusted the dimension of the mentioned images. I replaced the old images with the optimized ones. Note that adjusting the image dimension 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: 22 cacheable resources weren’t optimized for browser caching.
- Solution: I went to the website’s cPanel, 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 fear of messing it up.
After all, messing up with the htaccess file could lead to an inaccessible website.
So, leave it to an expert like me.
PageSpeed: Defer Parsing of Javascript
- Problem: A total of 699.1KB of JavaScript was parsed during the 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 task requires coding knowledge. Practice clean coding.
- Result: The score improved from 57% to 95%.
BEFORE
AFTER
PageSpeed: Minify CSS
- Problem: 16 resources must be reduced to 15.4KB
- Solution: I removed unnecessary CSS codes such as code comments and unused codes. This task 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 will not discuss how I did it, but you can search on Google for 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. 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 Javascripts and 17 external stylesheets.
- Solution: I combined the 28 external Javascripts. 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: 54 components were not cookie-free. Most of which were JScripts and CSS files.
- Solution: I fixed most of the JScripts and CSS files. The only way to fix the images is to use a Content Delivery Network (CDN). My 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: 7 components 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 suggest 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: I adjusted the size of the favicon. I declared the .ico file type as a cacheable file in the htaccess.
- Result: The score improved from 90% to 100%.
BEFORE
AFTER
Ladies and gentlemen, the final result:
Why Optimize Your Website?
For the past 18 years that I’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 the slow one. Have you ever heard the sound of a cash register? Cha-ching! That’s the sound of 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 long 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 worldwide 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 while you’re asking this question. You got to move. Now!
- 3 Reasons Why I Get Hired as a Blockchain, Crypto, or Web3 Content Writer - August 19, 2023
- Is Multiskilling Key to Freelancer Success? - August 1, 2023
- ALERT! Google AdSense Rejects Websites with AI-Generated Content - July 30, 2023
