Skip to main content
SimilarExport ZIP
100%

Gist 1b1889baaec2adffe574

✓ Published0🌍 Public
GGolodhros
Last edited Sep 30, 2015
Created on Sep 27, 2015

This example demonstrates a WordPress theme’s strategy for optimizing CSS delivery by inlining critical styles and asynchronously loading the full stylesheet. It shows how PHP hooks like `wp_head` and `wp_footer` conditionally inject scripts, styles, and a cookie-based cache check. The code uses `file_get_contents` to embed JavaScript files such as `loadCSS.js` and `onloadCSS.js`, alongside a `<style>` block for critical CSS. A `noscript` fallback ensures the full stylesheet loads without JavaScript. The implementation relies on the `Roots\Sage\Assets` namespace and functions like `asset_path()` to resolve file paths.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 23705f481029d7e1cb22973540188d19

This snippet demonstrates a WordPress performance optimization technique by filtering the `style_loader_tag` hook to modify how stylesheet links are rendered. It shows the `add_rel_preload` function, which replaces standard `<link>` tags with preload directives that include an `onload` handler to swap `rel='preload'` to `rel='stylesheet'`, enabling asynchronous CSS loading. The code uses WordPress PHP APIs (`add_filter`, `is_admin`) and outputs a heredoc string with the HTML. It explicitly avoids altering output in the admin panel, targeting front-end performance only.

KKopylovVitalik
75% match
Loading thumbnail…

Gist 467901440093a9904541

This example demonstrates a Gulp task that automates the generation of critical CSS for a WordPress theme. It shows the process of downloading a remote stylesheet, analyzing its rules, and extracting only the styles needed for above-the-fold rendering of a specific page. The task uses the `request` library to fetch the CSS file, `criticalcss` to parse and evaluate the rules against the target URL, and the Node.js `fs` module to write the resulting critical CSS to a local file.

GGolodhros
72% match
Loading thumbnail…

Gist 16d0e6050f60256517db942d1fe29703

This example demonstrates a technique for remotely fetching and inspecting CSS stylesheets, particularly extracting image URLs from `srcset` attributes and resolving cross-origin stylesheet rules. The code uses the Fetch API with a CORS proxy to retrieve stylesheet contents, then parses `srcset` strings with a custom regular expression to collect image candidates. It also leverages `document.styleSheets`, `cssRules`, and a temporary `<style>` element to access rule data, while caching processed elements in a `WeakSet` to avoid duplication. The visualization output is logged to the console, showing the collected stylesheet rules and image URLs from the current page.

NN0taN3rd
64% match
Loading thumbnail…

Gist d7d415d1f3401d7b9d482f01706d1b72

This example demonstrates a WordPress code snippet that delays the loading of embedded iframe content on single post pages. The PHP filter modifies the post’s content by replacing standard `iframe` `src` attributes with a custom `data-iframe-src` attribute, while the accompanying JavaScript—executed after a 1.3-second timeout—uses `querySelectorAll` to reassign the original `src` to each element via `frame.dataset.iframeSrc`. This technique postpones third-party widget rendering (such as video embeds) to prioritize initial page load, without relying on any external JavaScript libraries or APIs.

KKopylovVitalik
63% match
Loading thumbnail…

Gist 4e2713779a93371b2ba61c7cf3c0841b

This example shows a custom stylesheet for the note-taking and knowledge-management app Roam Research, which uses the app’s CSS variables and element selectors to alter the interface’s typography, spacing, and visual hierarchy. It sets the main font to Roboto, then applies the monospaced Fira Code font to headings and page titles, adjusts the weight and letter-spacing of different heading levels, and reduces spacing below the page title. The code also lightens bullets, vertical guides, and sidebar backgrounds, hides the “SHORTCUTS” heading, and truncates breadcrumb text with ellipses, using selectors like `.roam-block-container h1` and `.rm-reference-main button` to target specific components. The styles rely on standard CSS, including pseudo-elements and attribute selectors, and do not use any JavaScript libraries or data APIs.

HHerbCaudill
59% match
Loading thumbnail…

Remove WooCommerce related resources except on WooCommerce-based pages (products, cart, checkout, etc). Use on a testing environment before pasting this into your live website!

This code sample demonstrates how to selectively disable WooCommerce stylesheets and scripts on non-WooCommerce pages using WordPress PHP hooks. It shows a site optimization technique that checks for WooCommerce-specific conditions before dequeuing assets. The implementation uses the `wp_enqueue_scripts` action hook and WooCommerce conditionals like `is_woocommerce()`, `is_cart()`, and `is_checkout()` to determine page context, then removes targeted handles such as `woocommerce-general`, `wc-cart-fragments`, and `jquery-blockui`. The code runs on a testing environment before deployment to production.

CChrisb4
59% match
Loading thumbnail…

Gist bb286172022e9e29f5d0fba33df092f6

This example demonstrates a full-width WordPress page layout template, defining a PHP template for posts, pages, categories, and videos. The code sets a template name and restricts its use to specific post types. It uses standard WordPress template hierarchy and conditional logic, with the PHP file structure serving as the primary mechanism. The visualization here is the resulting web page layout, which relies on WordPress’s built-in template system rather than external charting or data libraries.

KKopylovVitalik
58% match
Loading thumbnail…

HTML+CSS jotdown notes misc

This example shows a GitHub-style file listing row where not-yet-loaded text is indicated by grey skeleton screen placeholders. Skeleton loading blocks replace commit message and timestamp content using CSS `clip-path` insets and a background gradient with a looping `skeleton-loading` animation. The markup is structured with ARIA roles for grid rows and cells, and an inline SVG octicon folder icon renders the directory indicator. The code demonstrates a pure HTML+CSS technique for improving perceived performance without JavaScript.

GGerHobbelt
58% match