DEV Community

Cover image for This is good; How really to optimize your website and SEO. ~ My take
Juhani Juusola
Juhani Juusola

Posted on

This is good; How really to optimize your website and SEO. ~ My take

Static vs. WordPress vs. WebFlow (Who will win?)

I just had a lot of fun. As I rolled out a significant update to urFIT-child.com, it was not easy. The PageSpeed Insights gave me a lot of trouble when I first opened the Andrew Agbaje (principal investigator) page. So I knew I needed to do something. Well, the journey started.

First: The Optimization. I needed to optimize the assets. ~6MB video is just too big, and when that is loaded on the initial load 😅, stupid me. + the 3 MB PDF.. double trouble 😄. So I needed to learn something new by lazy loading these. It was pretty easy to implement with Cloudflare Workers calling my R2 instance where I put these assets.

Well of course the urfit-child.com domain went down for a moment as I misconfigured the R2 domain 🙃 but then doing it properly solved it. I just call my worker when the video and PDF come to the viewport and stream it through API. Easy and very efficient solution.

Then optimizing every image. .webp format of course. Then be sure to lazy load all images not on the landing section. Then remove any custom font. Just remove. 40kb on even .woff2 font takes a long time on mobile, and the default system fonts are what the users look at anyway. Win-win, yes.

So these are some things I did:

  1. Big files (Video, PDF) to hosted service Lazy load them, cache them, fetch the securely, compress them!, add some nice loading state 🍒
  2. Optimize every image (use .webp) Use squoosh.app to see what min size you can use so that the image looks still super sharp and still reduced size at the same time (use it, so good). Then use compress-or-die to super optimize the image further. You will get crazy small images with super good quality with these two. I did.
  3. Remove custom fonts This is a strong word but literally worth it. It makes a big difference in mobile performance. Vibe coders don't like it but you know.. Google likes it, Bing likes it, DuckDuck (I believe) likes it, and that is a good company to be in.
  4. Good stuff as you see. Lets continue.

Then the SEO. This was so many new things to learn. Like a swamp 🌿🐸, but quite pleasant swamp actually 🌿🐸☀️ (like a one where the water is very hot like in a spa and no alligators to eat you). So I went to update the url (add redirect and canonical links), update H1, H2, H3 etc to include time to time the keywords, include the keyword in every image, image alt, image text, aaaaaaand to include the keywords in every 300 words or thereabout. So many things. And of course proper structure of the whole page. I’m now speaking about Andrew Agbaje page, and waist to height ratio calculator. And the structuredData. And good metadata. But this was actually very nice to learn. You should also. So some I did in numbered list to make it easier to put together

  1. Keywords (first) You need these, find a good ones and use them. Use some good service to find what people actually search (I will make another post of what I prefer to use, it will be so fun post 😁). The keyword will pull the traffic 🚜🎣.
  2. Keyword in the url You see know why you need the keywords first, because you need them everywhere on the latter numbers. url format like, urfit-child.com/waist-height-calculator, if my keyword is ‘waist height calculator’. (If you have already an established url you cannot change as there are links pointing to it use redirect and canonical together to route the visitors to the new instance of the site (which is just the copy of the former, just import the same site to two places))
  3. H1,h2,h3 with keywords H1 needs it, most h2, many h3. Use them a lot in these. + variations are good.
  4. Image names These actually matter quite a lot so just put your keyword in every image name, text, alt. It works. (pst.. Good way to have extra backlinks is to have some image people link and use in their site)
  5. Naturally using the keyword in texts This is the topic of the page so you will speak about your topic which is your keyword.
  6. StructuredData and MetaData You need these especially the metadata. Read some tutorial about these please.
  7. Done! ✅🥳🥳

So our results next 🥁🥁

TADAA!!

Updated urFIT-child mobile performance, So good, right?


🚀 Updated urFIT-child Mobile Performance

So the heaviest page on the site — packed with embedded videos and downloadable research materials — underwent a full performance optimization. I was so happy to look at PageSpeed Insights scores now across LCP, CLS, and TTFB. It looks beautiful. And that is mobile! Don’t look at the pretty web, check the mobile to see if any site is really performant! Do it!

Lets compare the pretty pretty results (:3) to some established, professional WordPress and WebFlow sites. Of course we outperform them now like fuelk.com and sakea.studio).

Professional WordPress site mobile performance

Professional WebFlow site mobile performance

Tiditidditii 🎵🎶 Hahaa, we got em!

Test the difference yourself. It looks pretty good now, hah?


📈 Strengthening On-Page SEO & Structure

So some AI content> In addition to speed, we enhanced core SEO structure on several important pages:

  • Clearer semantic HTML (this we did also, forgot to mention above)
  • Better accessibility and heading structure (And this of course)
  • Internal linking improvements (Yes also this)
  • Lighter scripts and font loading (This i did mention ✅)

(Me again 👋) Even you don’t see or meet the crawlers on the steer they do matter. These changes make our content easier for search engines to crawl and index. Very important. 👉 Waist to height ratio calculator — This is our key page bringing in organic traffic from health-conscious parents, educators, and pediatric researchers. We need to jump higher in the Google results, we can get thousands of organic (that is natural, unpaid, and unadvertised visitors to our site) traffic.


🔧 This will be even betterrr: Next: flamethefreeze.com Gets a Full Rebuild. Yahoooo!

With urFIT-child.com in top shape, My guns turn now to the full redesign and SEO optimization of flamethefreeze.com. I already like the idea. This will include a ground-up performance rebuild (yeesss!), mobile-first design (yeesss!), and deep SEO integration (YEESSS!).

But first I will write a post about the SEO tool I mentioned and how I did search for keywords for alll the English and Finnish pages. Very good SEO tips incoming on these two blog posts.

Then some backlinks :3


🧠 About urFIT-child

urFIT-child (Understanding FITness and cardiometabolic health in little darlings) is a treasure chest of 21st-century novel discoveries aimed at improving children, adolescents, and young adults’ health.

Learn more:


This was fun!

Originally published on Medium.com

#SEO #WebPerformance #ChildHealth #AcademicResearch #urFIT-child #flamethefreeze #WaistToHeightRatio #OpenScience

Canonical URL (https://medium.com/@juhanijuusola/major-performance-seo-overhaul-for-urfit-child-com-real-world-gains-in-speed-and-optimization-117db2f79640)

Top comments (0)