This article was originally published at https://www.blog.duomly.com/increase-website-speed-score-100-google-pagespeed-insights/
Into to 7 methods to increase your website speed and score 100 on Google Page Speed Insights
In this article, I'd like to tell you about 7 ways that helped us to increase our blog speed and score 100 on Google Page Speed.
When you are writing your own blog to share something you are passionate about or have a website for your company, you'd like other people to know about it and read it.
You're spending days, weeks, or months to create high quality, valuable content. When you see that the only people reading it are those who follow you on your social media, it can be really demotivating.
But what can you do to get access to a huge amount of readers?
You have to take care of your page's SEO and try to become visible in Google Search Results.
As a blogger, you probably already know that the higher position you have in the Google Search Results, the more significant amount of traffic you will get.
To be shown on the top of the search results of Google Search, there are a few things that Google algorithms pay attention to, and the most important is page speed and quality of your content.
I assume that if you are creating a blog about something that is your hobby, you try to make it as good quality as possible. But what about the loading time and speed of your page?
Google provided the tool that you can use to check the result of your page, it's called Google PageSpeed Insights. Besides that, you can use Google Search Console, where you will see which pages are visible in the search results and on which positions. Also, Google will display you the errors they found on your Google Search Console account.
In the previous days, we were implementing a few solutions to improve our blog, and we managed to score 100 on Google PageSpeed Insights. Today I'd like to share those 7 things we did to significantly improve our page speed, so you can use it and improve your score and Google Search Result positions.
Of course, I've got a video for you, where I'm talking about the ways you can do to improve your page speed and the 100 on Google Page Speed Insights.
Let's get into it!
1. Use static site generators like Hugo
We started our blog a few years ago, and from our point of view at that time, Wordpress was the easiest and the fastest solution to set up the infrastructure. We used the ready theme, which looked really nice, had some animations, pretty colors, and attractive UI.
During the time, we added some plugins for the additional functionality like code highlighting, and from that time, the speed of our pages became a disaster, in the worst time the loading time was 6s and Google returned us the red alert. The positions ing search results became worse and worse, and it was a time to do some action.
After a quick research, we found the solution. Instead of a CMS like Wordpress, we needed a static site generator, which will convert our posts to static pages, and the time of loading is much shorter.
Our choice was Hugo, the modern, open-source, static page generator, created with Golang. It provides a lot of free themes, is flexible and fast, and the most important the usage of this tool is pretty easy. Installation takes about a few minutes, and the most important, it's possible to move the posts from Wordpress to Hugo using a simple, free plugin, so you don't lose any content.
Tomorrow, my friend will provide you an article and video, explaining how to install Hugo step by step, so you can try it as well.
2. Use AMP
During the migration of our Wordpress blog to Hugo and randomly selected theme, I found out about AMP. It's Google's framework, which focuses on user-experience and the loading time of the content.
It was definitely an "AHA" moment for us. We did research about the possibility of implementing the AMP with Hugo immediately, and we found out that there are a few free templates with an AMP already. That was the time for the next change in our migration.
We decided to choose the Amperage template, as it has the cleanest design, and looks pretty good as a tech blog.
Of course, we did some small changes to make it suitable for our content.
When we are using AMP, we have to take care of using the proper tags. For example, instead of <img /> we should use <amp-image> or instead of <iframe>, the <amp-iframe>. All of that you can easily find in the documentation.
The big advantage of the AMP is that it will adjust the size of the images on your page. It won't be taking the additional time for loading unoptimized files.
The websites built with AMP are rated really well by Google's algorithms. The loading time is decreased significantly because of the native AMP tags.
3. Host in S3
Many people have an issue with selecting the proper hosting for their blogs or websites because we would like it to be fast and cheap.
Currently, when we don't use the Wordpress anymore, there are lots more options for hosting the static app. Our choice was Amazon's S3, but some people also decide to select Github Pages.
First of all, the cost of hosting your static page on S3 is minimal, so even if you are just starting and don't earn money blogging, you can easily afford it.
The other benefit is the easiness of management because you just place the build files into the S3 bucket, and that's it. You don't have to invest additional time and money for the server maintenance.
4. Use CDN
Another thing you need to do to increase your website or blog's speed is to use a CDN.
Let me explain, what actually is CDN?
Differently called a Content Delivery Network or Content Distribution Network is a network of proxy servers located in a different location in the whole world. You may wonder how it can increase the speed of your page?
Imagine that you host your blog on the servers in Sydney, Australia, and the users trying to access the content are located in Paris, Europe. The content is located literally at the opposite end of the world, so it takes some time to get the response and deliver it.
If you use the CDN for your content, then the website or blog is cached in different locations in the world in the data centers, and depending on the location of the request, the content is sent from the closest servers.
And it makes sense that CDN definitely can increase the speed of your page and help you scoring 100 in Google Page Speed Insights.
5. Take care about the meta description
Now, it's time to talk a little bit about your content. When you are creating the post, you should add a meta description to each of them.
A meta description is a piece of text, places in the tags <meta name= "description" content= "Text goes here…"/> that describes the content of the article. It's not visible for your page visitors directly on the page, but search engines can see it and display in the search results like in the image below.
The text in the red circle is the meta description. Make sure it has a proper length, which for Google is between 120 to 158 characters. Also, don't forget to add your keyword in this text.
Another important thing about SEO is to add a keyword to your link and the meta title of your page.
6. Add a table of contents
To be ranked higher in the search results, you can add one more thing to your blog. It's tables of content, and it is a list of headers existing in your posts, listed just under the title or the image.
A great example of a table of contents that you can see on the internet is on every page in Wikipedia.
To create a table of content automatically, you can use the Table of Contents Plus plain for Wordpress, or if you'll decide to go with our advice and start using Hugo, some of the templates has it build-in.
Besides the good impact for your posts' SEO, the table of contents is also useful for your readers because it helps them navigate through your page easily.
7. Avoid additional scripts and CSS
There's one more thing, it doesn't matter if you are using Wordpress or static page generator or something different for your blog; it's very important to avoid using additional Javascript code and not used CSS.
Sometimes it happens that doing changes on your blog, you add another plugin or other styles, and you don't delete the ones you are not using anymore. Also, sometimes it's better to check the Page Speed results after adding a new plugin to your page because the new feature may not be worth the delay it may cause on your blog.
Sometimes, it's better to let go of the heavy animations and special effects, be shown higher in the search results page, and improve your website user experience.
Conclusion
In this article, I described 7 ways we used to increase the website speed and score 100 on Google Page Speed Insides.
The biggest difference in our page speed we achieved by changing the technology of our blog and start using the AMP framework from Google. Tomorrow, my friend will share the post describing how you can do it too and migrate Wordpress to Hugo.
To not be unfounded, in the image below, you can see our blog performance result.
I hope you will find this post useful, try some of those tips, improve your page speed, and achieve higher positions on Google's search result.
Thank you for reading,
Anna from Duomly
Top comments (2)
I dont agree with AMP. Using AMP is slowing down your site if your site is already fast. Its just another big js dependency that has to be downloaded, parsed, and executed.
I wouldnt recommend anyone who tries to make their website fast using it - keep it native and fast. Dont go against Commandment 2 ;)
What damn is the 1 percentage you missed in accessibility?