Skip to content

Optimize website performance with throttled scroll handlers and async font loading #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
techdiwas merged 2 commits into from
Dec 16, 2025
Merged

Optimize website performance with throttled scroll handlers and async font loading #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5c03902
Initial plan
Copilot Dec 16, 2025
fbb8f5a
Implement website efficiency improvements
Copilot Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Diwas | Portfolio</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
Expand Down Expand Up @@ -74,6 +77,6 @@ <h2>Contact</h2>
<p>&copy; 2025 Diwas. All rights reserved.</p>
</footer>

<script src="script.js"></script>
<script src="script.js" defer></script>
Copy link

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
<script src="script.js" defer></script>
<script src="script.js"></script>

Copilot uses AI. Check for mistakes.
</body>
</html>
29 changes: 24 additions & 5 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,28 @@
// Simple scroll fade-in
window.addEventListener('scroll', () => {
document.querySelectorAll('section').forEach(section => {
// Throttle function for better performance
function throttle(func, delay) {
let lastCall = 0;
return function(...args) {
const now = Date.now();
if (now - lastCall >= delay) {
lastCall = now;
func.apply(this, args);
}
};
}

// Simple scroll fade-in with throttling
const handleScroll = throttle(() => {
const sections = document.querySelectorAll('section');
Comment on lines +13 to +15
Copy link

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
// 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(() => {

Copilot uses AI. Check for mistakes.
const windowHeight = window.innerHeight;

sections.forEach(section => {
const rect = section.getBoundingClientRect();
if(rect.top < window.innerHeight - 50) {
if(rect.top < windowHeight - 50) {
section.classList.add('visible');
}
});
});
}, 100);

window.addEventListener('scroll', handleScroll, { passive: true });
// Trigger on load to handle initial viewport
handleScroll();
12 changes: 10 additions & 2 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,14 @@ nav.scroll-header ul li a:hover {
section {
padding: 100px 20px;
text-align: center;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}

section.visible {
opacity: 1;
transform: translateY(0);
}

#projects .project-list {
Expand Down Expand Up @@ -182,11 +190,11 @@ footer {
padding: 10px;
background-color: #111;
border-bottom: 1px solid #333;
scrollbar-width: none; /* Firefox */
scrollbar-width: none;
}

.scrollable-top::-webkit-scrollbar {
display: none; /* Chrome, Safari */
display: none;
}

.scroll-item {
Expand Down