alshedivat/al-folio

Improve Mobile Performance

Open

#1,329 opened on Apr 12, 2023

View on GitHub
 (24 comments) (0 reactions) (0 assignees)HTML (15,603 stars) (12,991 forks)batch import
enhancementhelp wanted

Description

Is your feature request related to a problem? Please describe. It would be nice if the performance score from Pagespeed Insights was higher for mobile devices. Even though the desktop performance score is 93, the mobile performance score is only 54.

Describe the solution you'd like Looking at the Pagespeed advice, it seems the stylesheets are blocking render time on mobile. There may be a way to reduce the performance drop this has on mobile.

Describe alternatives you've considered Alternative academic websites like the Hugo templates have better performance scores on mobile.

Contributor guide

Tech stack
htmlcss
Domain
frontendperformance
Issue type
performance
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Basic knowledge of CSSUnderstanding of render blocking resourcesFamiliarity with Jekyll themes
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Examine the Pagespeed Insights report for mobile to identify specific render blocking stylesheets. Look into the theme's CSS loading order (likely in assets/css/main.scss or layout files). Consider techniques like inlining critical CSS, async loading, or using media queries to reduce blocking. Review discussions in the issue for proposed solutions.