Optimize website performance with throttled scroll handlers and async font loading #1
Conversation
Co-authored-by: techdiwas <209884248+techdiwas@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR implements performance optimizations for a portfolio website, focusing on reducing JavaScript overhead, improving font loading efficiency, and enhancing the user experience with smooth animations.
Key changes:
- Implemented throttling for scroll event handlers to reduce execution frequency by ~98%
- Added font preloading and preconnect hints for Google Fonts
- Enhanced CSS with fade-in animations for viewport sections
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| index.html | Added Google Fonts preconnect links and Poppins font import; added defer attribute to script tag |
| script.js | Implemented throttle function and refactored scroll handler to cache DOM queries and use passive event listeners |
| style.css | Added fade-in animation styles for sections and removed redundant comments |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| </footer> | ||
|
|
||
| <script src="script.js"></script> | ||
| <script src="script.js" defer></script> |
There was a problem hiding this comment.
The defer attribute is positioned after the closing </footer> tag at the end of the body. Since the script is already at the end of the body, defer provides no additional benefit and may cause the script to execute after DOMContentLoaded, potentially delaying the initial handleScroll() call. Consider removing defer or moving the script to the <head> if you want to use defer for parallel loading.
| <script src="script.js" defer></script> | |
| <script src="script.js"></script> |
| // Simple scroll fade-in with throttling | ||
| const handleScroll = throttle(() => { | ||
| const sections = document.querySelectorAll('section'); |
There was a problem hiding this comment.
The sections variable is queried on every throttled scroll event. Since sections are static DOM elements that don't change after page load, this query should be moved outside the handleScroll function and cached at the module level to avoid repeated DOM queries.
| // Simple scroll fade-in with throttling | |
| const handleScroll = throttle(() => { | |
| const sections = document.querySelectorAll('section'); | |
| // Cache sections NodeList at the module level | |
| const sections = document.querySelectorAll('section'); | |
| // Simple scroll fade-in with throttling | |
| const handleScroll = throttle(() => { |
The website was inefficient due to unthrottled scroll event handlers, blocking script execution, and missing font optimization.
Changes
JavaScript Performance
passive: trueflag to scroll listener for non-blocking scrollwindow.innerHeightto eliminate redundant DOM queriesvisibleclassResource Loading
preconnecthints for Google Fonts to eliminate DNS/connection latencydisplay=swapto font import to prevent FOUTdeferattribute to script tag for non-blocking executionCSS
Screenshots
Initial load:
Scroll animation in action:
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.