3 Quick Google Page Speed SEO Tips to Make Your Image Heavy Website Much Faster

A few simple steps could improve your score up to +30-40%

Portfolio websites with their large and plentiful images are download heavy by nature. My most recent design portfolio is no exception - a single scrolling page with lots of images and video. So I wasn’t completely shocked when I was tidying up the code to see a 0/100 score on Mobile and Desktop Speed over at Google. I had to do something without spending too much time. The steps below alone cut the page weight in half, raised the score +35% on Google and resulted in a very good score on Pingdom.

Here’s how to get started improving your Page Speed

Step 1 - Speed Test

Run your site through the below to see how you’re doing:
https://testmysite.thinkwithgoogle.com
and here:
https://tools.pingdom.com

Depending on your time, resources and skill set – it may not be necessary or cost-effective to fix all of the issues presented, or at least not right away. In most cases there will be some low hanging fruit that can give you a quick boost.

Step 2 - Optimize Images

Run your images through Tiny PNG (which handles jpegs too). You can reduce your page download size by > 50% in just a few minutes
https://tinypng.com
There are also more robust options like: https://kraken.io/

Step 3 - Compression & Browser Caching

Enabling compression & Leverage browser caching accounted for close to 10% improvement on Google.

Example settings for Apache .htaccess

AddOutputFilterByType DEFLATE text/html text/plain text/xml
AddOutputFilterByType DEFLATE text/css application/x-javascript
AddOutputFilterByType DEFLATE text/css text/html text/plain text/xml text/javascript
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>

 All of the above said and done, there's room for more improvement. When I’m done making all final tweaks to the portfolio website, minimizing files will provide a boost as will fixing "Parallelize downloads across hostnames”. Perhaps topics for a future blog post...

Are you using NGINX or need other resources? Check the links below:

https://varvy.com/pagespeed/cache-control.html
https://varvy.com/pagespeed/enable-compression.html
https://developers.google.com/speed/docs/insights/EnableCompression
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#defining-optimal-cache-control-policy

Comment