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.
GET /critical-css
| Parameter | Type | Required | Description |
|---|---|---|---|
url |
String | Yes | The URL of the Shopify page for which to retrieve or generate critical CSS. |
GET https://codefusiononline.com/critical-css?url=https://codefusiononline.com/yourpageThe endpoint returns a JSON object with the following structure:
| 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. |
{
"message": "CSS already exists",
"data": "*{border:0;margin:0;padding:0;...}"
}/critical-css, including the url parameter with the full URL of the page you want the critical CSS for.
message field to confirm the status of the CSS. Use the data field to access and apply the critical CSS as needed.
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();
}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'];
}$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);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();
}| 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. |
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");