To convert images to WebP you can do it manually or use a Photoshop Plugin.
The manual version is through the webbased tool from ezgif that’s aptly called Jpg to Webp (there’s png version there too!).
If you have photoshop then you can read up this tutorial by CSS-Tricks for how to use photoshop to save as WebP.
Step 2: Setup Browser Caching
Browser caching is basically the process where once you visit a website then the images, css files, javascript, fonts can be stored in cache. That way the next time you request them again it’s already available.
In the htaccess file on your website you can setup how long you would like each type of file to have caching for. In other words how long should it use the cached version before requesting a new one.
And there will often be times when you need a script of update an image. In cases like this setting expires allows you to let the browser know to expire the old image and use the new one.
There are two main ways to setup Browser Caching.
- If you have WordPress then you can use any number of plugins that are available that support browser caching. There are even all in one plugins that will provide a combination of tasks to speed your website in addition to just the browser caching. Two of the most popular plugins are WP Smush.it & W3 Total Cache but you can compare more plugins and see which one is right for you.
- If you’re not using WordPress and have a custom made website then you can setup caching and expires through your htaccess file. Always be careful to backup your htaccess file before making changes to it. I used the below code which supports different font types and also the webp format.
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
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 / Font
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
Step 3: Enable GZip Compression
When I implemented the caching above I specifically mentioned browser caching because this really is something that happens when YOUR browser first visits the website. With GZip compression the changes occur on the server side so that when your browser requests a CSS file then it receives a compressed version, then your browser caches it until it expires.
GZip compression which won’t affect images but instead it’ll compress text based files such as css, html, javascript and other files that tend to have a lot of empty whitespace.
GZip compression can compress files by up to 70%. And it’s very easy to enable. You can use one of the plugins that I mentioned in step 2 or manually through your htaccess file. Here’s the code below for gzip that I found over at GTMetrix Gzip Compression article.
# 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 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
Those are the main steps that I took to improve the my speed and thus my score. You’ll see this score fluctuate up and down. There are additional steps that you can take too which I’ll update below as soon as possible.
Do you have any tips on how to further speed Google Pagespeed Score? Post your comment below!