Critical CSS Documentation

Overview

The /critical-css API endpoint allows users to retrieve critical CSS for specific Shopify pages. Critical CSS includes essential styles needed for the initial page render, helping optimize load times by minimizing CSS size.

Endpoint

GET /critical-css

Parameters

Parameter Type Required Description
url String Yes The URL of the Shopify page for which to retrieve or generate critical CSS.

Example Request

GET https://codefusiononline.com/critical-css?url=https://codefusiononline.com/yourpage

Response

The endpoint returns a JSON object with the following structure:

Response Fields

Field Type Description
message String Provides information about the CSS status (e.g., "CSS already exists" or "CSS generated").
data String The CSS styles necessary for the initial page render.

Example Response

{
                       "message": "CSS already exists",
                  "data": "*{border:0;margin:0;padding:0;...}"
                }

Usage Instructions

  1. Build Your Request: Make a GET request to /critical-css, including the url parameter with the full URL of the page you want the critical CSS for.
  2. Handle the Response: Check the message field to confirm the status of the CSS. Use the data field to access and apply the critical CSS as needed.

PHP HTTP Request Example

try {
                  $url = 'https://codefusiononline.com/critical-css?url=' . urlencode('https://codefusiononline.com/yourpage');
                  $response = file_get_contents($url);
                  $data = json_decode($response, true);
                
                  if (isset($data['message'])) {
                    echo $data['message'];
                  }
                
                  echo "Critical CSS: " . $data['data'];
                } catch (Exception $e) {
                  echo 'Error fetching critical CSS: ' . $e->getMessage();
                }

WordPress wp_remote_get Example

$response = wp_remote_get('https://codefusiononline.com/critical-css?url=' . urlencode('https://codefusiononline.com/yourpage'));
                
                if (is_wp_error($response)) {
                    echo 'Error: ' . $response->get_error_message();
                } else {
                    $body = wp_remote_retrieve_body($response);
                    $data = json_decode($body, true);
                    if (isset($data['message'])) {
                        echo $data['message'];
                    }
                    echo "Critical CSS: " . $data['data'];
                }

cURL Request Example

$ch = curl_init();
                curl_setopt($ch, CURLOPT_URL, "https://codefusiononline.com/critical-css?url=" . urlencode("https://codefusiononline.com/yourpage"));
                curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
                
                $response = curl_exec($ch);
                if (curl_errno($ch)) {
                    echo 'Error: ' . curl_error($ch);
                } else {
                    $data = json_decode($response, true);
                    echo "Message: " . $data['message'] . "\n";
                    echo "Critical CSS: " . $data['data'];
                }
                curl_close($ch);

Laravel HTTP Request Example

use Illuminate\Support\Facades\Http;
                
                $response = Http::get('https://codefusiononline.com/critical-css', [
                    'url' => 'https://codefusiononline.com/yourpage'
                ]);
                
                if ($response->successful()) {
                    $data = $response->json();
                    echo "Message: " . $data['message'];
                    echo "Critical CSS: " . $data['data'];
                } else {
                    echo 'Error: ' . $response->status();
                }

Response Codes

Code Description
200 OK Request was successful, and critical CSS was retrieved or generated successfully.
400 Bad Request The url parameter is missing, or the domain is not registered.
500 Internal Server Error An error occurred on the server side, possibly due to database issues or failure to fetch/generate CSS.

JavaScript Fetch API Example

async function fetchCriticalCSS(url) {
                  try {
                    const response = await fetch(`https://codefusiononline.com/critical-css?url=${encodeURIComponent(url)}`);
                    const data = await response.json();
                
                    if (data.message) {
                      console.log(data.message);
                    }
                
                    console.log("Critical CSS:", data.data);
                    return data.data;
                  } catch (error) {
                    console.error("Error fetching critical CSS:", error);
                  }
                }
                
                // Example Usage
                fetchCriticalCSS("https://codefusiononline.com/yourpage");

FAQ

  • What is Critical CSS?
    Critical CSS is the CSS needed to render above-the-fold content on a web page, which helps optimize page load times by only loading essential styles initially.
  • What does the message "CSS already exists" mean?
    This means the CSS for the requested URL has already been generated and stored, so the stored CSS is returned instead of generating a new version.

Call To Action

But pain in reproach in pleasure wants to be a cillum pain eu flees no birth. Excepteur are blinding desires do not proident, are in fault who desert offices softens the soul that is labor.

Call To Action

Contact

His needs result from something escape him indeed are consectetur will

Contact Info

Praesent sapien massa, vallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis.

Our Location

CodeFusionOnline

Rajasthan, Bagar 333023

Phone Number

+91 8239 724704

Email Address

codefusioninfo1@gmail.com

Get In Touch

Praesent sapien massa, vallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis.

Loading
Your message has been sent. Thank you!