Intro Wondering how page speed optimization can help with SEO? Ever since Google introduced mobile-first page indexing. Page speed has become a top priority for web devs and marketers alike on the net. Especially since large websites stand to lose millions of Euros or more for every fraction of a second their website takes to download. Have you ever wondered why Google search queries have such a fast page speed? Google optimizes it's algorithms and page speed for this task. And Google expects you to conduct page speed optimization as well. Slow loading is detrimental for search engine optimization (SEO) because it can lower your site’s ranking, resulting in fewer visits, reads, and conversions; Page Speed Optimization; Reducing Your Page SpeedWe’re going to go through some high-level paths to increasing your page speed. Leaving out the bleeding edge solutions that may or may not shave milliseconds off your page speed. We'll focus on some basic page speed optimization techniques in this post. Generally for the web, your page size should be around 500KB or half a MB. And should load in less than 3 seconds on a mobile device. So let's begin shall we? any site that takes longer than three seconds to load is in serious SEO trouble. Ensuring that any multimedia content is optimized for fast load time and performance is key. Tip 1: Optimize your images No doubt. You’ll get the biggest bang for your buck when you optimize images on your webpage. Image Format: There are 3 main image formats that are compatible with modern browsers. PNG, JPEG and WEBP. Some people recommend WebP images. While they do have better compression ratios and are compatible with most modern browsers. I personally use png when details are intricate, I need transparency or the resolution required is high. And I use JPEG otherwise. PNG formatted images are known as lossless images. They store all the image information. JPEG images on the other hand are lossy. They lose some of the image information during compression. Raster vs Vector Images: When to use raster vs vector images: Raster images ie. PNG, JPEG or WEBP encode information pixel by pixel usually. This is memory and bandwidth intensive. Especially for mobile devices. Vector images on the other hand. Simply trace or outline images and can be resized easily. They are suitable for patterns and logos. But not for photos or detailed images. Serve responsive images: By serving images of the required dimensions. You can save memory, bandwidth and page speed times all at once. Responsive images are served from adaptive websites and are common in Content Management Systems such as WordPress. Adjust the bit depth of your image: If you were a painter, you wouldn't squeeze red, blue and orange paint on to your palette. If you knew your painting only required black and white paint. This is kinda like adjusting the bit depth of your image. If you have to use banner or larger images, the adjusting bit depth can create large gains. By removing colors from the palette that aren’t necessary. Use Delta Encoding for Your Images: Delta encoding works like this. If you have 2 adjacent pixels of the same colour. Then why waste space saving the information on both pixels? Just save one pixel’s information and only save the difference for the second pixel. In this case the delta would be zero. Remove EXIF Data on Your Images: Each image you create is stored with EXIF data. Everything from GPS location if the device has a GPS chip. To camera information and so on. Lazy Load Your Images: By loading images on your webpage. Only when the visitor scrolls down the page and consumes the images. You can save significant resources. Personally, I use browser-level image lazy-loading. This form of lazy loading is compatible with most modern devices and is easy to implement. Optimize Your Javascript: Use the PPRL Pattern to Preload Javascript Assets. The PRRL acronym stands for Preload, Precache, Render and Lazy load.
Generally though, while also using the PRPL pattern. It’s best to inline critical JS and CSS above the fold for your webpage. Precaching assets with a service worker can help your page operate offline and reduce resources and page speed at the same time. Workbox provides a collection of tools that allow you to create and maintain a service worker to cache assets. Tip 2: Code Split Your Javascript Decide upon what JS you need and what JS you don’t need for every page. There is no point in downloading a large JS file on webpage number 1. If the JS is only used on web page number 2. Use web dev tools to find code that isn’t being used. And split it into different files. Remove unused JS: Any code that isn’t used on your site. You should get rid of. Use chrome web dev tools to find unused code. This holds especially true for libraries that might contain lots of unused JS code. Press Control+Shift+J (or Command+Option+J on Mac) to open Dev Tools.
Minification: Minification is the process of removing extraneous characters from your code ie. newlines and white spaces. If you are debugging on the client side. You can always use a Pretty Print function to create readable code again. Tip 3: Compression Compression is the ability of the server to zip or compress files and resources before sending them over the network to your device.Make sure your server is compressing it's downloadable content before sending it to the browser. This can save you lots of time and bandwidth at the end of the day. Finally So that's a brief run through of the various aspects of page speed optimization. We didn't cover the other methods of optimizing page speed. Simply because of the diminishing returns those methods will achieve. First concentrate on the above. If your web page speed is still too slow. Check your server for Time To First Byte and other metrics. Page speed optimization is a great first step towards optimal Google ranking. However writing great content is also a must. For info on how to research Google optimization. Alternatively, if ranking on Google isn't your thing. And you'd prefer to be the toast of the content networks ie. YouTube, Reddit, IndieHackers. Read this blog post on creating online content. Happy Hunting!
0 Comments
|
AuthorDeveloper. Marketer. General web nerd. ArchivesCategories |