Google tries to make the web faster|safer|better?! Ine of the best tools that are widely used is Google PageSpeed. It can provide us some reasonable issues related to site performance and usability. You definitely should check it. I have tested it and here is my short story about getting amazing results.
I thought that it is unreal to reach score 100. But, after a few hours of removing and rewriting js/css I get it.
Yep, in the theme, I found Jquery library. Several years ago it was very popular, and developers get a bad habit related to this lib.
When I click on the button - I need to scroll to the top of the page. Install Jquery.
Every small logic can be implemented with or without Jquery. Unfortunately, developers do not want to deal with low-level JS API and just load tons of JS to do simple things.
I just removed all unnecessary things and stared to use pure JS. Here is a cool story that I recommend you to read: Removing jQuery from GitHub.com frontend
If you have some comment system installed on the site, there is a change that it is not optimized. Disqus is loaded every time, even if user is on the top of the page and reading article. But there is a simple solution on how to fix this issue.
Intersection Observer API - when user scrolls down to the form, and it should be visible - you can load it.
So it is like Lazy Loading.
Simple code that can help you to get a few points in the page speed. Place this HTML code in the place where you want to see comments:
JS code that you need:
30 lines of JS can make internet better. Comments will be loaded only when div
#disqus_thread becomes visible.
You can add more rules, for example if the user sees the bottom of the article, or the last paragraph - then load Disqus comments.
The code will be more complicated, but UX will be better.
Youtube lazy loader
Yes, inserting youtube iframe into the page also slows down the page loading. I do not like that. So I used the same approach as with Disqus. Lazy Loading :heart: The main difference here is a placeholder. I show an image to the user in the places where Youtube should be but is not loaded:
Here is my main load function, that injects youtube iframe to the correct place
In Jquery you can deal with data attributes via data element. In the pure js world, we can use
element.dataset property to get all
If you do not like the placeholder - you can generate video thumbnail and use it.
You need to enable caching for your assets. Do not know what you are using Apache or Nginx, but you should definitely configure cache control. Just google, it is one of the simplest steps.
If you do not use something - you should remove it from the page. Any js or css files should be dropped. Even more, if you have some selectors in CSS that are not used - you should remove them.
After each step, you should take measurements and check how it helps. Google PageSpeed can show some general information, and you can use it to make your site better.
Let’s Make the Web Faster ;)