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