Front-End Deployment Insights: Experiences and Metric Evaluations of Leading Cloud Platforms

To assist developers in selecting premium free website deployment services, this article will comprehensively test the world's mainstream modern front-end deployment platforms from both experiential and quantitative perspectives.

The test subjects include Vercel, Cloudflare Pages, GitHub Pages, and the newly discovered EdgeOne Pages from Tencent Cloud. The measurement indicators include global access latency, Google Lighthouse metrics and the smoothness of the deployment process.

It is worth noting that although AWS Pages and Netlify are also popular, their registration and verification process is a bit complex (requiring bank card binding and identity anti-fraud verification) and are not included in this experience.

It is hoped that this experience sharing will provide valuable references to help choose the most suitable free website deployment service.

Pages website deployment refers to publishing static websites or static content to the Internet through specific platforms, enabling access and browsing. Most platforms currently support or are developing dynamic website deployment based on Serverless technologies.

Experience Target Setup

Static websites have broad applications, including blogs, company websites, documentation, and showcase pages. This experience focuses on a photography website built using the React framework.

The total size of the static resources for this website is approximately 110MB, generated using the create-react-app tool, making it a typical showcase website.

Below are the links to the deployed websites. You can intuitively experience the loading speed and content rendering speed of each website before checking the specific test results:

Pros and Cons of Each Platform and Deployment Experience

Vercel

Successfully deployed website, click to experience.

With a simple website design and smooth deployment process, it only takes 5 minutes from registration to successful deployment.

Experience Conclusion

Vercel focuses on providing an efficient, fast, and simple development and deployment experience, with an overall deployment experience even better than Cloudflare. The downside is that the free plan offers limited resources.

Pros

1. Smooth and clean interface: Vercel offers a great user experience with a clear and tidy data display.
2. Serverless function support: Supports Serverless functions, allowing easy addition of backend logic to front-end projects.

Cons

1. Resource limitations: The free plan limits the source file size to 100MB, making it unsuitable for websites with a large number of static resources, requiring additional resource storage services.
2. Limited build times: The free version allows up to 100 deployments per day with various restrictions, making it easy for normal users to hit the ceiling.

Cloudflare Pages

Successfully deployed website, click to experience.

The process of using Cloudflare to deploy a website is smooth, with clear steps and comprehensive tutorials and guides on the official blog. Cloudflare also offers a wealth of paid extension features to meet the needs of high-end users.

Cloudflare has integrated the Pages and Workers architectures, enabling developers to achieve seamless migration when more dynamic features are needed.

Cloudflare Workers is a serverless computing platform that allows developers to write and deploy lightweight code to execute complex logic without relying on traditional backend servers.

Experience Conclusion

Cloudflare Pages has significant advantages, leading the industry. However, the access latency is particularly high in China and some Asian regions, and the free plan has strict resource limitations, with the platform focusing more on paid users.

Pros

1. Robust CDN: Cloudflare owns a powerful CDN that ensures extremely fast global access speeds for deployed websites.
2. Detailed tutorials: The official website provides very detailed tutorials, including text and animations, friendly to beginners.
3. Convenient extension and integration: Paid features include multi-user collaboration and efficient concurrency, supporting seamless migration to Workers. Mainstream CMSs have rich plugins, enhancing the automated deployment process.

Cons

1. High latency in Asia: Cloudflare has a very high access latency in China and surrounding areas, with tests showing requests from China returning to the US.
2. Limited free plan: The free version doesn't support concurrent builds (no multi-user collaboration), allowing only 500 builds per month.
3. Expensive paid plans: Paid plans are segmented into four tiers: $0, $20, $200, ∞, most of the featured functions are provided only in the paid plans.

GitHub Pages

Successfully deployed website, click to experience.

GitHub Pages relies on the GitHub platform, attracting a large number of developers to use GitHub Pages for website deployment due to its completely free positioning and large user base.

Experience Conclusion

Due to the high recognition of GitHub, GitHub Pages has become the first choice for front-end beginners learning deployment. The active community also helps resolve various issues.

However, in terms of scalability and automation, GitHub Pages lags behind commercial platforms, and its stability is also questionable.

Pros

1. Completely free: No worries about forced migration due to the payment plan.
2. Active community: The active community with numerous experts can solve problems in a timely manner.

Cons

1. Unstable: GitHub Pages access is unstable, occasionally experiencing disconnection and slow access issues. During the test, the route tracking path was also unsatisfactory.
2. No pre-configured build scripts: GitHub Pages lacks pre-configured front-end framework packaging and build workflows, requiring manual writing of the deployment workflow file, posing a certain hurdle for beginners.
3. Limited resources: In commercial or collaborative development, GitHub Pages' resource limitations may be insufficient. The storage limit is 1GB, and the maximum of 10 builds per hour limits many application scenarios.

EdgeOne Pages

Successfully deployed website, click to experience.

EdgeOne Pages is a new website deployment service from Tencent Cloud EdgeOne, currently in Beta and completely free, providing a global acceleration version of a pre-configured .site domain to address the poor performance in China common to all platforms.

Experience Conclusion

EdgeOne Pages' various indicators are slightly weaker compared to international giants. However, the platform provides generous free resources for developers and is about to support edge functions (Serverless). Despite the upcoming introduction of paid plans, it remains promising.

Pros

1. Free with few limitations: The platform currently has very few limitations, no paid functions, and no need to bind a credit card. The official statement suggests that after the launch of the commercial version, the free plan may increase limitations.
2. Stable concurrent builds: EdgeOne Pages performs excellently in concurrent builds. Considering that concurrent builds can easily lead to build failures, most platforms impose strict restrictions on this.

Cons

1. Limited functionality: The current platform is relatively simple, with limited front-end templates, appearing to be in rapid iteration.
2. High latency in some regions: EdgeOne Pages deployed websites perform well in most overseas regions but have high access latency in some areas, to be detailed later.

Summary of Pros and Cons

The above shows unique advantages of each platform. Common benefits such as support for custom domains and SSL are not reiterated. There may be other advantages not discovered during this experience, welcome to supplement in the comments.

For mature platforms like Cloudflare and Vercel, their business-level shortcomings are minimal, with the main focus on resource support in free plans.

In terms of resource limitations, different developers will have different experiences, so the severity of resource restriction depends on the actual situation. This experience sharing is for discussion and reference, unable to cover all usage scenarios.

Website Deployment Metric Measurements

The measurement indicators include three categories:

1. Global access latency: This tests the access latency of the deployed static website from clients worldwide, mainly evaluating each platform's CDN construction level.
2. Google Lighthouse metrics: Google Lighthouse can evaluate webpage performance, accessibility, etc. This measurement includes: First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), and Cumulative Layout Shift (CLS) among other metrics. These indicators reflect the actual experience of users during the page loading process.

Measurement of Global Access Latency

Global access latency is measured based on platform-preconfigured domains. If the platform has optimized custom domains, the measurement results might vary from actual scenarios.

Global latency measurements used multiple tools to verify results and prevent bias due to tool selection; the images below use the CDNPerf tool.

Vercel

Vercel performs quite well, with high latency only in a few regions, ensuring smooth access in most areas globally.

Cloudflare Pages

Cloudflare tests show very robust results, with few nodes even showing high latency. Detailing the tests increases the nodes measured, showing high latency in several Asian regions.

GitHub Pages

GitHub Pages performs satisfactorily globally, with access instability only in China and the APAC region's nodes.

EdgeOne Pages

EdgeOne Pages performs adequately in most overseas regions, with high latency in some areas, likely due to currently limited global nodes, with evident advantages in testing from the China region.

Google Lighthouse Metrics in Real Use Experience

To evaluate webpage performance, Google Lighthouse measures key indicators: CLS, LCP, FCP, TBT, etc. For detailed indicator descriptions, refer to the Google official documentation.

Considering the fluctuations in single Lighthouse measurements, to reduce occasional errors, 10 tests were conducted on individual sites, averaging the results.

Here are the measurement results:

Due to the significant differences in Google Lighthouse metrics for different types of websites, the indicators shared are for reference only.

Conclusion

Overall, giants like Cloudflare and Vercel offer a variety of solutions, strong extension capabilities, and smooth deployment processes.

GitHub Pages has resolved issues like the inability to customize domains, unstable access, and SSL support, which were highly requested online. The automation level should also improve in the future.

EdgeOne Pages brought pleasant surprises. The user deployment experience is not far behind the giants, with good performance in various indicator tests and the most generous free resource support.

This sharing covers the contents of free plans aimed at helping users find quality deployment resources initially. Due to the complexity of paid plans, significant differences in platform strategies, resource allocation, and technical support, those are not further discussed.

Based on the developers' actual situations, the following recommendations are made:

1. Tight budget: Recommended to use EdgeOne, as it provides very generous free resources.
2. High technical selection criteria: Recommended Vercel and Cloudflare, with Cloudflare more suitable for developers with a sufficient budget.
3. Newcomers learning front-end deployment: Recommended GitHub Pages, due to its active community resources.

Here is a comparative table I compiled showing the resource usage for each free plan.

The "unlimited" mentioned above means that during the experience, no limits were triggered, and no limitation descriptions were found on the official website.