Google has been explicit that website speed is an SEO signal.
So, one should always be looking for ways to reduce website load times.
Google offers great advice on this too. This is a simplified
explanation of what Google recommends
Browser caching is a way of telling browsers when to use the local copy of the resource instead of sending an HTTP request to the web server. A resource is either an image, a CSS or JavaScript file. This is done by setting the maximum age or expiry date for the resource in the HTTP headers. Show your programmers how to go about setting HTTP headers.
If you are going for responsive design, where you need resizable images where quality needs to be maintained, SVG is a good format to experiment with. For the speed part, SVG works well with GZIP and compresses to much smaller sizes than PNG but renders relatively slowly on the browser screen. So, choose carefully. There is a great post you can refer to about using SVG and sprites.
Taking these 3 simple steps will go a long way in improving your visitors experience on your website.
Bonus link:
Step 1 – Take advantage of Web Browser Caching
Browser caching is a way of telling browsers when to use the local copy of the resource instead of sending an HTTP request to the web server. A resource is either an image, a CSS or JavaScript file. This is done by setting the maximum age or expiry date for the resource in the HTTP headers. Show your programmers how to go about setting HTTP headers.
What Google recommends
- Set caching for not just images but also other resources like CSS, Javascript files.
- Set caching headers aggressively for all static resources with periods ranging from minimum one month up to a year.
Step 2 – Optimize your Images
Images are one of the critical components affecting web page speeds. There are some important considerations for this. The file format matters and there are many. File size is important and sending a large file and showing it resized during page load is bad practice.What Google recommends
- Use PNG over GIF for images.
- Ensure actual image size and the size given in your HTML code matches. Sending a larger file and resizing through HTML means additional kilobytes which can be avoided.
- Use image compression.
If you are going for responsive design, where you need resizable images where quality needs to be maintained, SVG is a good format to experiment with. For the speed part, SVG works well with GZIP and compresses to much smaller sizes than PNG but renders relatively slowly on the browser screen. So, choose carefully. There is a great post you can refer to about using SVG and sprites.
Step 3 – Defer Parsing of JavaScript
This means JavaScript is executed after the page has finished parsing. This is useful to apply to the JavaScript which has nothing to do with the rendering of the page. You can learn more about the ‘defer’ attribute here.What Google recommends
Besides ‘defer’ Google also suggests ‘asynch’ for some situations and also uses a JavaScript in comments with ‘eval()’ as an option for mobile. More details from them hereTaking these 3 simple steps will go a long way in improving your visitors experience on your website.
Bonus link:
- An online resource to quickly check web page speed ratings using tools provided byGoogle and Yahoo.
Tidak ada komentar:
Posting Komentar