跳到正文
cccskills

“devtools”的搜索结果

229 个 · 按相关度排序

Measure the total size of a web page and its resources, identify what slows loading, and reduce unnecessary weight. Use a 1500KB limit to guide image optimization, code compression, and removal of unused resources.

中文简介正在准备中。当前显示英语简介。

  • Investigating slow page loads on mobile networks
  • Checking total page size against a size budget
  • Reducing heavy images and JavaScript files
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Review slow page loads and choose resource hints, browser instructions that start loading or connecting earlier. Use measurements to identify bottlenecks, then recommend preload, preconnect, prefetch, or dns-prefetch for important assets and likely next-page resources.

中文简介正在准备中。当前显示英语简介。

  • Reviewing slow loading of prominent images and fonts
  • Preparing connections to external services
  • Prefetching resources for likely next-page visits
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Inspect compressed JavaScript bundles, the files that package application code, to find excessive size and loading costs. Recommend splitting code, removing unused portions, and reviewing dependencies based on measured effects on page responsiveness.

中文简介正在准备中。当前显示英语简介。

  • Finding JavaScript files over 200KB after compression
  • Investigating delays before a page becomes interactive
  • Reducing bundle size through code splitting
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Audit page loading and defer offscreen images, videos, iframes, and heavy components until needed. Use measurements and page context to identify suitable changes while keeping images needed for the initial view loaded with priority.

中文简介正在准备中。当前显示英语简介。

  • Investigate slow initial page loads
  • Defer images below the initial viewport
  • Delay offscreen videos, iframes, and heavy components
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Review JavaScript libraries for outdated versions, known security flaws, and unnecessary size. Use performance measurements to identify costly dependencies, then recommend secure updates or lighter alternatives with specific files and requests to investigate.

中文简介正在准备中。当前显示英语简介。

  • Checking dependencies for known security flaws
  • Investigating libraries behind slow page loads
  • Considering lighter library alternatives
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Review and implement loading feedback for operations such as fetching content or submitting actions. Use skeleton placeholders, spinners, and accessible status updates to communicate progress, while checking for layout shifts and measuring actual performance bottlenecks.

中文简介正在准备中。当前显示英语简介。

  • Adding loading feedback during data fetching
  • Showing progress while an action is running
  • Checking screen reader announcements for loading states
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Audit JavaScript page redirects, confirm their impact on loading time with performance measurements, and identify where server-side 301 or 302 redirects can replace them. Get specific findings and an explanation of loading and search indexing concerns.

中文简介正在准备中。当前显示英语简介。

  • Investigating slow loads caused by page redirects
  • Reviewing redirects that use window.location
  • Planning server-side 301 or 302 redirects
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Audit slow page loads by measuring LCP, the time until the largest visible content appears. Identify bottlenecks in images, server responses, and rendering, then recommend changes supported by measurements.

中文简介正在准备中。当前显示英语简介。

  • Find why a page's main content appears slowly
  • Review hero image loading
  • Prioritize fixes using Lighthouse measurements
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

legacy-js

免费

Audit JavaScript delivered to modern browsers for unnecessary older code and compatibility patches. Confirm performance costs with measurements, then review build targets and browser-specific delivery to reduce avoidable download size and processing work.

中文简介正在准备中。当前显示英语简介。

  • Investigating slow page loads
  • Checking unnecessary JavaScript compatibility code
  • Reviewing build targets for modern browsers
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Check whether images visible when a page first opens are unnecessarily lazy loaded, meaning their loading is deferred. Verify rendering delays with performance measurements, then guide changes to loading attributes and request priority.

中文简介正在准备中。当前显示英语简介。

  • Review loading settings for hero images
  • Investigate image loading delays affecting LCP
  • Adjust loading attributes for images in the initial viewport
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

image-cdn

免费

Review website image delivery and configure an image CDN, a service that optimizes and distributes images. Check file formats, dimensions, loading behavior, and initial screen impact, with guidance on verifying changes in DevTools.

中文简介正在准备中。当前显示英语简介。

  • Checking whether website images use a CDN
  • Configuring automatic image resizing and format conversion
  • Reviewing image loading and initial screen impact
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Find duplicate JavaScript libraries and multiple versions loaded by a website. Confirm their impact with performance measurements, then consolidate dependencies and review third-party scripts to reduce redundant code and potential version conflicts.

中文简介正在准备中。当前显示英语简介。

  • Investigating slow page loads
  • Finding duplicate dependencies
  • Reviewing libraries bundled with third-party scripts
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Audit how quickly a page shows its first text or image. Use performance measurements to identify blocking resources, slow server responses, and rendering delays, then recommend changes tied to the confirmed bottlenecks.

中文简介正在准备中。当前显示英语简介。

  • Investigating slow initial page display
  • Finding CSS and JavaScript that delay rendering
  • Reviewing loading performance with measurements
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

doctype

免费

Inspect raw HTML responses for a correct HTML5 doctype at the start of the document. Identify missing or outdated declarations and preceding content, then guide fixes that enable standards-mode rendering in browsers.

中文简介正在准备中。当前显示英语简介。

  • Checking the doctype in raw HTML responses
  • Replacing old HTML4 or XHTML declarations
  • Removing extra content before the doctype
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Inspect web font loading to identify invisible text, rendering delays, and layout shifts. Use measured evidence to guide fallback text display, preloading of important fonts, and the use of compressed formats such as WOFF2.

中文简介正在准备中。当前显示英语简介。

  • Investigating invisible text during font loading
  • Reviewing font-related layout shifts
  • Adding fallback text display and font preloading
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Check Google Consent Mode v2 implementation and the consent states sent to Google services. Review advertising consent settings and help update GTM or gtag.js so tag behavior reflects users’ consent choices.

中文简介正在准备中。当前显示英语简介。

  • Auditing Consent Mode v2 implementation
  • Updating advertising consent settings
  • Checking consent signals sent to Google
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Audit CSS file sizes and loading behavior to find stylesheets that delay page rendering. Confirm the problem with performance measurements, then reduce unnecessary CSS through minification, unused-style removal, or splitting files by page.

中文简介正在准备中。当前显示英语简介。

  • Investigating slow initial page rendering
  • Finding oversized CSS files
  • Removing unused styles and minifying CSS
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Investigate chains of dependent resource requests that delay a page’s first display. Use performance measurements to identify bottlenecks, then reduce waiting by embedding essential CSS or preloading important assets discovered late in the chain.

中文简介正在准备中。当前显示英语简介。

  • Investigating slow initial page rendering
  • Reviewing dependencies between resource requests
  • Planning critical CSS embedding and asset preloading
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Measure CLS, a score for unexpected movement of page content, and identify what causes it. Review image dimensions, reserved advertising space, fonts, and animations to recommend changes that reduce reading interruptions and accidental clicks.

中文简介正在准备中。当前显示英语简介。

  • Investigating content that moves while a page loads
  • Reserving space for images, embeds, and advertising
  • Reviewing fonts and animations for layout stability
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Check whether HTML, JavaScript, and CSS are delivered with Gzip or Brotli compression. Use measured loading problems and response headers to guide server or CDN changes that reduce the amount of data downloaded.

中文简介正在准备中。当前显示英语简介。

  • Investigating slow page loads on mobile networks
  • Checking compression headers for text resources
  • Reviewing Gzip or Brotli settings on a server or CDN
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Audit browser caching to reduce repeated downloads when people revisit a site. Check cache headers for static files and HTML pages, then suggest suitable storage durations and validation settings based on measured loading problems.

中文简介正在准备中。当前显示英语简介。

  • Investigate slow loading on repeat visits
  • Review cache headers for static files
  • Set separate caching policies for HTML and hashed assets
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Audit large animated GIFs that may slow a web page, confirm their impact with performance measurements, and guide conversion to MP4 or WebM with video markup suited to looping animations.

中文简介正在准备中。当前显示英语简介。

  • Investigating slow pages that contain animated GIFs
  • Replacing large GIFs with MP4 or WebM
  • Reviewing playback attributes for looping videos
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Implement web animations with GSAP plugins, including animated layout changes, draggable elements, text effects, and SVG drawing or shape transitions. The skill explains plugin registration, configuration, cleanup, and development tools for inspecting animation timelines.

中文简介正在准备中。当前显示英语简介。

  • Animating grid or list layout changes
  • Adding draggable cards with momentum
  • Revealing headings one character at a time
calesthio/OpenMontage7万2026年10月17日 更新

Develop and verify changes in a tracked Cherry Studio Electron instance, a running desktop app. Use real UI behavior, logs, and performance measurements to investigate problems, compare fixes, or test a pull request and report the results.

中文简介正在准备中。当前显示英语简介。

  • Implement UI changes and verify them in the app
  • Reproduce bugs and inspect runtime logs
  • Compare performance before and after a fix
CherryHQ/cherry-studio5.3万2026年10月20日 更新