Teasers load the original images, up to several MB each: the front page weighs 14 MB

Đang mở
  • Có gì không ổn?
#672 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

@guidol-ive đang làm issue này rồi.

Từ ngày 28/10/2026.

  • #673 của @guidol-ive — đang mở

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
35/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
javascript, php
Lĩnh vực
frontend, performance

Hướng nghiên cứu

The teaser image is created in peer_reviewed_article.php; start by reading how it calls HyphaImage::getUrl($w, $h) and how image dimensions are available. Implement the expected proportional scaled image, dimensions, and lazy loading, then verify the teaser output and front-page image loading. Pull request #673 is already open for this issue.

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

Mô tả

Impact: Medium Level: Easy Type: Bug Value: Visitors

Problem

The front page of a site with articles weighs 14 MB. Lighthouse gives performance 70, with a Largest Contentful Paint of 31.6 s on a throttled connection.

  • Every teaser of an article with a featured image (img.featured_image, made in peer_reviewed_article.php) loads the original upload. These are often PNG screenshots or camera photos of 2–3 MB, shown a few hundred pixels wide. On the measured page the three largest were 2.8 MB each, and Lighthouse estimates 9 MB of savings on images alone.
  • The images have no width and height, so the page shifts while they load ("unsized images").
  • They load all at once, also the ones far below the fold.

HyphaImage can only crop to a fixed width and height (getUrl($w, $h)), not scale to a width while keeping the proportions.

Expected

  • A teaser loads a version scaled down to a width that is sharp in the layout, also on a screen with a high pixel density.
  • The image has its width and height.
  • It loads when it comes into view (loading="lazy").
Ngôn ngữ chính
JavaScript
Star
5
Fork
9
Merge trung bình
18 giờ 49 phút
Pull request đã merge (30 ngày)
13

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

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

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 PlanBCode/hypha

Tất cả issue của PlanBCode/hypha

Issue tương tự

Thêm issue về JavaScript

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.