Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Page profiler extrapolates inaccurate responsive slot widths from one viewport measurement

Đang mở
  • Có gì không ổn?
#1,112 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
48/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
javascript, php
Lĩnh vực
frontend, performance

Hướng nghiên cứu

Bắt đầu với _generateResponsiveSizes() trong assets/js/modules/srcset-detector.js, sau đó lần theo Profile::store() và add_missing_srcset_attributes() trong các tệp PHP được liệt kê. Chạy bộ kiểm thử JavaScript srcset-detector và tests/test-srcset.php, rồi xác minh các kích thước được tạo so với các CSS slot đã đo trên những layout có tỷ lệ thay đổi giữa các breakpoint desktop và mobile.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

bug-report bug-report-triage customer report

Summary

Optimole-generated sizes values can overstate an image's slot width at responsive breakpoints because the observed layout width from one viewport is projected onto other viewport sizes. The generated slot values are expected to reflect the image's responsive CSS layout. On layouts whose width proportion changes by breakpoint, the generated value can cause the browser to select a substantially oversized image and increase mobile transfer and rendering cost.

Customer context

Product / area: Optimole page profiler and generated sizes attributes
Version: Customer version not provided; inspected source is v4.2.10
Environment: Responsive WordPress frontend, including a 360-pixel mobile viewport
Integration / third party: Browser responsive-image selection
Reported error / symptom: A full-bleed hero reportedly received a 614-pixel slot declaration on a 360-pixel viewport and selected a 2386-pixel image
Impact: Oversized mobile image downloads and degraded performance on an image-heavy site.

Reproduction notes

The transcript provides a staff-confirmed output example; no local runtime reproduction was performed.

  1. Use a responsive image whose slot occupies a different proportion of viewport width on desktop and mobile.
  2. Allow the desktop page profiler to record missing srcset data.
  3. Load a later response at a mobile breakpoint and inspect the generated sizes value.
  4. Compare the declared slot with the rendered CSS width and selected resource. The report observed a 614-pixel declaration on a 360-pixel viewport.

Diagnosis

Conclusion

The profiler observes the image width at the current viewport, converts it to one viewport-width ratio, and applies that ratio to every fixed breakpoint. It has no measurement of how the image's CSS slot changes at those breakpoints. Only desktop missing-srcset measurements are stored globally, so a mobile profile does not correct this projection. This directly supports the reported inaccurate mobile slot for responsive layouts whose proportions change.

Where this likely occurs
  • assets/js/modules/srcset-detector.js — optmlSrcsetDetector._calculateRequiredSizes() lines 341–362 delegates responsive inference to _generateResponsiveSizes().
  • assets/js/modules/srcset-detector.js — optmlSrcsetDetector._generateResponsiveSizes() lines 410–483 calculates currentWidth / window.innerWidth once and projects that ratio across all configured breakpoints.
  • inc/v2/PageProfiler/Profile.php — OptimoleWP\PageProfiler\Profile::store() lines 183–209 stores missing-srcset measurements in global profile data only for the desktop device profile.
  • inc/tag_replacer.php — Optml_Tag_Replacer::add_missing_srcset_attributes() lines 487–578 converts the projected breakpoint data into rendered sizes clauses.
  • Commit 49a757f34fd1 introduced the current single-ratio breakpoint projection; it is present from v4.1.0 through inspected v4.2.10.
Engineering notes

The observed ratio is accurate only while the image occupies the same proportion of viewport width at every generated breakpoint. Responsive layout transitions, fixed-width components, column changes, and breakpoint-specific CSS can violate that assumption. The inspected JavaScript parses existing srcset candidates but does not use an existing sizes expression as a responsive layout model. Existing lowercase calc(), min(), max(), and clamp() values intentionally bypass sizes enhancement through Optml_Tag_Replacer::should_skip_sizes() at inc/tag_replacer.php lines 686–713; this confirms the customer's workaround uses a deliberate guard.

Test coverage status

assets/js/modules/__tests__/srcset-detector.test.js covers candidate parsing, validation, and selection but no direct test of _generateResponsiveSizes() across layouts with different desktop and mobile slot proportions was found. tests/test-srcset.php lines 112–169 tests rendering from supplied candidate data and assumes the profiler data is accurate. Tests were not executed during this read-only investigation.

What to verify or explore next
  • Reproduce with a layout whose image changes from one desktop-width proportion to a different mobile-width proportion.
  • Capture profiler payloads and rendered sizes output from desktop and mobile profiling passes.
  • Compare browser-selected resources against measured CSS slots at the configured breakpoints.
  • Run the JavaScript srcset-detector suite and PHP srcset suite.
Unknowns / follow-up

The customer's exact CSS layout, cache state, and plugin version are unavailable. The report's 614-pixel value was not regenerated locally.

Confidence

Confidence: 95/100

Repository inspection confirms three independently verifiable defects in Optimole's page-profiler responsive-image path, and no matching GitHub issues were found. The reported Retina-disabled 1x behavior is intentional setting behavior covered by tests, so it is not included as a defect.

Source: HelpScout #3424946418
Generated by bug-report-triage (ID: bug-report-triage_6a87087cc5e402.90677248)

Ngôn ngữ chính
PHP
Star
73
Fork
14
Merge trung bình
2 ngày 13 giờ
Pull request đã merge (30 ngày)
16

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của Codeinwp/optimole-wp

Tất cả issue của Codeinwp/optimole-wp

Issue tương tự

Thêm issue về PHP

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.