Website performance is now more important for SEO than ever

Discussion in 'Tech Discussion' started by NodiX, May 3, 2021.

  1. NodiX

    NodiX Well-Known Member

    Joined:
    Jul 25, 2017
    Messages:
    223
    Likes Received:
    148
    Reading List:
    Link
    Google has been including websites' performance metric as part of their search engine algorithm to rank websites for years. But recent changes such as Core Web Vitals and speed badging make web performance to be more relevant than ever. Implementation of Core Web Vitals to Google's search engine algorithm will officially up in June 2021.

    Read more:
    https://ahrefs.com/blog/core-web-vitals/
    https://web.dev/vitals/

    To check for your website core vitals, simply run a Lighthouse test from your Chrome dev tools or visit one of these website measure site below:
    https://web.dev/measure/
    https://developers.google.com/speed/pagespeed/insights/
    https://www.webpagetest.org/ - (I recommend Webpagetest.org to get fine-grained web performance result since they do use real mobile/device to run the test and give in-depth waterfall analysis)

    To put into perspective, here are few Core Web Vitals tests from three legit sites in the community (you'll want to get 80+ perf score and green Core Web Vitals--Largest Contentful Paint and Cumulative Layout Shift metrics for this):

    https://developers.google.com/speed/pagespeed/insights/?url=https://www.novelupdates.com - Novelupdates ~29 out of 100 perf score, red Core Web Vitals score, doesn't pass Core Web Vitals metric (which largely due to mobile ads jumping on homepage which give low Cumulative Layout Shift score - wrapping it on a <div /> box with fixed height to avoid layout jump should improve the score).

    https://developers.google.com/speed/pagespeed/insights/?url=https://www.wuxiaworld.com - Wuxiaworld ~32 out of 100 perf score, Lighthouse test shows red Core Web Vitals score but from real user data accumulated by Google it passes Core Web Vitals metric

    https://developers.google.com/speed/pagespeed/insights/?url=https://www.volarenovels.com - Volarenovels ~6 out of 100 perf score, both Lighthouse test and from real user metric data shows that Volarenovels doesn't pass Core Web Vitals metric

    https://developers.google.com/speed/pagespeed/insights/?url=https://www.webnovel.com/ - Webnovel ~46 out of 100 perf score (redirected to mobile version), doesn't pass Core Web Vitals metric. Webnovel does have terrible loading speed but gets a higher performance score than other sites above due to their use of image placeholder, preventing layout jumping for better Cumulative Layout Shift score.

    https://developers.google.com/speed/pagespeed/insights/?url=https://www.tapread.com/ - Tapread ~52 out of 100 perf score (doesn't seem to redirect, but has independent mobile design), doesn't pass Core Web Vitals metric. Both Tapread and Webnovel have advantages of lower Cumulative Layout Shift due to well-thought design, however both don't pass Core Web Vitals metric due to their use of SPA pattern resulting in low speed metrics, especially for Largest Contentful Paint (LCP) metric. This is especially true even when Tapread's score consistently better than other sites above.

    Unlike Wuxiaworld that is server-side rendered, SPA websites like Webnovel and Tapread don't do well on real life measurement score done by Google (source CrUX), mostly due to the majority of mobile phones don't have the computation power to process JavaScript fast enough for the browser to paint the page.
    .
    .
    .

    Overall I recommend anyone to look at ways to prepare for the upcoming changes since many novel sites in the community don't actually pass Core Web Vitals metric, which in result will give disadvantages on the SEO changes in the next month (which will give aggregators SEO advantages if their website faster than yours). If you haven't got a clue on how to improve your Web Vitals metrics, test your site on https://web.dev/measure/ or https://developers.google.com/speed/pagespeed/insights/, then start working on from the recommendations listed in the result; however, if you're up to some in-depth guide, this article is a very good read. I'm generally don't recommend use SPA pattern to build websites in 2021 (at least, without advanced optimization like prerendering and such), since SPA does hurt one of Core Web Vitals metric, Largest Contentful Paint (LCP).

    If you're a Wordpress user and looking for an upgrade path for your novel website, I'd recommend start looking on Jamstack solutions, since Wordpress performance fix is largely complicated by themes and plugins on top of heavily dependent on web hosting performance (though, it would help your WP backend performance by adding Cloudflare APO if your web host is unreliable). However, if you're having a bad time looking for the right Jamstack template/framework to suit your novel site and still wanting to migrate out of Wordpress, do wait for ProgNovel to launch its public open source release in a few months' time.
     
    Last edited: May 3, 2021
    tjalling, Ddraig, rialm and 7 others like this.
  2. Havisu

    Havisu Night Lurker

    Joined:
    Nov 13, 2015
    Messages:
    754
    Likes Received:
    767
    Reading List:
    Link
    Thank you. this is very interesting and can be used in resume or test when applying for jobs.
     
  3. NodiX

    NodiX Well-Known Member

    Joined:
    Jul 25, 2017
    Messages:
    223
    Likes Received:
    148
    Reading List:
    Link
    If you want better guides for your resume then you should visit https://web.dev for more information on modern web development best practices.
     
    Havisu likes this.
  4. rialm

    rialm Well-Known Member

    Joined:
    Apr 20, 2020
    Messages:
    53
    Likes Received:
    73
    Reading List:
    Link
    ProgNovel seems interesting.
    Will there be neighborhoods or anything with a Geocities vibe? As a way for different ProgNovelists to connect?
     
  5. NodiX

    NodiX Well-Known Member

    Joined:
    Jul 25, 2017
    Messages:
    223
    Likes Received:
    148
    Reading List:
    Link
    There was a plan to provide the community with free hosting and community around it (like Geocities) but I didn't manage to secure enough funding for that, and now I'm still in the process of securing funds for smaller-scale development. So, at least in 2021, ProgNovel will focus on source code development and writing documentation to provide information/tutorials for people to self-host their ProgNovel site. It will still free though, as static site hosts such as Netlify/Vercel/Cloudflare Pages would let you host the website with generous free-tier plans, which should be free for everyone that not expecting more than 100k hits every day for their website (there will be more cost-effective strategy later for anyone who hit the limit of their hosts' free-tier plan).

    As for now, ProgNovel doesn't have a way to provide a space for ProgNovelists to connect with each other except through public forums and social media. But note that ProgNovel's affiliate marketing is on the roadmap, which technology later can be expanded to provide a way for ProgNovel site owners to share revenue with each other through guest posting, so it's likely that any community space made for ProgNovelists will be based on this first later on.
     
    Last edited: May 10, 2021
    rialm likes this.
  6. NodiX

    NodiX Well-Known Member

    Joined:
    Jul 25, 2017
    Messages:
    223
    Likes Received:
    148
    Reading List:
    Link
    More in-depth article on optimizing Core Web Vitals from Google Engineer:
    https://web.dev/optimize-vitals-lighthouse/

    Google Search Console apparently already have a section for Core Web Vitals analysis, which is useful to troubleshoot pages that have problem on the metric:
    [​IMG]
     
  7. NodiX

    NodiX Well-Known Member

    Joined:
    Jul 25, 2017
    Messages:
    223
    Likes Received:
    148
    Reading List:
    Link
    Web Vitals has officially been integrated into Google search ranking!
    [​IMG]

    Google dev team has published a guide to optimize your Web Vitals metric in CSS at https://web.dev/css-web-vitals. This is very useful for anyone who wants a quick fix for their Web Vitals and goes through common problems such as badly designed cookie notices and layout shift caused by font swapping.

    I also found an intriguingly in-depth guide for Web Vitals;
    https://www.smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues/ (Web Vital, focused on layout shift)
    https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/ (focused on font optimization, very good for performance and Web Vitals, but the CSS in question isn't very widely supported in browsers currently)
    https://www.smashingmagazine.com/2021/05/core-web-vitals-case-study/ (I love people telling their case studies)
    https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/ (Image focused article for Web Vitals)

    (What's new in Web Vitals from recent Google I/O)


    (Business impact of Core Web Vitals from recent Google I/O)