search

taiwangoldcard / website

Taiwan Gold Card Community website
https://taiwangoldcard.com
Other
43 stars 18 forks source link

Faster pages on mobile (amp / fip) #93

Closed geekyme closed 4 years ago

geekyme commented 4 years ago

On Facebook, there's Facebook Instant Pages (fip). On Google, there's Accelerated Mobile Pages (amp). These formats could load up to 4X faster on mobile.

Perhaps we can exploit Hugo's custom output formats? https://gohugo.io/templates/output-formats/

Amp pages also ranks better on google.

geekyme commented 4 years ago

Found a nice migration guide for Hugo + amp https://www.stackbit.com/blog/amp-for-jamstack/

Looks like will require quite a bit of digging.

geekyme commented 4 years ago

Initial investgations:

Screenshot 2020-09-06 at 6 42 52 PM

Just trying a scaffold... https://github.com/geekyme/taiwan-goldcard-website/commit/be674ce3976749274b0e7c5ebeda4032289d4c1f. Quite a high effort item.

fifieldt commented 4 years ago

So interesting. I'd always wondered how they made those pages.

erickhun commented 4 years ago

If we figure how to personalise the output format, it will pave the way to rank # 1 in a lot of Google queries with FAQ page structured format

I tried to think about an easy way to convert easily all our FAQs but couldn't find an acceptable solution, I was about to add html code in the markdown but gave up since it would make the reason we use markdown obsolete 🤦

matrinox commented 4 years ago

Been working on this last night. I was able to get valid AMP versions of the whole site. There's still a few kinks to iron out but it looks promising!

erickhun commented 4 years ago

I'm quite excited to see the result @matrinox 😍

geekyme commented 4 years ago

@matrinox 👏 PR time!

geekyme commented 4 years ago

It worked! Notice the little lightning icon:

image

This loaded mega fast: image

geekyme commented 4 years ago

One suggestion for improvement - the links in an amp page doesn't need to link to amp pages.

For example, the navbar in the amp version of the home page points to amp versions of the application faq, etc.

In general the amp pages load speed only seem to matter for the first page you land on. Subsequent pages doesn't appear to be that much faster.

So maybe we can:

matrinox commented 4 years ago

@geekyme Agreed. What do you think has higher value: getting FIP version or removing AMP links?

geekyme commented 4 years ago

I think FIP. Maybe let's get the stats from @erickhun ? He has GA so he can see where is traffic coming from.

If we have decent social media / FB traffic then maybe we can invest in FIB.

erickhun commented 4 years ago

Re sitemap:

This exists, but I don't find it in the code source, how is this generated? https://taiwangoldcard.com/sitemap.xml

Here one manually generated with amp pages 😆 : 


<?xml version="1.0" encoding="UTF-8"?>
<urlset
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">

<url>
  <loc>https://taiwangoldcard.com/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>1.00</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/application-faq/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/goldcard-holders-faq/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/application-faq/what-is-taiwan-gold-card/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/application-faq/qualifications/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/application-faq/application/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/application-faq/after-submitting-application/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/application-faq/after-passing-skill-assessment/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/goldcard-holders-faq/at-work/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/goldcard-holders-faq/health-insurance/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/goldcard-holders-faq/life-in-taiwan/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/goldcard-holders-faq/migration-pathways/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/goldcard-holders-faq/tax/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/goldcard-holders-faq/family/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/goldcard-holders-faq/validity/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/news/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.51</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/amp/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>1.00</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/amp/application-faq/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/amp/goldcard-holders-faq/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/amp/application-faq/what-is-taiwan-gold-card/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/amp/application-faq/qualifications/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/amp/application-faq/application/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/amp/application-faq/after-submitting-application/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/amp/application-faq/after-passing-skill-assessment/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/amp/goldcard-holders-faq/at-work/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/amp/goldcard-holders-faq/health-insurance/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/amp/goldcard-holders-faq/life-in-taiwan/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/amp/goldcard-holders-faq/migration-pathways/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/amp/goldcard-holders-faq/tax/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/amp/goldcard-holders-faq/family/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/amp/goldcard-holders-faq/validity/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://taiwangoldcard.com/amp/news/</loc>
  <lastmod>2020-09-24T04:06:12+00:00</lastmod>
  <priority>0.51</priority>
</url>

</urlset>```
matrinox commented 4 years ago

PR up. I don't have the priority set the same way @erickhun but my change adds the AMP URLs to the sitemap

geekyme commented 4 years ago

Closing this now! Thanks for the contribution guys!