7 things I learned while optimising a website

Optimising a website for user experience can be a nightmare!

Trust me, I just went through one. I’d say that I was a newbie, and I didn’t know what I was doing, but I kind of did. I prepared all my files optimised for fast online delivery, I tried my best to keep it all nice and minimal and yet, Elementor still bloated it all to the max. Then add an unreliable hosting (I was saving at the time and I am not too quick to let go, also they would say that it isn’t their issues too). And then add all the weird stuff that internet and browsers do and here went my fully custom, artistically made LuAru Studio website to a jarring stop. Doesn’t it hurt when someone just doesn’t get it? Well, this happened with me and PageSpeed Insight, it just couldn’t see past it.

But that’s ok, I am not quick to give up, so in went hours with little sleep and kids who saw mum stuck to the computer. But I figured it out. Well, kind of…

Here I will give you a the detailed list of what happened.

I wanted a vector art based website so I created something I was very proud of, put it all together in the AdobeXD to have it all in front of me when developing the actual website. I was considering a couple of options – going with one of pro themes, using Elementor (and Hello theme), using Gutenberg or hand coding it all. For this one I chose Elementor and bought Pro, because I knew it will give me some features that will make my life so much easier. 

Well, I wish I knew then what I know now… All those things come at the price. And in my case, it didn’t save me any time. I would have hand coded it three times by now… I am not saying any of that is Elementor’s fault. I knew they had a bloated code, but I thought I will make it work for me. And well… I didn’t, I bloated it so bad that DOM size is still one of the performance issues. But it isn’t the worst. 

So, here I am ready to launch my website which looks just the way I wanted it to look. I press the button to delete the COMING SOON page and the first thing I do of course is check the speed (I should have checked how my website looks on multiple browsers first). And it’s scaringly terrible. I panic. What is going on? I have never seen such a bad result! 29 on mobile, F on GTMetrix!

And that was the start of a week invested in moving parts around with multiple caching options, even though I had nothing to optimise on my website – it was already optimised to the fullest – SVG graphics and all to make it good looking in any size, my few images as small as possible. All those things that are worst when it comes to performance were working fine. But PageSpeed Insights and GTMetrix said “nahah…” 

Well, ok then… I can do something about it! And I did. Here is what I have learned when trying to increase my speed:

1. Choose a good hosting provider

No, really, if you want your website to perform, choose the best you can afford, not just a cheap option, but something with people who at least try to understand your issue, not just says “Oh, you poor thing, it must feel so bad… Too bad it’s not our issue…” Of course, one of the first things I did was contact Hostinger, my hosting provider, because one of the issues of website’s speed was long hosting server response time. Well, I can say I was very nice with them, they were very nice with me but obviously they thought I was stupid.

I went through 5 or 6 people because they changed with every response I gave them. They all repeated the same thing and I had to repeat them back the same things they could have read in the messages before. Of course, they said it’s not their servers’ fault (“but if you upgrade, it might be better” …sure not server’s fault my a**…). Then they promised that it will improve if only I buy Clouflare for their cPanel. Well, I already had Cloudflare nameservers set up, but they said it’s an extra and better thing for speed. I was doubtful but I tried. Once I bought it and tried to set it up the message popped up “You already have Cloudflare, we can’t set it up”. Now I was angry for wasting my time, and for their cheeky ways to get money from people, but I was still nice with them, because I am a nice person even when I am angry. I did ask for a refund though. I also understood that they are not going to help me, they weren’t even trying, just copy pasting generic answers… Oh well, I tried. Lithuanian company and all, close to heart… What a let down! 

2. Not all caching plugins are equal

Invest time in a good research before you actually download and activate any of cache plugins. Because if you try them all on the same website they tend to leave code behind. I already wasted hours with hosting provider and my website didn’t get any better. So, I tried 4 different caching plugins and I am pretty sure I broke my site because of that. In the end I didn’t even have energy to start looking under the hood, and see which code got stuck where, because I couldn’t properly use Elementor anymore (not that it was perfect before). And it got worse when WP Rocket was added to the mix. But my speed improved. Little by little it went up to 80 on mobile and 99 on desktop. And GT Metrix gave me an A (I had to save that one!). But it wasn’t over yet (as you will see in point no 6)!

3. Over optimising a website with caching can break it.

I achieved what I wanted but I completely broke my website because whenever I tried to fix even a tiny little thing, something else would break. As if it was a table full of tiny balls, I try to push one a little and all the others start bouncing down. I have been pushing and pulling with not much results for some time but then I gave up. It seemed that it will never look the way I intended it. Turning off all the plugins except for Elementor didn’t help. Well, nothing I tried helped. I was afraid to even do anything else because I thought it will break completely if I push it any more. I was considering to scrap it all and start over with hand coding and get my money back for Elementor Pro and WP Rocket while I am at it. I think I got older by 10 years doing it all. And I consider myself a good designer and developer but sometimes tools just don’t want to work. Check back to point 6 to know what I ended up doing.

4. Check, if the site looks ok on multiple browsers!

This is a major one! Sure, it’s the rule I always knew but there is the addition, do it straight after (and before) launching and before doing anything else! This is one of the major issues that caused that table of balls to keep on shifting. I didn’t check my multiple browsers before focusing on the speed. I started caching and preloading before my website was looking the way I wanted it to look on multiple browsers (and I didn’t know that at the time). And when I found that Firefox wasn’t displaying the SVGS properly I thought it had anything to do with speed (why I thought that? Who knows, I was tired). I was trying to fix it the wrong way, getting deeper into the woods. When the graphics didn’t change, I realised that the issue is somewhere else. Finally! And as I tried to debug what was happening in the console, I found that some of my SVGS had extra lines of code that messed everything up. I don’t know why it was like that, something with Illustrator’s export maybe?

Soon I got to slowly deleting those lines of code, checking each one on the browser and deleting it from the file with VSCode. There was an easier way, but I was just so proud of myself that I figured that one out all on my own, that I didn’t think to check, and because I found nothing even remotely close to what was happening to my website on a friendly google. But you can find my detailed explanation of what was happening in this blog post.

5. Some plugins just don’t want to be friends.

Because of the way I cached and preloaded my code, something weird started happening both with Elementor and WordPress overall (you know that table of balls I mentioned before). Whenever I would change anything, it would just revert back to how it was before. So when I tried to replace my edited SVGS they wouldn’t change or they would but something else would break. Like my testimonials section or my recent blog post section (probably something was happening with JavaScript). But then if I tried to change those, my SVGS would go back to the old code (and I already deleted the old images which meant that there was a blank gap with the title instead of a beautiful flower).

Oh boy…

I thought I will go crazy over this. Nothing stayed the way that I wanted and every time I checked the design on multiple browsers (cache cleared and purged, DNS flushed, browser’s history deleted, everything multiple times refreshed, WIFI router restarted, you name it, I did it), they all looked different from each other and from my intentions. At the point where everything looked kind of ok, I gave up. The only next step would be to scrap it all and start over again with hand coding. And I was done with Elementor too. It’s just not worth it. I was supposed to save time, and I even paid money but it just didn’t do it. I knew it was buggy, I have experienced this multiple times before, but I managed. This time it blew my roof of. Optimising a website might break it entirely.

6. Back up, back up, always back up.

Ok, I knew this one and I am so happy that I always do backups of my websites before major changes, because this time I had to actually use it. After trying everything just to put those “table balls” back in order and looking them fall apart once again, I gave up. This wasn’t working! So, I did the best thing I could think of and went to the last backup version, just before I started all the optimising. Then I fixed all the SVG and other issues all the while flushing the cache, because my browser kept on returning WordPress to the previous screen and scaring me out of my wits for a moment. But then after purging everything it would look the way I wanted it.

Now, of course my website speed went back to where it was. Yet, I wasn’t ready to upload WP Rocket and I still wasn’t sure that I will, because it broke my site before. I activated Elementor Experiments and that helped a little (you can read this enlightening and very helpful blog post about it here). I also upgraded my hosting plan to cloud based, I figured I will try that before dumping them entirely and it helped a little (but only sometimes, which tells me that their servers are unstable). In the end after working out with LiteSpeed Cache I deleted it because I wanted to try WP Rocket again. And I did, very VERY carefully.

It did nothing good.

So I got rid of it again and refunded while I still could. It is a very user-friendly Plugin and I am really sorry it did no good for my site.

Now my speed isn’t perfect but I am ok with it. I tried a few other things when I got back to LiteSpeed but it turned my site ugly and so I decided that I would rather have it a little slower but looking good. I might just get back to this issue sometime in the future when my hosting plan ends, and I will need to change it to something else. 

7. Extra point about Elementor.

If you are trying to work and Elementor is not responding or is very slow, try a different browser. I am a weird sadomasochistic developer who likes Safari, but for development I had to move to Chrome. Elementor was responding way faster through it. Don’t ask me why, ask Elementor Developers, maybe they know?

In the end, I came to a very simple conclusion:

Completely custom design = hand-coding (like I did with Christy Mu)

Templated design = themes and theme builders (like I did here with codingGinja)

Also, I am sure there are way smarter people around who could explain all the things that I did wrong. I know most of them by now thank you very much. But I also know that SVGS don’t get the full credit out there so not many people really do what I did, hence I had to learn from my own mistakes. It’s good that most of the website designs that I do involve photos and I recommend using photos with people in them, because that’s the best marketing tool out there – we tend to find connection better when we see other people doing stuff we want to do. It’s just that this time I wanted my website to be original. So here I go – it’s so original that there aren’t good enough tools to meet me in the middle for my vision. It’s good that I am a website designer, and I can start all over again any time I feel like it and even go a completely different direction.

Life is all about testing everything anyways, isn’t it?

Let me know what you think of my silly ride and the lessons learned. I hope you can learn something new too or at least laugh at me a little.

P.S. One more thing

A question that I keep on asking myself – is there anywhere on the web someone who is actually doing the hosting research, or everyone is basing their top lists on the affiliate price they get? Seriously, I couldn’t find any proper advice out there. It’s always pointing a finger at others and saying they know better… That’s why I am offering to get Bambaram hosting for $8 dollars a month, it’s the best!!! I’m joking, there is no hosting like that (as far as I checked, but I did want to say Bambam hosting and I found their website…ups…), I do feel cheeted just like you did right now – every time I think that I found a reliable blogger telling me which hosting would work they are actually selling me their own affiliate link. There is so much information out there that in the end I would save more time by just closing my eyes and pointing my finger at the list and that would be the best hosting ever… really… research in this affiliated world is hard, and it seems like there is no true winner out there. Let me know if you found yours.

DISCLAIMER: everything I have written here is my own experience and opinion. I don’t advertise nor badmouth any of the names mentioned. It’s just what I went through trying to optimise my website, it’s your right to have your own opinion about any of the aforementioned brands.