Getting started overview

Getting started with PageCDN involves a few key steps to integrate its content delivery network services into a web project. The primary goal is to offload static assets, such as JavaScript libraries, CSS stylesheets, images, and fonts, to PageCDN's global network, which can help improve website loading performance. This process typically begins with account creation, configuring your project, and then updating your web pages to reference assets hosted on PageCDN. The platform is designed for straightforward integration, particularly for common front-end libraries and static files.

PageCDN offers a free tier that includes 1 GB of storage and 20 GB of monthly traffic, making it accessible for testing and small-scale projects. For higher usage, paid plans are available, starting with the Basic plan at $5 per month for 25 GB storage and 1 TB traffic. The focus of PageCDN is on optimizing delivery and providing features like HTTP/2 and Brotli compression by default, which are important for modern web performance as described by Google's PageSpeed Insights documentation.

The following table provides a quick reference to the essential steps for setting up PageCDN:

Step What to Do Where
1. Sign Up Create a new PageCDN account. PageCDN Homepage
2. Project Setup Create a new project or configure an existing one. PageCDN Dashboard
3. Obtain Credentials Locate your Project ID or API key. PageCDN Dashboard > Project Settings
4. Upload Assets (Optional) Upload custom static files if not using public libraries. PageCDN Dashboard > File Manager
5. Integrate URLs Update your HTML/CSS to use PageCDN URLs. Your website's code
6. Test Verify assets are loading correctly from PageCDN. Browser Developer Tools

Create an account and get keys

To begin using PageCDN, the first step is to create an account. This process is straightforward and can be initiated directly from the PageCDN homepage. You will typically be asked to provide an email address and create a password. After successful registration, you will gain access to the PageCDN dashboard, which serves as the central hub for managing your projects, assets, and configurations.

Within the dashboard, you will need to create a Project. A project in PageCDN acts as a container for your website's assets and settings. Each project is associated with a unique Project ID. This ID is crucial for constructing the URLs for your hosted assets. For instance, if you're hosting a specific version of a JavaScript library, its URL will incorporate your Project ID to ensure it's served from your account's designated space.

While PageCDN primarily uses Project IDs for direct asset linking, certain advanced features or programmatic interactions might require an API Key. If an API key is needed, it can typically be generated or found within the 'Settings' or 'API' section of your project in the PageCDN dashboard. Always treat API keys as sensitive credentials, similar to how AWS recommends managing access keys, to prevent unauthorized access to your account or assets. For basic static asset delivery, the Project ID is usually sufficient.

The PageCDN getting started guide provides detailed instructions on account creation and project setup. It's recommended to follow their official documentation for the most up-to-date process, as user interface elements can occasionally change.

Your first request

After setting up your account and creating a project, the next step is to make your first request to PageCDN by updating your website's code to reference assets hosted on their network. PageCDN supports two primary methods for serving assets: using its extensive library of publicly available front-end libraries or hosting your custom static files.

Using Public Libraries

PageCDN maintains a large repository of popular JavaScript and CSS libraries. To use these, you simply replace your existing script or link tags with PageCDN-generated URLs. For example, to include a specific version of jQuery, you might change:

<script src="/path/to/your/jquery.min.js"></script>

to something like:

<script src="https://pagecdn.io/lib/jquery/3.6.0/jquery.min.js" integrity="sha384-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" crossorigin="anonymous"></script>

The exact URL and the integrity hash (for Subresource Integrity, a security feature) for each library and version can be found directly on the PageCDN libraries documentation. These URLs are designed to be immutable for specific versions, ensuring consistent delivery.

Hosting Custom Static Files

If you have custom CSS, JavaScript, images, or other static assets, you can upload them to your PageCDN project. This is typically done through the 'File Manager' section in your PageCDN dashboard. Once uploaded, PageCDN will provide a unique URL for each file, which will incorporate your Project ID. The format usually looks like this:

https://pagecdn.io/c/your-project-id/your-file-name.css

You would then update your website's HTML or CSS to reference these new URLs. For example, to link a custom stylesheet:

<link rel="stylesheet" href="https://pagecdn.io/c/your-project-id/style.css">

After updating your code, deploy your changes to your web server. When a user visits your site, their browser will fetch the specified assets from PageCDN's global network, potentially reducing latency and improving load times.

Common next steps

Once you've successfully integrated PageCDN for your initial assets, several common next steps can further optimize your website's performance and leverage additional PageCDN features:

  1. Migrate More Assets: Systematically identify and migrate all suitable static assets, including images, fonts, and additional JavaScript/CSS files, to PageCDN. This maximizes the benefits of CDN delivery. Consider tools like Google Lighthouse to audit your website for static assets that could be served from a CDN.

  2. Configure Custom Domains: For a more branded experience, configure a custom domain (e.g., cdn.yourdomain.com) to serve your assets through PageCDN. This involves updating DNS records (typically a CNAME record) to point to PageCDN's infrastructure. Refer to the PageCDN custom domain documentation for specific instructions.

  3. Implement Cache Control: Understand and configure appropriate cache-control headers for your assets. While PageCDN handles caching by default, fine-tuning these headers can optimize how browsers and intermediate caches store and revalidate your content, impacting subsequent page loads. The MDN Web Docs on Cache-Control provide comprehensive details.

  4. Monitor Usage and Performance: Regularly check your PageCDN dashboard for usage statistics, bandwidth consumption, and performance metrics. This helps you understand the impact of the CDN and identify any potential issues or areas for further optimization.

  5. Explore Optimization Features: PageCDN offers built-in optimizations like automatic Brotli compression, HTTP/2, and image optimization. Ensure these features are enabled and configured to suit your needs. Review the PageCDN optimization features for details.

  6. Set Up Security Features: Implement features like Subresource Integrity (SRI) for public libraries to ensure that the files fetched by the browser haven't been tampered with. PageCDN provides the necessary integrity hashes for its hosted libraries.

  7. Integrate with Build Processes: For larger projects, consider integrating PageCDN asset URLs into your build tools (e.g., Webpack, Gulp) to automate the process of updating asset paths during deployment.

Troubleshooting the first call

Encountering issues during the initial setup of any CDN is common. Here are some troubleshooting steps for your first call to PageCDN:

  • Check Network Tab in Browser Developer Tools: This is the first place to look. Open your browser's developer tools (usually F12 or Cmd+Option+I), navigate to the 'Network' tab, and refresh your page. Look for the assets you expect to be served by PageCDN. Verify their status codes (should be 200 OK) and the domain they are being fetched from (should be pagecdn.io or your custom domain).

  • Verify URLs: Double-check that the URLs in your HTML or CSS exactly match the URLs provided by PageCDN, including any version numbers or file extensions. A common mistake is a typo in the Project ID or file name.

  • Confirm Asset Upload: If you are hosting custom files, ensure they have been successfully uploaded to your PageCDN project via the dashboard's File Manager. If a file is missing on PageCDN's servers, it cannot be served.

  • Inspect Console for Errors: The browser's console (also in developer tools) might report errors related to asset loading, such as MIME type mismatches, CORS issues, or Subresource Integrity (SRI) failures. An SRI failure means the content of the file fetched does not match the expected hash, which could indicate a caching issue or an incorrect hash.

  • Clear Browser Cache: Sometimes, your browser might be serving an old version of your page or assets from its local cache. Perform a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) or clear your browser's cache entirely.

  • Check DNS Settings (for Custom Domains): If you're using a custom domain, ensure your CNAME record is correctly configured and has propagated. DNS changes can take some time to propagate globally. You can use online DNS lookup tools to verify propagation.

  • Review PageCDN Dashboard Logs: The PageCDN dashboard may offer logs or analytics that can provide insights into requests made to your project, including any errors encountered on their side. Consult the PageCDN troubleshooting documentation for more specific guidance.

  • Firewall or Ad Blocker Interference: Occasionally, local firewall settings, VPNs, or browser extensions like ad blockers can interfere with asset loading. Try temporarily disabling them to rule out interference.