How to Get the Laggiest Website
by Cedar Studios • 12/13/2023
Web Design
The world is moving too fast. Isn’t it time we all slowed down? Do you even want a website that loads instantly and delights users? If you’re an old soul like me, read on to learn the best ways to build yourself the laggiest website possible.
1. Use Wix or Wordpress, with all the plugins
This may be the most powerful tool in our arsenal for getting a laggy website.
We are going to use a page-builder, like Wix or Wordpress, which already jumbles code and makes your website hard to use, compared to a hand-coded website.
But we aren’t done yet.
Next, we’re going to add lots of plugins like Yoast SEO (wait—what happens if this breaks??), Elementor, and Site Kit.
This should get our Core Vitals page speed down to about 50. A good start!
2. Render-blocking Javascript
Next, we want to add in as many scripts as possible.
Google Analytics, installed via Google Tag Manager. Google AdSense as well. We will also want a few Google maps embeded in an iframe instead of a static image that links out.
Oh yes, and we should add in some more third-party iframes for content, because interactivity is important, and certainly can’t be achieved through CSS or on-page JS alone.
Finally, make sure to put all these linked-out scripts at the very top of your <body> tag, where they can be run immediately—before anything even loads!
3. Lots of unused CSS
Styles are important. Your website needs more style.
So, go ahead and copy blocks of CSS for each button, image, and card in your website from Stack Overflow. Even if you don’t use a style, it’s good to keep it in your CSS files in case you ever need it again.
Avoid frameworks like Astro that will bundle, minify, and discard unused CSS.
Again, throw all of these at the top of the <body> tag, and preferrably on every single page, too!
4. Images. More of them. Bigger.
Finally.
Images. The lifeblood of our low page-speed score. Make sure all of your images are in old, inefficient formats.
Make them big. Bigger.
In fact, when you get your images from the stock website, don’t resize or crop them at all.
TIP
If you can use some crazy Javascript to round out the corners instead of plain CSS, do so.
And that about does it! We should have a page-speed score under 20, now. Another happy Cedar Rapids business that didn’t go with Cedar Studios.
5. (Bonus) Cumulative Layout Shift
What good is that laggy page speed without your website moving around and frustrating users when they try to click a button?
Cumulative Layout Shift refers to your website loading some elements, and, as it loads more—shifting the contents of the website around.
Here’s an example:
When the website is first loaded, there’s not a lot on the page. “Ok,” I think to myself, “I’ll scroll and learn some more.”
A second later, I see that a logo appears in the navigation bar and, in the Hero section, a couple buttons just appeared! “Well, I wanted to ask a question, so I’ll click the big, green Contact Us button.”
But just as my finger is descending to the button—the hero image loads! Now the button has moved entirely off screen and I’m frustrated. I’m going to leave this website and go slum it with some web agency that’s going to spin me an overused Wordpress template.
A faster website would have prevented this.
There are also tools for dealing with Cumulative Layout Shift without addressing page speed. Two common ones are:
Selecting a fallback font which closely matches your custom font (so the words don’t shift after your custom font loads).
Giving each image an explicit width and height attribute so the browser immediately knows how much space to give it.
Conclusion
Let’s face it, at the end of the day, we want the laggiest website possible. Here, we have given you some golden tips for getting that page speed down. If, however, you’re a little weird like us and are obsessed with performant, content-driven sites, feel free to get one today.
