🔥 PRIORIDAD ALTA - Core Web Vitals
Impacto: 95%
1. Optimización de Imágenes
<!-- Lazy Loading con placeholder -->
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjBmMGYwIi8+PC9zdmc+"
data-src="/images/catalog/velasdemiel1.webp"
loading="lazy"
alt="Vela de Miel Artesanal - Palo Santo"
width="300"
height="200">
<!-- Responsive Images -->
<picture>
<source media="(min-width: 768px)" srcset="/images/catalog/velasdemiel1-desktop.webp">
<source media="(min-width: 480px)" srcset="/images/catalog/velasdemiel1-tablet.webp">
<img src="/images/catalog/velasdemiel1-mobile.webp"
alt="Vela de Miel Artesanal"
loading="lazy">
</picture>
2. Critical CSS Inline
<style>
/* Critical CSS for above-the-fold */
.hero {
background: linear-gradient(135deg, #E0A73A 0%, #F4D03F 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.header {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
</style>
<!-- Load non-critical CSS asynchronously -->
<link rel="preload" href="/styles/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
🔥 PRIORIDAD ALTA - Schema Markup
Impacto: 90%
3. Product Schema con Reviews
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Vela de Miel Artesanal - Palo Santo",
"description": "Vela artesanal de cera natural de abeja elaborada con amor y consagrada para rituales de abundancia",
"brand": {
"@type": "Brand",
"name": "Amor Y Miel"
},
"category": "Health & Beauty > Personal Care > Cosmetics",
"sku": "velas-miel-chica",
"image": [
"https://amorymiel.com/images/catalog/velasdemiel1.JPG"
],
"offers": {
"@type": "Offer",
"price": "150",
"priceCurrency": "MXN",
"availability": "https://schema.org/InStock",
"seller": {
"@type": "Organization",
"name": "Amor Y Miel"
}
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "127"
}
}
</script>
4. LocalBusiness Schema
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Amor Y Miel",
"description": "Tienda de productos holísticos artesanales en Cancún",
"url": "https://amorymiel.com",
"telephone": "+52-998-123-4567",
"email": "info@amorymiel.com",
"address": {
"@type": "PostalAddress",
"streetAddress": "Calle Yaxcopoil M2 SM59, Edificio 9, Local 217",
"addressLocality": "Cancún",
"addressRegion": "Quintana Roo",
"postalCode": "77515",
"addressCountry": "MX"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": "21.1619",
"longitude": "-86.8515"
},
"openingHours": "Mo-Fr 09:00-18:00,Sa 09:00-14:00"
}
</script>
⚡ PRIORIDAD MEDIA - Performance
Impacto: 80%
5. Service Worker para Caching
// sw.js
const CACHE_NAME = 'amor-y-miel-v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/js/main.js',
'/images/logo/amorymiellogo.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});
6. Preload Critical Resources
<!-- Preload critical resources -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/images/hero-bg.webp" as="image">
<link rel="preload" href="/js/critical.js" as="script">
<!-- DNS prefetch for external resources -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.googletagmanager.com">
⚡ PRIORIDAD MEDIA - Internal Linking
Impacto: 70%
7. Breadcrumb Navigation
<nav aria-label="Breadcrumb">
<ol class="breadcrumb">
<li><a href="/">Inicio</a></li>
<li><a href="/#productos">Productos</a></li>
<li><a href="/#productos?categoria=Velas">Velas</a></li>
<li aria-current="page">Vela de Miel Artesanal</li>
</ol>
</nav>
8. Related Products
<section class="related-products">
<h3>Productos Relacionados</h3>
<div class="product-grid">
<a href="/#productos?producto=aceite-abrecaminos" class="product-link">
<img src="/images/catalog/aceite-abrecaminos.JPG" alt="Aceite Abre Caminos">
<h4>Aceite Abre Caminos</h4>
</a>
<a href="/#productos?producto=locion-palo-santo" class="product-link">
<img src="/images/catalog/locion-palo-santo.JPG" alt="Loción Palo Santo">
<h4>Loción Palo Santo</h4>
</a>
</div>
</section>
📈 PRIORIDAD BAJA - Advanced Features
Impacto: 60%
9. FAQ Schema
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "¿Hacen envíos a toda la República Mexicana?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Sí, realizamos envíos a toda la República Mexicana a través de paquetería especializada."
}
}
]
}
</script>
10. Open Graph Optimization
<meta property="og:title" content="Vela de Miel Artesanal - Palo Santo | Amor Y Miel">
<meta property="og:description" content="Vela artesanal de cera natural de abeja para rituales de abundancia. Producto 100% natural elaborado con amor en Cancún.">
<meta property="og:image" content="https://amorymiel.com/images/catalog/velasdemiel1.JPG">
<meta property="og:url" content="https://amorymiel.com/#productos?producto=velas-miel-chica">
<meta property="og:type" content="product">