/* Basic responsive layout adjustments */
@media screen and (max-width: 768px) {
/* Make text more readable on mobile */
.text-element {
font-size: 16px !important;
line-height: 1.4 !important;
}
/* Adjust containers for better mobile layout */
.container-element {
width: 100% !important;
padding: 0 15px !important;
margin: 0 auto !important;
}
/* Make images responsive */
.image-element {
max-width: 100% !important;
height: auto !important;
}
/* Stack columns on mobile */
.column-element {
width: 100% !important;
display: block !important;
margin-bottom: 20px !important;
}
/* Adjust buttons for better mobile tapping */
.button-element {
min-width: 44px !important;
min-height: 44px !important;
padding: 12px 24px !important;
}
/* Hide elements on mobile if needed */
.hide-mobile {
display: none !important;
}
}
/* Tablet-specific adjustments */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.column-element {
width: 48% !important;
margin: 1% !important;
}
}
// Performance optimization code for Wix websites
$w.onReady(function () {
// 1. Lazy load images outside viewport
const images = $w('Image');
images.forEach(img => {
if (!isElementInViewport(img)) {
img.src = ''; // Clear source temporarily
observeElement(img);
}
});
// 2. Defer non-critical scripts
const nonCriticalScripts = document.querySelectorAll('script[data-defer]');
nonCriticalScripts.forEach(script => {
script.setAttribute('defer', '');
});
// 3. Cache frequently accessed elements
const frequentElements = {};
['#header', '#footer', '.nav-menu'].forEach(selector => {
frequentElements[selector] = $w(selector);
});
// 4. Optimize event listeners
const debounceTime = 150;
window.addEventListener('scroll', debounce(function() {
// Handle scroll events
checkAndLoadVisibleElements();
}, debounceTime));
// 5. Preload critical resources
const criticalResources = [
'/main-style.css',
'/header-image.jpg',
'/logo.png'
];
preloadResources(criticalResources);
});
// Utility functions
function isElementInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function observeElement(element) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
element.src = element.getAttribute('data-src');
observer.unobserve(element);
}
});
});
observer.observe(element);
}
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
function preloadResources(urls) {
urls.forEach(url => {
const link = document.createElement('link');
link.rel = 'preload';
link.as = url.endsWith('.css') ? 'style' : 'image';
link.href = url;
document.head.appendChild(link);
});
}
function checkAndLoadVisibleElements() {
const lazyElements = document.querySelectorAll('[data-src]');
lazyElements.forEach(element => {
if (isElementInViewport(element)) {
element.src = element.getAttribute('data-src');
}
});
}
top of page
bottom of page
