\n \n

\n {content.type === 'images' && (\n <>\n

Images

\n {item.url.split('/').pop()} - {(item.transferSize / 1024).toFixed(2)} KB\n Download\n

\n \n )}\n {content.type === 'videos' && (\n <>\n

Videos

\n {item.url.split('/').pop()} - {(item.transferSize / 1024).toFixed(2)} KB\n Download\n

\n \n )}\n

\n );\n}\n\nfunction HTMLPreview({ html, isFullView, toggleView }) {\n return (\n

Page HTML Preview

\n Preview\n \n \n \n \n Full View\n

\n        {isFullView ? html : html.slice(0, 500) + (html.length > 500 ? '...' : '')}\n

\n );\n}\n\nfunction App() {\n const [url, setUrl] = useState('');\n const [results, setResults] = useState(null);\n const [loading, setLoading] = useState(false);\n const [previewUrl, setPreviewUrl] = useState(\"\");\n const [performanceMetrics, setPerformanceMetrics] = useState(null);\n const [popupContent, setPopupContent] = useState(null);\n const [isPopupOpen, setIsPopupOpen] = useState(false);\n const [htmlContent, setHtmlContent] = useState('');\n const [isFullView, setIsFullView] = useState(false);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setLoading(true);\n setPreviewUrl(url);\n setResults(null);\n setPerformanceMetrics(null);\n setHtmlContent('');\n try {\n const response = await fetch(`/api?url=${encodeURIComponent(url)}`);\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n const data = await response.json();\n if (data.error) {\n throw new Error(data.error.message || \"An error occurred\");\n }\n setResults(data);\n const metrics = extractPerformanceMetrics(data);\n setPerformanceMetrics(metrics);\n await fetchHtmlContent(url);\n } catch (error) {\n console.error(\"Error fetching results:\", error);\n setResults({ error: error.message || \"Failed to fetch results\" });\n }\n setLoading(false);\n };\n\n const fetchHtmlContent = async (url) => {\n try {\n const response = await fetch(`/html?url=${encodeURIComponent(url)}`);\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n const html = await response.text();\n setHtmlContent(html);\n } catch (error) {\n console.error(\"Error fetching HTML content:\", error);\n setHtmlContent(\"Failed to fetch HTML content\");\n }\n };\n\n const extractPerformanceMetrics = (data) => {\n if (!data.lighthouseResult) {\n return null;\n }\n const { audits, categories } = data.lighthouseResult;\n\n const resourceSummary = audits['resource-summary']?.details?.items || [];\n const images = resourceSummary.find(item => item.resourceType === 'image') || { requestCount: 0, transferSize: 0 };\n const videos = resourceSummary.find(item => item.resourceType === 'media') || { requestCount: 0, transferSize: 0 };\n const totalBytes = resourceSummary.reduce((sum, item) => sum + (item.transferSize || 0), 0);\n\n const networkRequests = audits['network-requests']?.details?.items || [];\n const imageItems = networkRequests.filter(item => item.resourceType === 'Image' || item.resourceType === 'image');\n const videoItems = networkRequests.filter(item => item.resourceType === 'Media' || item.resourceType === 'media');\n\n const detectCDN = () => {\n const cdnHeaders = ['cloudflare', 'akamai', 'fastly', 'amazon cloudfront'];\n \n for (const request of networkRequests) {\n const headers = request.responseHeaders || [];\n for (const header of headers) {\n const headerString = `${header.name}: ${header.value}`.toLowerCase();\n for (const cdn of cdnHeaders) {\n if (headerString.includes(cdn)) {\n return cdn.charAt(0).toUpperCase() + cdn.slice(1);\n }\n }\n }\n }\n return 'Not detected';\n };\n\n return {\n cdn: detectCDN(),\n fcp: audits['first-contentful-paint']?.displayValue || 'N/A',\n lcp: audits['largest-contentful-paint']?.displayValue || 'N/A',\n tbt: audits['total-blocking-time']?.displayValue || 'N/A',\n cls: audits['cumulative-layout-shift']?.displayValue || 'N/A',\n performance: categories.performance ? `${Math.round(categories.performance.score * 100)}%` : 'N/A',\n images: {\n count: images.requestCount || 0,\n size: ((images.transferSize || 0) / 1024 / 1024).toFixed(2),\n items: imageItems\n },\n videos: {\n count: videos.requestCount || 0,\n size: ((videos.transferSize || 0) / 1024 / 1024).toFixed(2),\n items: videoItems\n },\n totalSize: `${(totalBytes / 1024 / 1024).toFixed(2)} MB`\n };\n };\n\n const handleResourceClick = (type) => {\n setPopupContent({\n type,\n items: performanceMetrics[type].items\n });\n setIsPopupOpen(true);\n };\n\n const toggleHtmlView = () => {\n setIsFullView(!isFullView);\n };\n\n return (\n

Page Insights

\n \n

Note: This tool uses the PageSpeed Insights API without authentication, which has usage limits. For higher quotas, consider using an API key.

Results

\n {results && (\n results.error ? \n

{results.error}

:\n

{JSON.stringify(results, null, 2)}

\n )}\n

Page Preview\n {previewUrl && (\n \n ({new URL(previewUrl).hostname})\n \n )}\n

\n {previewUrl && \n \n }\n

Performance Metrics

\n {performanceMetrics ? (\n

CDN/cloud service: {performanceMetrics.cdn}
First Contentful Paint (FCP): {performanceMetrics.fcp}
Largest Contentful Paint (LCP): {performanceMetrics.lcp}
Total Blocking Time (TBT): {performanceMetrics.tbt}
Cumulative Layout Shift (CLS): {performanceMetrics.cls}
Performance Score: {performanceMetrics.performance}
Images: handleResourceClick('images')}>{performanceMetrics.images.count} ({performanceMetrics.images.size} MB)
Videos: handleResourceClick('videos')}>{performanceMetrics.videos.count} ({performanceMetrics.videos.size} MB)
Total Estimated Size: {performanceMetrics.totalSize}

\n ) : (\n

No performance metrics available

\n )}\n

\n {htmlContent && (\n \n )}\n

\n setIsPopupOpen(false)}\n content={popupContent}\n />\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n \n if (url.pathname === \"/api\") {\n const testUrl = url.searchParams.get(\"url\");\n if (!testUrl) {\n return new Response(JSON.stringify({ error: \"URL parameter is required\" }), {\n status: 400,\n headers: { \n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\"\n },\n });\n }\n\n const apiUrl = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(testUrl)}`;\n\n try {\n const response = await fetch(apiUrl);\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n const data = await response.json();\n return new Response(JSON.stringify(data), {\n headers: { \n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\"\n },\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: error.message || \"Failed to fetch PageSpeed Insights\" }), {\n status: 500,\n headers: { \n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\"\n },\n });\n }\n }\n\n if (url.pathname === \"/html\") {\n const testUrl = url.searchParams.get(\"url\");\n if (!testUrl) {\n return new Response(\"URL parameter is required\", { status: 400 });\n }\n\n try {\n const response = await fetch(testUrl);\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n const html = await response.text();\n return new Response(html, {\n headers: { \n \"Content-Type\": \"text/plain\",\n \"Access-Control-Allow-Origin\": \"*\"\n },\n });\n } catch (error) {\n return new Response(\"Failed to fetch HTML content\", { status: 500 });\n }\n }\n\n return new Response(`\n \n \n Page Insights\n \n \n \n

\n \n \n \n \n `,{\n headers: { \"Content-Type\": \"text/html\" },\n });\n}\n\nconst css = `\n body {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n color: #333;\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n .container {\n background-color: #f4f4f4;\n border-radius: 5px;\n padding: 20px;\n }\n h1, h2 {\n color: #2c3e50;\n }\n form {\n margin-bottom: 20px;\n }\n input[type=\"url\"] {\n width: 70%;\n padding: 10px;\n margin-right: 10px;\n }\n button {\n padding: 10px 20px;\n background-color: #3498db;\n color: white;\n border: none;\n cursor: pointer;\n }\n button:disabled {\n background-color: #bdc3c7;\n }\n .content-wrapper {\n display: flex;\n gap: 20px;\n }\n .results-container {\n flex: 1;\n background-color: white;\n border: 1px solid #ddd;\n border-radius: 5px;\n padding: 20px;\n overflow-x: auto;\n }\n .right-column {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n .preview-container {\n background-color: #e8f5e9;\n border: 1px solid #ddd;\n border-radius: 5px;\n padding: 20px;\n }\n .domain-name {\n font-size: 0.8em;\n color: #666;\n margin-left: 10px;\n }\n .metrics-container {\n background-color: #fff9c4;\n border: 1px solid #ddd;\n border-radius: 5px;\n padding: 20px;\n }\n .html-preview-container {\n background-color: #e3f2fd;\n border: 1px solid #ddd;\n border-radius: 5px;\n padding: 20px;\n }\n .note {\n font-size: 0.9em;\n color: #666;\n margin-bottom: 15px;\n }\n pre {\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n iframe {\n width: 100%;\n height: 300px;\n border: 1px solid #ddd;\n }\n ul {\n list-style-type: none;\n padding: 0;\n }\n li {\n margin-bottom: 10px;\n }\n footer {\n margin-top: 20px;\n text-align: center;\n }\n .error {\n color: #e74c3c;\n font-weight: bold;\n }\n .clickable {\n cursor: pointer;\n color: #3498db;\n text-decoration: underline;\n }\n .popup-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .popup {\n background-color: #ffcccb;\n padding: 20px;\n border-radius: 5px;\n max-width: 80%;\n max-height: 80%;\n overflow-y: auto;\n position: relative;\n }\n .close-btn {\n position: absolute;\n top: 10px;\n right: 10px;\n background: none;\n border: none;\n font-size: 1.5em;\n cursor: pointer;\n }\n .popup-content {\n margin-top: 20px;\n }\n .download-btn {\n margin-left: 10px;\n padding: 2px 5px;\n background-color: #3498db;\n color: white;\n text-decoration: none;\n border-radius: 3px;\n font-size: 0.8em;\n }\n .toggle-container {\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n }\n .switch {\n position: relative;\n display: inline-block;\n width: 60px;\n height: 34px;\n margin: 0 10px;\n }\n .switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n .slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n transition: .4s;\n }\n .slider:before {\n position: absolute;\n content: \"\";\n height: 26px;\n width: 26px;\n left: 4px;\n bottom: 4px;\n background-color: white;\n transition: .4s;\n }\n input:checked + .slider {\n background-color: #2196F3;\n }\n input:checked + .slider:before {\n transform: translateX(26px);\n }\n .slider.round {\n border-radius: 34px;\n }\n .slider.round:before {\n border-radius: 50%;\n }\n .preview {\n max-height: 200px;\n overflow-y: auto;\n }\n .full-view {\n max-height: 500px;\n overflow-y: auto;\n }\n`;","deleted","label",[98],"permalink","https://www.val.town/x/eligosmlytics/pageSpeedAPI/code/main.tsx","extension","actionData","errors"]