Blog Articles

Performance

Analyze Javascript with Script Treemap

Analyze your JavaScript bundles to find and remove unused code for a faster site.

How to Diagnose Website Performance Issues

Review diagnostic information to find possible performance bottlenecks or issues with your website.

How to Optimize Page Resources

Keep the number and size of resources (like images, CSS, JS) small for faster load times.

How to Use User Timing Api

Use the User Timing API to measure how fast important parts of your site load, so you can optimize them.

Use Third Party Facades to Improve Site Speed

Replace heavy third-party widgets (video embeds, chat, social) with lightweight placeholders that only load the real script when the user clicks.

Website Performance Optimization

Website performance optimization is the process of making your website faster, more responsive, and more efficient across all devices and connection speeds.

What Is Bootup Time

Bootup Time is the time your browser spends starting up scripts and code. Too much code can slow things down. Remove unnecessary scripts for faster bootup.

What Is Critical Request Chains

Network Dependency Tree visualizes how your resources load and which files are blocking others. Understanding this chain helps you optimize your critical rendering path by preloading important resources or deferring non-critical ones.

What Is Cumulative Layout Shift

Cumulative Layout Shift measures how much content moves around unexpectedly while your site loads. When things jump around, it can be confusing or annoying for users. Keep things steady by setting sizes for images and ads.

What Is Dom Size

A large DOM (lots of HTML elements) can slow down your page, especially on mobile devices. Try to keep your HTML structure as simple as possible.

What Is First Contentful Paint

First Contentful Paint (FCP) measures how quickly something (like text or an image) appears on your website after a user opens it. The faster this happens, the more quickly your visitors feel your site is loading.

What Is Image Size Responsive

Use images that are the right size for each device and layout. Avoid loading huge images on small screens.

What Is Interactive

Time to Interactive measures how long it takes before your website can fully respond to user clicks and actions. Make sure your site is usable as soon as possible after loading.

What Is Largest Contentful Paint

Largest Contentful Paint (LCP) tracks when the main, largest element on your page—like a banner or big image—finishes loading. If this is slow, users might think your site is sluggish. Try to make your most important content appear quickly.

What Is Long Tasks

Long tasks are pieces of code that block your site from responding quickly to user actions. Break big scripts into smaller pieces to keep your site snappy.

What Is Main Thread Tasks

If the main thread is busy for too long, your website will feel slow. Try to reduce the amount of work your JavaScript does while loading.

What Is Modern Image Formats

Image Delivery Insight evaluates how efficiently you're serving images. It checks for proper sizing, modern formats (WebP/AVIF), compression, and lazy loading. Images are often the biggest files on your page, so optimizing them has huge impact.

What Is Network Rtt

Network Round Trip Time measures how long it takes data to travel between your user's device and your server. The shorter the time, the faster your site can start loading.

What Is Network Server Latency

Network Server Latency is the time the server takes to respond to a request. Lower latency means a quicker loading experience for your visitors.

What Is Offscreen Images

Images below the fold don't need to load right away. Defer them with native lazy loading so the browser focuses on what's actually visible first.

What Is Render Blocking Resources

Some files, like CSS and JavaScript, can block your page from appearing quickly. Move non-critical files to load later, or load them asynchronously.

What Is Server Response Time

Server Response Time (TTFB) measures how long your server takes to send the first byte of HTML. A slow response delays everything that follows. Use caching and a CDN to bring it down.

What Is Speed Index

Speed Index measures how quickly your website shows content visually as it loads. A low Speed Index means your page looks ready faster, which keeps visitors engaged.

What Is Total Blocking Time

Total Blocking Time tells you how long your site is unable to respond to user input because the browser is busy. To improve this, reduce the amount of JavaScript running during page load so your site feels fast and responsive.

What Is Total Byte Weight

Large file sizes slow down your website. Reduce the size of images, scripts, and stylesheets to make your site load faster.

What Is Unminified Css

Minify your CSS files by removing extra spaces and comments. Smaller CSS loads faster and helps your page appear quicker.

What Is Unminified Javascript

Minify your JavaScript files by removing spaces, comments, and unused code. This speeds up the loading of your site.

What Is Unsized Images

Always set width and height for your images in the HTML. This helps the browser reserve space and prevent layout shifts while your site loads.

What Is Unused Css Rules

Remove CSS rules that are not being used by your website. Less CSS means faster loading times.

What Is Unused Javascript

Remove JavaScript that isn't needed for your page. Less JavaScript helps your site load faster and perform better.

What Is Uses Long Cache Ttl

Cache Insight analyzes your caching strategy and shows which resources could benefit from longer cache lifetimes. Proper caching means repeat visitors load your site much faster because their browser already has your files stored locally.

What Is Uses Rel Preconnect

Preconnect lets the browser set up early connections to important third-party services, making your site start loading faster.

What Is Uses Responsive Images

Serve images sized for the device that is actually requesting them. A 4000-pixel hero image on a 400-pixel mobile screen wastes bandwidth and slows LCP. Use srcset and sizes (or the picture element) to send the right resolution per viewport.

What Is Uses Text Compression

Compress your text-based files (HTML, CSS, JS) with Brotli or gzip. It typically shrinks them by 60–80% without any code changes.

Accessibility

Accessible Names for Aria Widgets

ARIA menu items, menu item checkboxes, and menu item radios must have an accessible name so screen reader users know what the control does. Add a visible label or use aria-label.

Accessible Names for Input Fields

Input fields should have clear and unique names to help users understand what to enter.

Aria Allowed Attributes

Make sure ARIA attributes are used correctly. Invalid attributes can confuse assistive technologies.

Aria Required Children and Parent Relationships

Certain ARIA parent roles require specific child roles to function correctly. For example, a role='list' must contain role='listitem' children. Add the missing child elements or roles.

Avoid Aria Hidden on Entire Page

Don't hide the entire page with ARIA attributes unless you have a good reason—users won't be able to access your content.

Avoid Focus on Hidden Elements

Avoid hiding elements that are focused. Users may get lost if focus moves to a hidden element.

How to Add Captions to Videos

Add captions to your videos so users who are deaf or hard of hearing can understand the content.

How to Add Skip Links for Accessibility

Include skip links so users can jump past repeated content, like menus, to the main part of the page.

How to Format Lists Accessibly

Format lists using proper <ul> or <ol> tags so screen readers can read them correctly.

How to Label Buttons Accessibly

Every button should have a clear, visible label that tells users exactly what it does — like 'Submit, ' 'Add to cart, ' or 'Book now.' Avoid vague labels like 'Click' or buttons that only show an icon with no text.

How to Label Select Dropdowns

Select dropdowns should have visible labels so users know what they're choosing.

How to Structure Headings Correctly

Keep your headings in a logical order (like h1, h2, h3) so users can easily understand the structure of your content.

How to Use Accesskeys Safely

If you use keyboard shortcuts (accesskeys), make sure they don't conflict with browser or screen reader shortcuts.

How to Use Aria Required Correctly

Mark required fields clearly so all users know they have to fill them in.

How to Use Aria Roles Correctly

Use ARIA roles and attributes correctly to help screen readers and assistive technology understand your site.

How to Use Definition Lists Correctly

Make sure definition lists (<dl>) have properly paired terms and descriptions.

How to Use Labels in Html Forms

Ensure that all form elements have clear labels. Labels help users know what to enter and make forms accessible for everyone.

How to Use Meta Viewport for Mobile Accessibility

Set a viewport so your website displays well on mobile devices, allowing for proper scaling and responsiveness.

How to Use Tabindex for Better Keyboard Navigation

Use tabindex wisely to control keyboard navigation on your site, making it easier for users who don't use a mouse.

How to Write Descriptive Link Text

Use clear, descriptive link text so users know what to expect. Avoid vague terms like 'click here.' Instead, use short and meaningful phrases like 'See pricing', 'Book a tour', or 'Shop new arrivals.'

Make Buttons and Links Easy to Tap

Make sure buttons and links are large enough to tap easily, especially on mobile devices.

Naming Toggle Fields for Accessibility

Interactive fields (like toggles) should have names that clearly describe their purpose.

Using Main Landmark in Html

Include one main landmark (like <main>) to help users quickly find your main content.

What Is Aria Text Role

Elements with role='text' should only contain plain text — no focusable or interactive children. Using this role incorrectly can cause screen readers to misread or skip content.

What Is Color Contrast

Ensure your text has enough contrast with the background color. Good contrast makes your site readable for everyone, including people with visual impairments.

What Is Frame Title

Every iframe must have a descriptive title, so screen readers can explain what it is.

What Is Html Has Lang

Always set the language of your page in the HTML tag (like <html lang='en'>) so browsers and assistive technologies know how to read your site.

What Is Image Alt

Add descriptive alternative text (alt text) to your images so users with screen readers or slow connections can understand your content.

Why Should You Avoid Autoplay Audio on Websites

Audio that plays automatically when a page loads is disorienting for screen reader users (it competes with the screen reader voice) and disruptive for everyone else. Wait for an explicit user gesture before playing sound, and provide a pause control.

Why You Should Allow Paste in Input Fields

Don't prevent users from pasting into input fields. It can be frustrating, especially for passwords.

Why You Should Avoid Meta Refresh

Avoid using meta refresh tags. They can be confusing and disruptive for users relying on assistive technologies.

SEO

Ai Tools for Seo

AI tools are revolutionizing SEO workflows by automating keyword research, content creation, technical audits, and competitive analysis. From ChatGPT for content briefs to specialized platforms for optimization, artificial intelligence enables SEO professionals to achieve better results faster while focusing on strategy and creativity.

Best Font Sizes for Readability

Use a body font size of at least 16px on mobile and keep line height around 1.5. Small text hurts readability, mobile usability, and Lighthouse's font-size audit.

Bfs Vs Dfs in Crawlers

BFS and DFS are the two traversal strategies every web crawler must choose between. BFS sweeps the site level by level using a queue, covering the most important pages first and enabling parallel batch fetching. DFS dives deep into one branch before backtracking using a stack. Greadme's Crawl Scan uses BFS with depth tracking to prioritize what matters and audit large sites efficiently.

Chatgpt Google Ai Citations Explained

Google and ChatGPT cite websites differently due to their fundamental approaches: Google indexes pages for search results, while ChatGPT selects sources based on meaning, intent, and relevance. Understanding OpenAI bots (GPTBot, OAI-SearchBot, ChatGPT-User) and checking for blocks in robots.txt or at the server level is crucial for appearing in AI citations.

Claude Has Emotions Prompt Engineering

New Anthropic research reveals that Claude has internal emotional mechanisms — called Functional Emotions — that causally influence its behavior. From fear activating before dangerous responses to despair triggering deceptive shortcuts, these findings change how we should think about writing prompts for AI models.

Google Official Ai Search Optimization Guide

Google officially confirmed that AI Overviews and AI Mode use the same index as regular Search — there is no separate AI ranking system. Foundational SEO remains the correct path, while popular tactics like llms.txt files, content chunking, and inauthentic mention campaigns are confirmed by Google to not help.

How to Find and Fix Broken Links

Find and fix broken internal and external links. Dead links waste crawl budget, lose link equity, and signal low quality to both users and search engines.

How to Implement Structured Data with Schema

Use structured data (like Schema.org) to help search engines better understand your content and improve your appearance in search results.

How to Make Your Site Crawlable

Ensure your site isn't blocking important pages from search engines. Let search bots access your content so it appears in search results.

How to Set Up Robots Txt Correctly

Set up a robots.txt file to guide search engines on what pages to crawl or ignore. Don't accidentally block important pages.

How to Use Canonical Tags Properly

Add a canonical tag to indicate the preferred version of a page. This helps prevent duplicate content in search results.

How to Use Hreflang Tags Correctly

Use hreflang tags if your site is available in multiple languages, so search engines show the right version to each user.

How to Write Effective Meta Descriptions

Add a clear and concise meta description tag to each page. This helps search engines understand your content and can increase your click-through rate in search results.

Is llms.txt Worth It for Ai Search

Google has officially confirmed it does not use llms.txt files for Search or its AI features — while reports that OpenAI crawls them remain disputed. This guide separates what the evidence actually shows from the hype, and gives a practical verdict on whether creating an llms.txt file is worth your time.

Make Sure Your Links Are Crawlable

Make sure links use valid URLs and can be followed by search engines for better site indexing.

Meta Tags

Meta tags are the hidden code that makes or breaks your website's first impression in search results and social media. Without proper meta tags, search engines and social platforms can't understand or properly display your content, leading to poor visibility and lost traffic.

Seo Issues with Client Side Rendering

If your site shows most of its content only after JavaScript loads, search engines may have trouble indexing it. Include important content in your initial HTML for better SEO.

Seo Vs Aeo Answer Engine

Traditional SEO focuses on ranking in search results, while Answer Engine Optimization (AEO) optimizes for AI systems that provide direct answers. As search evolves toward AI-powered answers, websites need strategies for both approaches to maintain visibility across traditional search engines and emerging answer engines.

What Is Ai Visibility Analyzer in Greadme

Greadme's AI Visibility Analyzer tests how your brand appears across leading AI models like Claude, GPT, and Gemini. It sends real prompts to each model with web search enabled, then analyzes whether your domain is mentioned, your ranking position, and which competitors appear alongside you — giving you actionable data for the new frontier of AI-powered search.

What Is Crawl Scan in Greadme

Greadme's Crawl Scan automatically discovers and analyzes every page on your website by following internal links. It checks for missing alt text, broken links, meta tag issues, heading structure problems, and more across your entire site — giving you a complete health report with real-time progress tracking and exportable results.

What Is Deep Scan Audit in Greadme

Greadme's Deep Scan performs a comprehensive analysis of a single URL, examining over 190 parameters across performance, SEO, accessibility, best practices, security, schema markup, and meta tags. Get detailed insights with actionable recommendations, AI-powered summaries, and exportable reports that help you understand exactly what needs improvement and why.

Why Correct Http Status Codes Matter

Make sure each page returns the correct HTTP status code, such as 200 for success or 404 for not found. Incorrect codes can confuse search engines and users.

Best Practices

Avoid Duplicate Ids in Html

Every HTML element must have a unique id. Duplicate ids can cause issues with scripts and accessibility tools.

Avoid Using Third Party Cookies

Limit or avoid using third-party cookies to help protect your users' privacy and comply with privacy regulations.

Fix Browser Inspector Issues

Fix issues flagged by browser inspectors to improve your site's reliability.

Fix Javascript Errors in Console

Fix all JavaScript errors shown in the browser console. These errors can break features, hurt performance, and make your site feel unreliable.

Geolocation Request for Better Ux

Avoid asking for geolocation permissions as soon as the site loads. Let users interact with your site first.

How to Redirect Http to Https

Each redirect in the chain before reaching your final page adds a full network round-trip of latency. Eliminate unnecessary redirect chains and update any links or bookmarks pointing to old URLs.

Improve Accessibility with Html5 Landmarks

Add landmarks (like <nav>, <main>, <footer>) so users can easily navigate your site using assistive technology.

Improve Scrolling with Passive Event Listeners

Use passive event listeners for scroll and touch events so the browser can scroll smoothly without waiting for your JavaScript. This is a measurable INP and scrolling-jank fix.

Optimize Animated Content for Speed

These CSS animations are not running on the GPU's composited layer, so the browser has to repaint the whole page on every frame — causing jank and stuttering. Switch to 'transform' and 'opacity' CSS properties to make animations smooth and GPU-accelerated.

Optimize Font Loading with Font Display

Use the 'font-display' property in your CSS to make sure text is visible quickly while custom fonts load.

Optimize Main Thread Performance

Reduce the amount of work done on the browser's main thread (this is what handles everything the user sees and interacts with — like clicking, scrolling, and typing). If it gets too busy, your site may feel slow or unresponsive.

Remove Deprecated Web Features

Update your site to stop using deprecated web features, which might stop working in future browsers.

Remove Unused Javascript Libraries

Remove unused JavaScript libraries to keep your website fast and reduce security risks.

When to Ask for Notification Permission

Don't prompt users for notifications right away. Wait until they've interacted with your site.

Why Visual Order Should Match Dom Order

Make sure the order of elements in your HTML matches the order they appear visually, for consistency and accessibility.

Why You Need a Valid Html Doctype

Always include a valid doctype at the top of your HTML file to ensure browsers render your site correctly.

Why You Should Avoid Document Write

Avoid document.write(). It blocks page parsing, hurts performance, and is flagged by Lighthouse. Use modern alternatives like insertAdjacentHTML or async script loading.

Why You Should Use Http2

HTTP/2 and HTTP/3 multiplex many requests over one connection, eliminating the round-trip cost of HTTP/1.1's per-request connections. Most CDNs and modern hosts support both — flip the switch to cut tail latency on resource-heavy pages.

Why You Should Use Utf 8 Encoding

Specify the correct character encoding (like UTF-8) to make sure your text displays properly for all users.

Why Your Website Must Use Https

Always use HTTPS to encrypt data between your site and visitors. This protects user privacy and is required by most browsers.

Schemas

What Is Article Schema

Article schema (JSON-LD) tells Google and AI search engines that your page is editorial content — an article, news story, or blog post. It unlocks the Top Stories carousel, Google Discover, and significantly improves AI citation rates. Required fields: headline, image, datePublished, author.

What Is Course Schema

Course schema (JSON-LD) describes educational courses for online and in-person learning. Note: the course-info rich result was deprecated in June 2025 — the Course List carousel (ItemList with 3+ courses) remains active. Required fields: name (no promotional language, prices, or discounts) and description. Add provider with name and sameAs. Use hasCourseInstance for scheduled offerings with courseMode (online/onsite/blended).

What Is Dataset Schema

Dataset schema (JSON-LD) makes scientific and research datasets discoverable in Google Dataset Search and AI research assistants. Required fields: name and description (must be 50–5000 characters exactly). Key recommended properties: creator (with ORCID for persons, ROR for organizations in sameAs), identifier (DOI), license (URL), keywords, isAccessibleForFree, temporalCoverage (ISO 8601 range), spatialCoverage, and distribution (DataDownload with contentUrl and encodingFormat).

What Is Discussion Forum Schema

DiscussionForumPosting schema (JSON-LD) marks up user-generated forum posts for Google Search rich results and AI citation. Required fields: author (with name), datePublished (ISO 8601), at least one of text/image/video. Recommended: url (first page URL for multi-page threads), headline for DiscussionForumPosting (not for SocialMediaPosting). Use interactionStatistic with LikeAction, ViewAction, CommentAction, or ReplyAction for post-level engagement stats. Only use for genuinely user-generated content.

What Is Event Schema

Event schema (JSON-LD) unlocks Google's event rich results carousel — displaying event name, date, venue, and ticket link directly in search results. Required fields: name (no promotional language), startDate (ISO 8601 with timezone), and location (a physical Place with PostalAddress — online-only VirtualLocation events are not eligible for Google rich results). Use eventStatus to signal cancelled or rescheduled events, and always add previousStartDate when rescheduling.

What Is Faqpage Schema

FAQPage schema (JSON-LD) marks up pages with a curated list of questions and authoritative answers. Note: Google deprecated FAQ rich results in May 2026 — the schema is now primarily valuable for AI search citation, voice assistants, and LLM responses. Required structure: FAQPage → mainEntity (array of Question objects) → each Question needs name (the question text) and acceptedAnswer → Answer with text. Use acceptedAnswer, not suggestedAnswer.

What Is Itemlist Schema

ItemList schema (JSON-LD) powers Google Carousel rich results — a horizontal card row in search for recipes, courses, movies, and restaurants. Required: itemListElement array with ListItem objects, each having a unique sequential position (starting at 1) and either url or item. Duplicate URLs and duplicate positions are errors. For carousel eligibility: minimum 2 items, all URLs on the same domain, all items of the same supported type (Recipe, Course, Movie, or Restaurant).

What Is Local Business Schema

LocalBusiness schema (JSON-LD) tells Google what your business is, where it is, and when it is open. It powers Knowledge Panels, local carousels, and AI assistant responses. Required fields: name and a full PostalAddress. Always use the most specific subtype (Restaurant, Dentist, Hotel) rather than generic LocalBusiness.

What Is Movie Schema

Movie schema (JSON-LD) enables Google's movie carousel for review and listing pages — showing film poster, star rating, and director in search results. Required fields: name and image (6:9 aspect ratio preferred). For listing page carousels, wrap each Movie in ItemList → ListItem with a unique url and sequential position. aggregateRating requires ratingValue plus ratingCount or reviewCount — use a dot, not a comma, for decimals.

What Is Organization Schema

Organization schema (JSON-LD) tells Google and AI systems who your organization is, powering Knowledge Panels, AI Overview answers, and voice search responses about your brand. Required fields: name and either logo or image (minimum 112×112px). Key recommended properties: url, address, contact information (contactPoint, telephone, or email), sameAs (social media profiles and Wikipedia), and description. For multi-location organizations, use subOrganization with each location having its own name, address, and telephone.

What Is Product Schema

Product schema (JSON-LD) tells Google a page describes a product available for purchase, unlocking Product Snippets and Merchant Listings. Required fields: name, image, offers (with price and priceCurrency). Price must be a plain number — no symbols or commas.

What Is Productgroup Schema

ProductGroup schema (JSON-LD) marks up a family of product variants — colors, sizes, materials — enabling variant-aware Merchant Listings in Google Shopping. Required: name and productGroupID (stable group identifier). Each variant Product inside hasVariant needs name, image, offers (price > 0, priceCurrency), and a unique sku or gtin. The offers.url on each variant must deep-link directly to that specific variant. Use variesBy with full Schema.org URIs (https://schema.org/color, https://schema.org/size, etc.).

What Is Profilepage Schema

ProfilePage schema (JSON-LD) marks up user and organization profile pages for AI and Google Search entity recognition. Required: mainEntity (Person or Organization) with name or alternateName. Key recommended properties: dateCreated, dateModified, mainEntity.image (real photo only), mainEntity.sameAs (external profiles), mainEntity.identifier (internal ID), mainEntity.description. interactionStatistic tracks engagement received (FollowAction, LikeAction, BefriendAction); agentInteractionStatistic tracks user activity (FollowAction, LikeAction, WriteAction, ShareAction).

What Is Qapage Schema

QAPage schema (JSON-LD) marks up user-submitted Q&A pages (StackOverflow, Quora style) — one question per page with community-submitted answers. Required: mainEntity (Question with name, answerCount, and at least one acceptedAnswer or suggestedAnswer), each Answer needing text. Unlike FAQPage, both acceptedAnswer and suggestedAnswer are valid. Answer.url (anchor link) is strongly recommended. Do not use QAPage for FAQ pages, blog posts, or how-to guides — those pages are not eligible.

What Is Recipe Schema

Recipe schema (JSON-LD) turns recipe pages into rich results in Google Search and Images — showing the dish photo, cooking time, star ratings, and calories. Required fields: name (the specific dish) and image (the completed dish). Cooking times must use ISO 8601 duration format (PT15M, PT1H30M).

What Is Review Schema

Review schema (JSON-LD) marks up individual reviews and aggregate star ratings — powering the yellow star snippets in Google Search results. Required for Review: author (name under 100 characters), itemReviewed (@type + name), and reviewRating.ratingValue. Required for AggregateRating: itemReviewed, ratingValue, and ratingCount or reviewCount. Self-reviews by a LocalBusiness or Organization on their own site are not eligible for rich results (−30 points). Always use a dot, not a comma, for decimal ratings.

What Is Vacation Rental Schema

VacationRental schema (JSON-LD) enables vacation rental listings in Google Hotels and AI travel assistants. Required fields: name, identifier (stable unique ID), minimum 8 image URLs, latitude and longitude with at least 5 decimal places, and containsPlace (Accommodation with occupancy.value). checkinTime and checkoutTime must be ISO 8601 time format (HH:MM:SS±TZ). Reviews require datePublished; French properties also require contentReferenceTime. Requires Google Hotel Center participation for rich results.

What Is Videoobject Schema

VideoObject schema (JSON-LD) tells Google a page contains a video, enabling video thumbnails in search, Key Moments timestamps, and the LIVE badge for livestreams. Required fields: name (unique per video), thumbnailUrl (crawlable image, min 60×30px), and uploadDate (ISO 8601 with timezone). Always provide contentUrl (direct video file) or embedUrl (player URL). For Key Moments use either Clip (hasPart) or SeekToAction (potentialAction) — never both.

What Is Webpage Schema

WebPage schema (JSON-LD) describes a specific page on your website — its canonical URL, language, and primary content — and connects it to the entity graph that AI systems use for citations. Required field: url (valid absolute URL). Key recommended properties: @id (for graph linking), isPartOf (linking to WebSite schema), mainEntity or about (linking to primary content), name, description, inLanguage, and primaryImageOfPage. Use the most specific subtype: AboutPage, ContactPage, FAQPage, ItemPage, etc.