About 2 weeks ago I sarted on my mission to make this website ESLinsider.com load faster for you. It actually had o.k. pagespeed to begin with. According to Google's pagespeed test it got a 93 for desktop and a 78 for mobile.
But I thought it should load faster at least for mobile so I started with the CSS file.
Removing unused CSS
If you didn't know a css sheet is used to style a website. It is the design and fonts behind all the words, images, etc. that a website uses. My css file came with a lot of css that I wasn't using.
I started with a template css file that was 149kb and after about 1 week or so I removed 139kb of css that was not being used.
So I was left with a style sheet that was only 10kb or so. Then I inlined it instead of keeping it in a file and that brought this blog's page speed score for mobile up to 93 for mobile and 95 for desktop.
Not being especially savvy with this sort of thing it took a long time to figure it out, but it seems like I did as it seems like I didn't get rid of anything that I needed.
The how-to videos used to load slow
There are over 100 how-to videos as well as another 100 or so videos that are embedded in the blog and interviews from Youtube here. Youtube iframe embeds are heavy and slow to load. An embedded Youtube player adds more than 600kb to the page and multiple files to download to your browser (requests).
Here's a few examples of how the how-to videos load faster:
I also at least temporarily removed comments. Most comments were spam or just didn't add much to the conversaton of value. So I decided to remove them. The comments actually also made pages load slower too.
Most people didn't leave comments so why keep something around if it's not adding much.
So the end product is that you don't have to wait long for videos and pages to load. Since I made a bunch of changes to the website recently let me know if you find any errors or things that look funny.