Website Speed Test: What I Did To Get A Score Above 90

Pingdom web page speed test result 92

Alongside mobile responsiveness, where a website will display the way it should on any mobile device whether it is a tablet or a smartphone, Google is also interested in “website speed”, which has a direct impact on the user experience.

Users are more likely to move on to another site if they feel that the website speed is taking too long to load or if the content presentation is not displaying properly on a mobile device.

“Today, more people search on mobile phones than computers. People are 5 times more likely to leave a site if it isn’t mobile-friendly.” – Google

This is where my obsession with website speed begins!

I finished the site development and uploaded to server at the end of December 2016 and to my disappointment my page speed was terrible. I tested on different sites like, Pingdom, GTmetrix and so on. I was surprised because I thought that the fact that I coded the site by hand (did not use a bloated theme from one of the market sites) that I would fair quite well in the speed arena. Not!

I knew by instinct that the mobile friendliness or more specifically the responsive css breakpoints would do their job correctly because I paid close attention to them when coding the site.

But the disappointment regarding the website speed made me want to change this lack of performance and began digging around to find different ressources on how to improve speed rankings. Then after implementing a few recommendations I literally saw a significant improvement in the Mobile and Desktop  website speed tests .

Here are some things I did in my .htaccess file to improve the overall website speed for an enhanced (UX) user experience

Enabled gzip compression

Using gzip compression will reduce the size of the transferred response by up to 90%. All modern web browsers support this and is very efficient for user who visit your site for the first time, it will make page loads snappier.

# Start GZIP compression

# Compress HTML, CSS, JavaScript, Text, XML and fonts
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
 AddOutputFilterByType DEFLATE application/x-font
 AddOutputFilterByType DEFLATE application/x-font-opentype
 AddOutputFilterByType DEFLATE application/x-font-otf
 AddOutputFilterByType DEFLATE application/x-font-truetype
 AddOutputFilterByType DEFLATE application/x-font-ttf
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xml-dtd
 AddOutputFilterByType DEFLATE application/rdf+xml
 AddOutputFilterByType DEFLATE application/atom+xml

AddOutputFilterByType DEFLATE font/opentype
 AddOutputFilterByType DEFLATE font/otf
 AddOutputFilterByType DEFLATE font/ttf
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE image/x-icon
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
 BrowserMatch ^Mozilla/4 gzip-only-text/html
 BrowserMatch ^Mozilla/4\.0[678] no-gzip
 BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
 Header append Vary User-Agent

# End GZIP compression

Leveraged Browser Caching

This is another important step to increase speed and reduce load times. By leveraging your browser cache you’re basically loading previously downloaded images, html, css and javascript from the last time you visited my site. But if it has been a while the there is a trigger that refreshes the content so that you only see the latest and greatest stuff.

### Leverage Browser Caching
Header unset Pragma
FileETag None
Header unset ETag

# Add correct content-type for fonts
AddType application/x-font-woff .woff

## EXPIRES CACHING ##
ExpiresActive On
 ExpiresByType image/jpg "access plus 1 year"
 ExpiresByType image/jpeg "access plus 1 year"
 ExpiresByType image/gif "access plus 1 year"
 ExpiresByType image/png "access plus 1 year"
 ExpiresByType text/css "access plus 1 month"
 ExpiresByType text/html "access plus 1 month"
 ExpiresByType application/pdf "access plus 1 month"
 ExpiresByType text/x-javascript "access plus 1 month"
 ExpiresByType application/javascript "access plus 1 month"
 ExpiresByType application/x-javascript "access plus 1 month"
 ExpiresByType application/x-shockwave-flash "access plus 1 month"
 ExpiresByType image/x-icon "access plus 1 year"
 ExpiresByType application/x-font-woff "access plus 1 year"
 ExpiresDefault "access plus 2 days"
## EXPIRES CACHING ##
### END Leverage Browser Caching

Eliminated render-blocking Javascripts when possible

This was by far the most rewarding exercise for bumping up website speed. Render-blocking Javascripts events happen on page load when your browser tries to resolve and download scripts, either from your own web server or from third parties like google fonts, jquery. I tried to avoid direct linking to 3rd party website in favour of serving cached and minimized files directly from my web server.

To do this I’m using a plugin that compresses and minifies the css and scripts files and manages where they are to be loaded, either in the header or footer. I also use a plugin that caches all posts, pages to speed up delivery when requested by the user.

Deregister the default jQuery and load a more recent version in the footer.

It basically defers this render-blocking native WordPress jquery script to the footer (, true) where as previously it would try to load before the actual page content, slowing things down.

function replace_script() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', false, '3.1.1', true);
    wp_enqueue_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'replace_script' );

Loaded fonts using css @font-face

I was getting a render-blocking warning for linking directly to google font via a link so I decided to load fonts using @font-face from my web server instead. This is a good method if your site has several different font styles to load. The plugins responsible for caching and minimizing will handle the speed issue. Saved a couple of points here as well.

@font-face {
   font-family: 'Roboto Slab 300';
   src: url('web-fonts-roboto-slab/300/RobotoSlab-Light-webfont.eot');
   src: url('web-fonts-roboto-slab/300/RobotoSlab-Light-webfont.eot?#iefix') format('embedded-opentype'),
   url('web-fonts-roboto-slab/300/RobotoSlab-Light-webfont.woff') format('woff'),
   url('web-fonts-roboto-slab/300/RobotoSlab-Light-webfont.ttf') format('truetype'),
   url('web-fonts-roboto-slab/300/RobotoSlab-Light-webfont.svg#roboto_slablight') format('svg');
   font-weight: normal;
   font-style: normal;
}

Other significant measures I took to optimize the overall website speed performance. Every little bit seems to help.

Optimized ALL images

Made sure ALL my images are optimized for maximum quality/performance. That being said this is to a large extend a photography site so I didn’t want to compromise any quality by having images with jpeg compression artifacts. This can be done directly when saving in photoshop but also I use a plugin that compresses the images even more on the fly upon upload to Media Library.

Used CSS image sprite technique

This bumped me up by 2 points on Pingdom believe it or not, simply by combining all my social media icons into one file and using css to display them. This reduces the number of database requests improving the overall website speed.

Avoided and eliminated plugins when possible and wrote my own code

One example, I deleted a plugin that had as its primary function to display images in a pop up window. The plugin generates its own css and js which resulted in a couple of points less on the page speed-ometer!!

I ended up using the native lightbox modal function burried deep in WordPress called Thickbox, tweaked the CSS to modernize the look.

Checked my error log report

Both in WordPress and in the browser for for potential warnings that could slow things down.

Well that’s about it, I’ll stop obsessing over these website speed test results because to get to 100 I will need to spend 100% of the effort I used so far to get to this point!!

Here are some online website speed testers I use:

Pingdom

GTmetrix

WebPageTest

Happy coding.

Leave a Reply

Your email address will not be published.

Views: 228