I have spent a lot of time here talking about how content is so important to ranking on Google. I also mentioned the role that both speed and user experience both play in the rankings also. You might have written great content but if no one can actually access and read it, then it is useless. So if your website is suffering from slow load times, then I have some things that you should look into. You need to consider that what loads fast for you can be slow for someone else. This may be due to people using different devices, connection speeds and locations. So this is why you need to optimize both your content and speed.
Is Your Website Slow?
If you are running an e-commerce store with lots of products on it, then we have come to accept that your page load times might be longer than someone with a simple blog. Even the simplest of blogs can have speed issues for those who are not aware of it. Lots of blogs love to add pictures to make their articles stand out and look nice. Many times, people upload images without taking into consideration how large they are when uploaded. I will talk about optimizing images later on, but first we need to run a test to see how fast or slow your website is.
Check Your Website Using Google Pagespeed Insights
Check your website using Google Pagespeed Insights here:
I wrote an article that discusses the importance of Google Pagespeed Insights. I discuss what this test is and how it can help resolve speed issues with your website. In order to make your website faster, Pagespeed Insights is just one tool that you can use.
GTMetrix: The Waterfall Chart Can Show Your Largest and Slowest Loading Assets
There are many others that can help you like GTMetrix. This is another similar tool that can give you speed scores but the waterfall chart is what this test is mostly used for. The waterfall chart can show you the order that your assets are loaded and how long it takes to load each asset.
For most websites I have seen, they usually have image issues that slow their website down. In the next section, I will talk about how to optimize your images so that you can reduce the file size and still retain most, if not all of its quality. I will also talk about different image formats and even suggest icons if you need something to spruce your pages up.
Are Your Images Too Large? Resize or Change Their Format
Most people just upload images to their website without optimizing them first. This is something that most people do not think of because people just take pictures and upload them as-is. We all know that websites, like books and magazines need some pictures to make it look pretty. Without images, most websites would look plain. Again, this depends if your website needs many, if any images in the first place. Since most websites do have images, we will need to optimize them. First, I am going to talk about the two main image formats, JPGs and PNGs. Another image format, WebP, is a new image format that should be used with your website.
JPG: Mainly for Photographs
This is one of the most common image formats used mainly for pictures and photographs. When you take a picture with the camera on your phone, that image is more often than not stored as a JPG. Also, screenshots should be saved as JPGs also even though sometimes depending on how you create screenshots, they are saved as PNGs so beware about that.
PNG: Mainly for Logo or Illustrations
The other common image format is a PNG. This image format is mostly used for logos or illustrations that need a transparent background. A transparent background allows your image to use a background based on whatever the image is placed on top of. So this offers flexibility because you can use any color background that your PNG image will show through. So for example, if you place your logo on top of a blue background, then the PNG will have a blue background on it. If the background is black, the PNG will use a black background. Due to the flexibility of a transparent background, PNGs can be larger in size than JPGs.
WebP: The New Image Format
WebP was created to address the need to make images smaller in file size so that they can load faster on web pages. WordPress websites can use this list of optimization plugins to use the WebP format. I will talk about these plugins more later. I want to talk about how to optimize images.
Images Need to be Optimized for Their File Size and Dimensions
So when we talk about image optimization, there are two sizes. The first size is the file size, like 1 MB or 200 KB. The goal is to make this file size as low as possible using WordPress plugins that can optimize images. Try reSmush.it, this is a pretty good image optimization plugin.You can just run this plugin on all of your images and it will compress your images and retain the quality. There is another size to consider for images, dimensions.
The dimensions for an image are its width and height. Think about a painting that is hanging on a wall. The painting has a width and height that you can measure so that you know how much space it takes up on a wall. This is the same concept with an image. One problem that comes up with image dimensions is that they are not resized for whatever page on a website they are used for. For example, you have a really large image that you are using as a thumbnail. If that image is only used for a thumbnail, then you need to make sure that you are using the thumbnail size of the image. WordPress automatically generates different sizes for your images. This makes it easy to use the right sized image when you need it.
Using the right sized image in the correct dimensions makes loading pages faster. The reason why is because the browser will not have to take a large image and then resize it when it places the image on the page. The image has already been prepared and sized for proper use. This saves image and makes Google happy. If Google knows that you are using properly sized images, then your speed scores will be higher.
If You Are Not Using WordPress then Try PhotoPea to Optimize Your Images
Not everyone uses WordPress for their website. In that case you can try using PhotoPea, which is a free graphic editor like PhotoShop. You can resize your images, crop them and then save them in the proper image format with the desired quality. I have this article where I discuss how great PhotoPea is. Ideally though, using a WordPress plugin is better because plugins can optimize all of your images at once. If you need to bulk optimize images outside WordPress, try looking through this list of image optimizers. There should be something on that list that works for you. You should be able to resize the image and reduce its file size all at once. Again, PhotoPea is the best if you need to crop an image because many times you only want to focus and show a part of the image. The periphery is just extra so crop the exterior and only show what you need. If you do not need to crop and image than just use one that resizes from the list.
Do You Really Need Images? Consider Using Icons Also
As mentioned earlier, images help make your website look nicer. You should also consider using icons because they are very lightweight and can also add some pop to your page. Icons are really popular when creating buttons because they can help make them stand out more. Common uses for icons are using ones that are plus signs to get people to join your website. Another favorite icon is a telephone when creating a button that is used to call a business. So you can get really creative with your icons. If you need some icons, head over to FontAwesome. There are a lot of free icons here and you try to use the SVG (Scalar Vector Graphics) tags to display your icons in HTML when you can. Otherwise, you can just download the icon and use it as an image.
What I like about icons is that you can add small little symbols on your website that do not take up as much space as an image. Also, I like using them because you can use several icons together on a page and it will rarely affect the speed of a page. Pagespeed Insights will usually flag large images as loading too slowly. That is not the case with icons. Even large icons load quickly on a page as long as your implement them as SVG, V being the important part here. The V, which stands for vector, allows you to size the icon without increasing its “file size”. The same cannot be said about an icon that is used like a standard image. That is because SVG tags use coordinates to draw the icon and does not actually reference a file on a server like the typical image tags do.
So try using icons on your website, they offer nice illustrations without having to deal with the size of images. If you have too many images on your page, then consider replacing some of them with an icon. Might be worth it because your page might be in need of a redesign that uses more icons and less images.
Lazy Load Image Below the Fold
There is still a lot to talk about when it comes to images. Sometimes Pagespeed Insights will tell you to defer offscreen images. What this means is that if you have images below the fold, you need to load them after everything else above the fold. The fold is a “line” that determines what content shows on page load and what content requires scrolling. Whatever shows on page load is above the fold. Anything that requires scrolling is below the fold. Any images below the fold can be lazy loaded so that they only load when users actually reach them on the page. You can learn how to lazy load images and improve your page load times. This makes complete sense since you do not scroll the page all of the way to the bottom, then why load the image.
Preload Your Critical Assets Above the Fold To Eliminate Render Blocking Resources
Google emphasizes the need to load content above the fold first over what is under the fold. Recall previously that above the fold is just any content that appears on page load before any scrolling occurs. So that is basically the top part of a page. Anything past this part is below the fold and can take its time loading because it requires scrolling to view. Sometimes Pagespeed Insights will tell you to eliminate render blocking resources. This means that you have resources that prevent the page from loading content above the fold. So you need to use the preload tags in HTML to load your CSS/JS/images as soon as the page loads. The reason why is because the page renders HTML from top to bottom. So any HTML that the browser sees at the top, which renders first and that code should pertain to above the fold content.
Use Preload Tags to Load Critical Asset Right Away
If you need to preload assets, take a look at this resource that discusses the preload tag. One thing to remember when preloading assets is to only preload the asset once. There is no need to preload any assets more than one. Also, preload assets right away because content above the fold starts to load as soon as the page is being rendered. One more thing, after you use the preload tags to preload your asset, make sure that you still load the asset normally after preloading it. Preloading an asset does not actually load the asset on the page. The preload tag just tells the browser to prioritize loading the asset before others.
Use the CDN CloudFlare
I recommend using a CDN like CloudFlare if you are not already. I noticed page load time reduced when using this CDN. You can find out more about CloudFlare in an article that I have written. Basically, there are a lot of benefits of using CloudFlare and I would like to touch upon a couple of major ones that I liked the most. You can always visit my article listed in this section if you want to learn more details.
Web Browser Caching
CloudFlare offers caching that allows pages to load faster because it keeps a copy of a web page on your browser the first time that you access it. So the first visit to a page will load the entire page and all assets like CSS/JS/images that are used on that page. Then when you access the same page again in a day or so, the page will load instantly because it is already saved in your browser. This is especially good for pages that will only have minor changes to them. In this case, you can just apply these small changes and wait for the CloudFlare cache to clear normally based on a cache expiration date.
Rocket Loader: Deferring JS
Another common issue with websites is that they load JS too early on the page rendering process. This leads to loading JS when critical assets above the fold are more important. Loading CSS must come before JS because CSS styles the pages and JS adds interactivity to them. Since our eyes see a page before our hands interact with it, then CSS must load before JS. That is why JS should load later during page rendering, especially if it is used for content below the fold.
Reducing Asset Size: Minification
Just like how images can benefit from reducing their file size without losing quality, the same can be done with your assets. Asset minification removes all white space from CSS and JS files to make them smaller. This process also takes your JS files and reduces the number of characters in the file by changing everything in them without affecting the functionality. This reduces JS file sizes even further and makes them load as fast as possible. Again, details on CloudFlare minification are in my article.
WordPress Optimization Plugins
If you are using WordPress you should use an optimization plugin. There are many available and I am using the SiteGround Optimizer plugin because it is simple and has just enough features. If you want something more complex then try this one called W3 Total Cache. An optimizer plugin is a must because you need to keep your website as small, light and fast as possible as it grows. This is something that you should take care of early on because it becomes harder to optimize a website when it gets larger and larger. If you wait too long to address this, then you will come to a point where optimizing is too hard. By then, you might have used a lot of images, a lot of fancy features that use a lot of CSS and JS. I have an idea that you can use to make sure that you know when something you add to your website is slowing it down or not.
Check Your Page Speed Scores To See If Changes Affect Speed
Whenever you add something to your website, make sure that you use PageSpeed Insights to see if it affects the speed of your page. If so, then see if you can optimize the change. If you added some images, optimize both their size and dimensions if necessary. If you added CSS or JS, then preload or defer if the report tells you to. If something new is dragging your scores down a lot, then consider other alternatives if you want to preserve your scores. The new change might not be worth keeping because it hurts your score too much. Checking your speed scores after updates ensures that you can pinpoint what caused the change in scores. If you do not do this regularly and wait until you make several changes to check your scores, then it will be hard to know what update caused the score to go down.
This article ended up being pretty lengthy because there was a lot of ground to cover. This is considering that I have linked to my other articles that go into some of the topics covered here in greater detail. I will recap what I discussed in this article. When it comes to a slow website, there are several issues that can cause it. Remember, what loads slowly for you, could be fast for someone else. The assumption that we make is that our website is only as fast as the slowest user. You never know who accesses your website. If your website is slow for that user, then you must address the issue that is causing the slow down.
You can use Pagespeed Insights to conduct page speed tests and see what is weighing your pages down. I spent a lot of time on optimizing images because it is such a common problem that many are not aware of. You cannot just simply take pictures with your phone or camera and use them as-is. There are so many issues with either using the wrong image file format, the size dimensions or the file size. There are tools like WordPress plugins, PhotoPea and online image compressors that can help you get your images under control. If you need something simple to spruce up your pages, then icons from FontAwesome are free. Try to use icons with svg instead of images for best results.
Lazy load images under the fold and preload your CSS above the fold. Use CloudFlare as it has many benefits which include web browser caching, deferring the loading of JS and minifying assets. CloudFlare is very good and I highly recommend it. I hope that this article can show you way to deal with the issues that show up on Pagespeed Insights.