7ba9080f57
Se implementa tema WordPress personalizado para Análisis de Precios Unitarios con funcionalidades avanzadas: - Sistema de templates (front-page, single, archive, page, 404, search) - Integración de Bootstrap 5.3.8 con estructura modular de assets - Panel de opciones del tema con Customizer API - Optimizaciones de rendimiento (Critical CSS, Image Optimization, Performance) - Funcionalidades SEO y compatibilidad con Rank Math - Sistema de posts relacionados y tabla de contenidos - Badge de categorías y manejo de AdSense diferido - Tipografías Google Fonts configurables - Documentación completa del tema y guías de uso 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
988 lines
23 KiB
Markdown
988 lines
23 KiB
Markdown
# Guía de Performance y SEO - Apus Theme
|
|
|
|
**Versión:** 1.0.0
|
|
**Última actualización:** Noviembre 2024
|
|
|
|
Esta guía detalla todas las optimizaciones de rendimiento y SEO implementadas en el tema Apus, y cómo maximizar el performance de tu sitio.
|
|
|
|
---
|
|
|
|
## Tabla de Contenidos
|
|
|
|
1. [Core Web Vitals](#core-web-vitals)
|
|
2. [Optimizaciones del Tema](#optimizaciones-del-tema)
|
|
3. [Configuración de Rank Math](#configuración-de-rank-math)
|
|
4. [Plugins Recomendados](#plugins-recomendados)
|
|
5. [Hosting y Servidor](#hosting-y-servidor)
|
|
6. [Testing y Monitoreo](#testing-y-monitoreo)
|
|
7. [Checklist de Optimización](#checklist-de-optimización)
|
|
8. [Solución de Problemas](#solución-de-problemas)
|
|
|
|
---
|
|
|
|
## Core Web Vitals
|
|
|
|
### ¿Qué son los Core Web Vitals?
|
|
|
|
Los Core Web Vitals son métricas de Google que miden la experiencia del usuario:
|
|
|
|
1. **LCP (Largest Contentful Paint)**: Tiempo que tarda en cargarse el contenido principal
|
|
- **Bueno:** < 2.5 segundos
|
|
- **Necesita mejora:** 2.5 - 4.0 segundos
|
|
- **Pobre:** > 4.0 segundos
|
|
|
|
2. **FID (First Input Delay) / INP (Interaction to Next Paint)**: Tiempo de respuesta a la primera interacción
|
|
- **Bueno:** < 100ms (FID) / < 200ms (INP)
|
|
- **Necesita mejora:** 100-300ms / 200-500ms
|
|
- **Pobre:** > 300ms / > 500ms
|
|
|
|
3. **CLS (Cumulative Layout Shift)**: Estabilidad visual durante la carga
|
|
- **Bueno:** < 0.1
|
|
- **Necesita mejora:** 0.1 - 0.25
|
|
- **Pobre:** > 0.25
|
|
|
|
### Objetivos del Tema Apus
|
|
|
|
El tema Apus está diseñado para lograr:
|
|
|
|
**Desktop:**
|
|
- Performance: 95-100
|
|
- Accessibility: 95-100
|
|
- Best Practices: 95-100
|
|
- SEO: 100
|
|
|
|
**Mobile:**
|
|
- Performance: 80-95 (depende del hosting)
|
|
- Accessibility: 95-100
|
|
- Best Practices: 95-100
|
|
- SEO: 100
|
|
|
|
---
|
|
|
|
## Optimizaciones del Tema
|
|
|
|
### 1. Asset Optimization
|
|
|
|
#### CSS Modular
|
|
|
|
El tema usa CSS modular en lugar de un solo archivo gigante:
|
|
|
|
```
|
|
assets/css/
|
|
├── accessibility.css (12 KB)
|
|
├── animations.css (11 KB)
|
|
├── footer.css (11 KB)
|
|
├── header.css (12 KB)
|
|
├── related-posts.css (10 KB)
|
|
├── responsive.css (6 KB)
|
|
├── theme.css (13 KB)
|
|
├── toc.css (7 KB)
|
|
└── utilities.css (8 KB)
|
|
```
|
|
|
|
**Ventajas:**
|
|
- Solo se carga lo necesario
|
|
- Fácil de mantener
|
|
- Cacheable individualmente
|
|
|
|
#### JavaScript Mínimo
|
|
|
|
**Total JS del tema:** ~100 KB (incluyendo Bootstrap)
|
|
|
|
- `bootstrap.bundle.min.js` (79 KB) - Necesario para componentes
|
|
- `header.js` (9 KB) - Navegación y sticky header
|
|
- `toc.js` (6 KB) - Table of contents
|
|
- `adsense-loader.js` (2 KB) - AdSense delay
|
|
|
|
**Sin jQuery:** Todo en vanilla JavaScript.
|
|
|
|
#### Bootstrap Local
|
|
|
|
Bootstrap se sirve localmente, no desde CDN:
|
|
|
|
**Ventajas:**
|
|
- 0 requests externos
|
|
- No depende de CDN de terceros
|
|
- Mayor control de versión
|
|
- Privacy-friendly
|
|
|
|
### 2. Image Optimization
|
|
|
|
#### Lazy Loading Nativo
|
|
|
|
```php
|
|
// Implementado en inc/image-optimization.php
|
|
add_filter('wp_img_tag_add_loading_attr', function($value, $image, $context) {
|
|
if ($context === 'the_content') {
|
|
return 'lazy';
|
|
}
|
|
return $value;
|
|
}, 10, 3);
|
|
```
|
|
|
|
**Beneficios:**
|
|
- Imágenes fuera del viewport no se cargan
|
|
- Mejora LCP
|
|
- Reduce uso de ancho de banda
|
|
|
|
#### Responsive Images (srcset)
|
|
|
|
```php
|
|
// Automático en WordPress
|
|
add_image_size('apus-thumbnail', 400, 300, true);
|
|
add_image_size('apus-medium', 800, 600, true);
|
|
add_image_size('apus-large', 1200, 900, true);
|
|
```
|
|
|
|
WordPress genera automáticamente:
|
|
```html
|
|
<img src="image-800.jpg"
|
|
srcset="image-400.jpg 400w,
|
|
image-800.jpg 800w,
|
|
image-1200.jpg 1200w"
|
|
sizes="(max-width: 768px) 100vw, 800px" />
|
|
```
|
|
|
|
#### Preload de Imágenes Críticas
|
|
|
|
Featured images en single posts se precargan:
|
|
|
|
```php
|
|
// En inc/image-optimization.php
|
|
function apus_preload_featured_image() {
|
|
if (is_singular() && has_post_thumbnail()) {
|
|
$image_url = get_the_post_thumbnail_url(get_the_ID(), 'apus-featured-large');
|
|
echo '<link rel="preload" as="image" href="' . esc_url($image_url) . '">';
|
|
}
|
|
}
|
|
add_action('wp_head', 'apus_preload_featured_image', 5);
|
|
```
|
|
|
|
**Beneficio:** Mejora LCP dramáticamente.
|
|
|
|
### 3. Resource Hints
|
|
|
|
```php
|
|
// En inc/performance.php
|
|
function apus_add_resource_hints($hints, $relation_type) {
|
|
if ('dns-prefetch' === $relation_type) {
|
|
// Pre-resolve DNS para recursos externos
|
|
$hints[] = '//fonts.googleapis.com'; // Si usas Google Fonts
|
|
}
|
|
|
|
if ('preconnect' === $relation_type) {
|
|
// Establecer conexión temprana
|
|
$hints[] = ['href' => 'https://fonts.gstatic.com', 'crossorigin'];
|
|
}
|
|
|
|
return $hints;
|
|
}
|
|
add_filter('wp_resource_hints', 'apus_add_resource_hints', 10, 2);
|
|
```
|
|
|
|
**Resource hints implementados:**
|
|
- `dns-prefetch`: Pre-resolve DNS
|
|
- `preconnect`: Establecer conexión temprana
|
|
- `preload`: Cargar recursos críticos
|
|
|
|
### 4. WordPress Bloat Removal
|
|
|
|
El tema elimina características innecesarias de WordPress:
|
|
|
|
```php
|
|
// En inc/performance.php
|
|
|
|
// Remove emoji scripts
|
|
remove_action('wp_head', 'print_emoji_detection_script', 7);
|
|
remove_action('wp_print_styles', 'print_emoji_styles');
|
|
|
|
// Remove oEmbed
|
|
remove_action('wp_head', 'wp_oembed_add_discovery_links');
|
|
remove_action('wp_head', 'wp_oembed_add_host_js');
|
|
|
|
// Remove feeds
|
|
remove_action('wp_head', 'feed_links', 2);
|
|
remove_action('wp_head', 'feed_links_extra', 3);
|
|
|
|
// Remove RSD & WLW
|
|
remove_action('wp_head', 'rsd_link');
|
|
remove_action('wp_head', 'wlwmanifest_link');
|
|
|
|
// Remove generator tag
|
|
remove_action('wp_head', 'wp_generator');
|
|
|
|
// Disable Dashicons for non-logged users
|
|
function apus_dequeue_dashicons() {
|
|
if (!is_user_logged_in()) {
|
|
wp_dequeue_style('dashicons');
|
|
wp_deregister_style('dashicons');
|
|
}
|
|
}
|
|
add_action('wp_enqueue_scripts', 'apus_dequeue_dashicons');
|
|
```
|
|
|
|
**Ahorro:** ~50-70 KB y 3-5 requests menos.
|
|
|
|
### 5. AdSense Delay Loading
|
|
|
|
```javascript
|
|
// En assets/js/adsense-loader.js
|
|
let adsenseLoaded = false;
|
|
const events = ['scroll', 'mousemove', 'touchstart', 'click'];
|
|
|
|
function loadAdSense() {
|
|
if (adsenseLoaded) return;
|
|
adsenseLoaded = true;
|
|
|
|
// Cargar script de AdSense
|
|
const script = document.createElement('script');
|
|
script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
|
|
script.async = true;
|
|
document.head.appendChild(script);
|
|
|
|
// Remover event listeners
|
|
events.forEach(event => {
|
|
window.removeEventListener(event, loadAdSense);
|
|
});
|
|
}
|
|
|
|
// Agregar event listeners
|
|
events.forEach(event => {
|
|
window.addEventListener(event, loadAdSense, { once: true, passive: true });
|
|
});
|
|
|
|
// Fallback: cargar después de 5 segundos
|
|
setTimeout(loadAdSense, 5000);
|
|
```
|
|
|
|
**Beneficio:** Mejora LCP en 1-2 segundos, TBT en 100-300ms.
|
|
|
|
### 6. System Fonts
|
|
|
|
Por defecto, el tema usa fuentes del sistema:
|
|
|
|
```css
|
|
:root {
|
|
--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-serif: Georgia, "Times New Roman", Times, serif;
|
|
--font-mono: "SFMono-Regular", Consolas, "Liberation Mono",
|
|
Menlo, monospace;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-system);
|
|
}
|
|
```
|
|
|
|
**Ventajas:**
|
|
- 0 requests de red
|
|
- 0 latencia
|
|
- Carga instantánea
|
|
- Privacy-friendly
|
|
|
|
**vs Google Fonts:**
|
|
- Google Fonts: +100-200ms de latencia
|
|
- System Fonts: 0ms
|
|
|
|
---
|
|
|
|
## Configuración de Rank Math
|
|
|
|
### Instalación y Setup Inicial
|
|
|
|
1. **Instalar Rank Math:**
|
|
```
|
|
Plugins > Añadir nuevo > Buscar "Rank Math"
|
|
```
|
|
|
|
2. **Asistente de Configuración:**
|
|
- Modo: **Easy** (principiantes) o **Advanced** (expertos)
|
|
- Conectar con Google Search Console (muy recomendado)
|
|
- Activar módulos recomendados
|
|
|
|
### Módulos Recomendados
|
|
|
|
**Activar:**
|
|
- ✓ SEO Analysis
|
|
- ✓ Sitemap
|
|
- ✓ Schema Markup
|
|
- ✓ Local SEO (si es negocio local)
|
|
- ✓ 404 Monitor (monitorear errores)
|
|
- ✓ Redirections (gestionar redirecciones)
|
|
|
|
**Desactivar:**
|
|
- ✗ Analytics (si usas Google Analytics directo)
|
|
- ✗ WooCommerce (si no usas eCommerce)
|
|
|
|
### Configuración General
|
|
|
|
#### 1. Títulos y Meta
|
|
|
|
**Configuración:**
|
|
```
|
|
Rank Math > Títulos y Meta
|
|
```
|
|
|
|
**Posts:**
|
|
- Formato de título: `%title% %sep% %sitename%`
|
|
- Meta description: Usar plantilla o escribir manual
|
|
- Mostrar en resultados: ✓
|
|
|
|
**Páginas:**
|
|
- Formato: `%title% %sep% %sitename%`
|
|
- Meta description: Manual para cada página importante
|
|
|
|
**Separador:** `|` o `-` (el que prefieras)
|
|
|
|
#### 2. Sitemap
|
|
|
|
**Configuración:**
|
|
```
|
|
Rank Math > Sitemap Settings
|
|
```
|
|
|
|
**Incluir en sitemap:**
|
|
- ✓ Posts
|
|
- ✓ Pages
|
|
- ✓ Categories
|
|
- ✗ Tags (opcional, puede causar thin content)
|
|
- ✗ Authors (a menos que sea blog multi-autor)
|
|
|
|
**Frecuencia de actualización:**
|
|
- Posts: Daily
|
|
- Pages: Weekly
|
|
- Categories: Weekly
|
|
|
|
**Enviar sitemap a:**
|
|
- Google Search Console: `https://tudominio.com/sitemap_index.xml`
|
|
- Bing Webmaster Tools: mismo URL
|
|
|
|
#### 3. Schema Markup
|
|
|
|
**Configuración:**
|
|
```
|
|
Rank Math > Schema Markup
|
|
```
|
|
|
|
**Schema por defecto:**
|
|
- Organization: Para sitios corporativos
|
|
- Logo
|
|
- Social profiles
|
|
- Contact info
|
|
|
|
- Website Schema
|
|
- Site name
|
|
- URL
|
|
|
|
**Schema para Posts (Article):**
|
|
- Rank Math lo genera automáticamente
|
|
- Incluye: headline, image, author, datePublished, dateModified
|
|
|
|
**Verificar schema:**
|
|
1. Ve a https://search.google.com/test/rich-results
|
|
2. Ingresa URL de un post
|
|
3. Verifica que Article schema esté correcto
|
|
|
|
#### 4. Search Console
|
|
|
|
**Conectar Search Console:**
|
|
```
|
|
Rank Math > General Settings > Search Console
|
|
```
|
|
|
|
1. Haz clic en "Connect to Google Search Console"
|
|
2. Autoriza tu cuenta de Google
|
|
3. Selecciona tu propiedad
|
|
|
|
**Beneficios:**
|
|
- Ver errores de indexación en el dashboard
|
|
- Monitorear keywords que traen tráfico
|
|
- Recibir alertas de problemas
|
|
|
|
### Optimización de Posts
|
|
|
|
#### Meta Box de Rank Math
|
|
|
|
Al editar un post, verás el meta box de Rank Math en la parte inferior:
|
|
|
|
**1. Focus Keyword:**
|
|
- Agrega tu keyword principal
|
|
- Rank Math analizará el post
|
|
|
|
**2. SEO Analysis:**
|
|
Apunta a 80/100 o más:
|
|
- ✓ Keyword en título
|
|
- ✓ Keyword en URL
|
|
- ✓ Keyword en primer párrafo
|
|
- ✓ Keyword en H2/H3
|
|
- ✓ Links internos
|
|
- ✓ Links externos
|
|
- ✓ Alt text en imágenes
|
|
|
|
**3. Content AI (Premium):**
|
|
- Analiza competencia
|
|
- Sugiere keywords relacionadas
|
|
- Recomienda longitud de contenido
|
|
|
|
#### Schema por Post
|
|
|
|
Puedes personalizar schema por post:
|
|
|
|
- **Tipo de artículo:** Article, BlogPosting, NewsArticle
|
|
- **Author:** Autor del post
|
|
- **Publisher:** Tu organización
|
|
- **Image:** Featured image (automático)
|
|
|
|
### Local SEO (Si aplica)
|
|
|
|
**Para negocios locales:**
|
|
|
|
```
|
|
Rank Math > Local SEO > Business Info
|
|
```
|
|
|
|
Configura:
|
|
- Tipo de negocio
|
|
- Dirección completa
|
|
- Teléfono
|
|
- Horarios de atención
|
|
- Área de servicio
|
|
|
|
**Beneficio:** Aparece en búsquedas locales de Google Maps.
|
|
|
|
---
|
|
|
|
## Plugins Recomendados
|
|
|
|
### Cache (Esencial)
|
|
|
|
#### WP Rocket (Premium, Recomendado)
|
|
|
|
**Precio:** ~$59/año
|
|
**Website:** https://wp-rocket.me/
|
|
|
|
**Por qué WP Rocket:**
|
|
- Configuración automática (funciona out-of-the-box)
|
|
- Cache de página
|
|
- Cache de objetos
|
|
- Minificación CSS/JS
|
|
- Lazy loading (desactivar, usa el del tema)
|
|
- Database optimization
|
|
- CDN integration
|
|
- Preload de cache
|
|
|
|
**Configuración recomendada:**
|
|
1. Instalar y activar
|
|
2. Settings > WP Rocket
|
|
3. **Cache tab:**
|
|
- Mobile cache: ✓
|
|
- User cache: ✓ (si tienes usuarios logged)
|
|
4. **File Optimization:**
|
|
- Minify CSS: ✓
|
|
- Minify JS: ✓
|
|
- Defer JS: ✓
|
|
- Remove jQuery Migrate: ✓
|
|
5. **Media:**
|
|
- Lazy Load: ✗ (el tema ya lo hace)
|
|
- WebP: ✓ (si tu servidor soporta)
|
|
6. **Preload:**
|
|
- Activate preload: ✓
|
|
- Prefetch DNS: Agregar Google Fonts si los usas
|
|
7. **Database:**
|
|
- Post Cleanup: ✓
|
|
- Comments Cleanup: ✓
|
|
- Transients Cleanup: ✓
|
|
- Schedule Automatic Cleanup: Weekly
|
|
|
|
#### Autoptimize (Gratuito, Alternativa)
|
|
|
|
**Website:** https://autoptimize.com/
|
|
|
|
**Configuración:**
|
|
1. Instalar y activar
|
|
2. Settings > Autoptimize
|
|
3. **JS Options:**
|
|
- Optimize JS: ✓
|
|
- Aggregate JS: ✓
|
|
- Force JS in head: ✗
|
|
4. **CSS Options:**
|
|
- Optimize CSS: ✓
|
|
- Aggregate CSS: ✓
|
|
- Inline CSS: ✓
|
|
5. **HTML Options:**
|
|
- Optimize HTML: ✓
|
|
6. **Extra:**
|
|
- Remove Google Fonts: ✗ (a menos que uses system fonts)
|
|
|
|
### Image Optimization
|
|
|
|
#### Smush (Recomendado)
|
|
|
|
**Versión gratuita:** Funciona bien
|
|
**Pro:** $6/mes (bulk optimization, WebP, CDN)
|
|
|
|
**Configuración:**
|
|
1. Instalar y activar
|
|
2. Settings
|
|
3. **Automatic:**
|
|
- Automatically compress images: ✓
|
|
- Maximum size: 1920px (evita imágenes gigantes)
|
|
4. **Lazy Load:**
|
|
- Enable lazy load: ✗ (el tema ya lo hace)
|
|
5. **Bulk Smush:**
|
|
- Re-smush todas las imágenes existentes
|
|
|
|
#### ShortPixel (Alternativa)
|
|
|
|
**Gratis:** 100 imágenes/mes
|
|
**Paid:** Desde $4.99 por 7,000 imágenes
|
|
|
|
**Ventaja:** Conversión automática a WebP
|
|
|
|
### Security
|
|
|
|
#### Wordfence Security
|
|
|
|
**Website:** https://www.wordfence.com/
|
|
**Gratis:** Versión básica (más que suficiente)
|
|
|
|
**Qué hace:**
|
|
- Firewall
|
|
- Malware scanner
|
|
- Login security
|
|
- 2FA
|
|
- Block IP addresses
|
|
|
|
**Configuración básica:**
|
|
- Instala y activa
|
|
- Usa configuración por defecto
|
|
- Activa 2FA para tu cuenta
|
|
|
|
---
|
|
|
|
## Hosting y Servidor
|
|
|
|
### Requisitos del Servidor
|
|
|
|
**Mínimos:**
|
|
- PHP 8.0+
|
|
- MySQL 5.7+ / MariaDB 10.2+
|
|
- 128 MB PHP memory
|
|
- mod_rewrite enabled
|
|
|
|
**Recomendados:**
|
|
- PHP 8.1+
|
|
- MySQL 8.0+ / MariaDB 10.5+
|
|
- 256 MB+ PHP memory
|
|
- OPcache enabled
|
|
- Gzip/Brotli compression
|
|
- HTTP/2 or HTTP/3
|
|
- SSL certificate
|
|
|
|
### Hosting Recomendados
|
|
|
|
**Para México/Latinoamérica:**
|
|
|
|
1. **SiteGround** (⭐⭐⭐⭐⭐)
|
|
- Precio: Desde $3.99/mes
|
|
- Servidores en US/EU
|
|
- WordPress optimizado
|
|
- Support 24/7 en español
|
|
|
|
2. **Cloudways** (⭐⭐⭐⭐⭐)
|
|
- Precio: Desde $11/mes
|
|
- Cloud hosting (DigitalOcean, AWS, etc.)
|
|
- Rendimiento excelente
|
|
- Escalable
|
|
|
|
3. **Hostinger** (⭐⭐⭐⭐)
|
|
- Precio: Desde $2.99/mes
|
|
- Buen rendimiento/precio
|
|
- Servidores en Latinoamérica
|
|
|
|
**No recomendados:**
|
|
- ❌ GoDaddy (lento, caro, soporte malo)
|
|
- ❌ Hostgator (overselling, performance inconsistente)
|
|
- ❌ Bluehost (lento después del primer año)
|
|
|
|
### Optimizaciones del Servidor
|
|
|
|
#### PHP.ini
|
|
|
|
Si tienes acceso a `php.ini`:
|
|
|
|
```ini
|
|
; Memory
|
|
memory_limit = 256M
|
|
upload_max_filesize = 64M
|
|
post_max_size = 64M
|
|
|
|
; Execution
|
|
max_execution_time = 300
|
|
max_input_time = 300
|
|
|
|
; OPcache
|
|
opcache.enable=1
|
|
opcache.memory_consumption=128
|
|
opcache.max_accelerated_files=10000
|
|
opcache.revalidate_freq=2
|
|
|
|
; Sessions
|
|
session.gc_maxlifetime = 3600
|
|
```
|
|
|
|
#### .htaccess
|
|
|
|
El tema incluye optimizaciones en `.htaccess`:
|
|
|
|
```apache
|
|
# Compression
|
|
<IfModule mod_deflate.c>
|
|
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
|
|
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
|
|
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml application/rss+xml
|
|
AddOutputFilterByType DEFLATE image/svg+xml
|
|
</IfModule>
|
|
|
|
# Browser Caching
|
|
<IfModule mod_expires.c>
|
|
ExpiresActive On
|
|
ExpiresByType image/jpg "access plus 1 year"
|
|
ExpiresByType image/jpeg "access plus 1 year"
|
|
ExpiresByType image/gif "access plus 1 year"
|
|
ExpiresByType image/png "access plus 1 year"
|
|
ExpiresByType image/svg+xml "access plus 1 year"
|
|
ExpiresByType text/css "access plus 1 month"
|
|
ExpiresByType application/javascript "access plus 1 month"
|
|
ExpiresByType application/pdf "access plus 1 month"
|
|
ExpiresByType image/x-icon "access plus 1 year"
|
|
</IfModule>
|
|
```
|
|
|
|
#### MySQL Optimization
|
|
|
|
**wp-config.php:**
|
|
```php
|
|
// Database optimization
|
|
define('WP_ALLOW_REPAIR', false); // true solo cuando necesites reparar
|
|
define('EMPTY_TRASH_DAYS', 7); // Vaciar papelera cada 7 días
|
|
define('WP_POST_REVISIONS', 5); // Limitar revisiones
|
|
define('AUTOSAVE_INTERVAL', 300); // Auto-save cada 5 minutos
|
|
```
|
|
|
|
---
|
|
|
|
## Testing y Monitoreo
|
|
|
|
### Herramientas de Testing
|
|
|
|
#### 1. PageSpeed Insights
|
|
|
|
**URL:** https://pagespeed.web.dev/
|
|
|
|
**Qué hace:**
|
|
- Análisis de Core Web Vitals
|
|
- Datos de campo (CrUX) reales de usuarios
|
|
- Datos de laboratorio (Lighthouse)
|
|
- Sugerencias específicas
|
|
|
|
**Cómo interpretar:**
|
|
- **Verde (90-100):** Excelente
|
|
- **Amarillo (50-89):** Necesita mejora
|
|
- **Rojo (0-49):** Pobre
|
|
|
|
**Métricas importantes:**
|
|
- Performance Score
|
|
- FCP (First Contentful Paint)
|
|
- LCP (Largest Contentful Paint)
|
|
- TBT (Total Blocking Time)
|
|
- CLS (Cumulative Layout Shift)
|
|
|
|
#### 2. GTmetrix
|
|
|
|
**URL:** https://gtmetrix.com/
|
|
|
|
**Qué hace:**
|
|
- Análisis completo de performance
|
|
- Waterfall chart (cómo se cargan los recursos)
|
|
- Video de carga
|
|
- Comparación histórica
|
|
|
|
**Configuración:**
|
|
- Location: Dallas, US (más cercano a México)
|
|
- Browser: Chrome (Desktop) y Chrome (Mobile)
|
|
|
|
**Métricas:**
|
|
- GTmetrix Grade (A-F)
|
|
- Performance
|
|
- Structure
|
|
- Fully Loaded Time
|
|
- Total Page Size
|
|
- Requests
|
|
|
|
#### 3. Lighthouse (Chrome DevTools)
|
|
|
|
**Cómo usar:**
|
|
1. Abre Chrome
|
|
2. Presiona F12 (DevTools)
|
|
3. Tab "Lighthouse"
|
|
4. Selecciona:
|
|
- Mode: Navigation
|
|
- Device: Desktop o Mobile
|
|
- Categories: Todas ✓
|
|
5. "Analyze page load"
|
|
|
|
**Ventajas:**
|
|
- Local, testing inmediato
|
|
- Debugging detallado
|
|
- Oportunidades específicas
|
|
|
|
#### 4. WebPageTest
|
|
|
|
**URL:** https://www.webpagetest.org/
|
|
|
|
**Qué hace:**
|
|
- Testing muy detallado
|
|
- Múltiples locaciones
|
|
- Multiple runs
|
|
- Video comparison
|
|
|
|
**Configuración avanzada:**
|
|
- Location: México o US-West
|
|
- Browser: Chrome
|
|
- Connection: 4G/LTE
|
|
- Number of Tests: 3 (promedio)
|
|
|
|
### Monitoreo Continuo
|
|
|
|
#### Google Search Console
|
|
|
|
**URL:** https://search.google.com/search-console/
|
|
|
|
**Qué monitorear:**
|
|
1. **Core Web Vitals Report:**
|
|
- URLs con problemas
|
|
- Tendencias
|
|
- Mobile vs Desktop
|
|
|
|
2. **Coverage Report:**
|
|
- Páginas indexadas
|
|
- Errores de indexación
|
|
- Páginas excluidas
|
|
|
|
3. **Enhancement Reports:**
|
|
- Mobile usability
|
|
- Breadcrumbs
|
|
- Sitelinks searchbox
|
|
|
|
#### Google Analytics 4
|
|
|
|
**Configurar eventos personalizados para Core Web Vitals:**
|
|
|
|
```javascript
|
|
// En Theme Options > Advanced > Custom JavaScript
|
|
window.addEventListener('load', function() {
|
|
// LCP
|
|
new PerformanceObserver((list) => {
|
|
const entries = list.getEntries();
|
|
const lastEntry = entries[entries.length - 1];
|
|
gtag('event', 'LCP', {
|
|
event_category: 'Web Vitals',
|
|
value: Math.round(lastEntry.startTime),
|
|
event_label: 'LCP'
|
|
});
|
|
}).observe({entryTypes: ['largest-contentful-paint']});
|
|
|
|
// CLS
|
|
new PerformanceObserver((list) => {
|
|
let cls = 0;
|
|
for (const entry of list.getEntries()) {
|
|
if (!entry.hadRecentInput) {
|
|
cls += entry.value;
|
|
}
|
|
}
|
|
gtag('event', 'CLS', {
|
|
event_category: 'Web Vitals',
|
|
value: Math.round(cls * 1000),
|
|
event_label: 'CLS'
|
|
});
|
|
}).observe({entryTypes: ['layout-shift']});
|
|
});
|
|
```
|
|
|
|
---
|
|
|
|
## Checklist de Optimización
|
|
|
|
### Setup Inicial (Una vez)
|
|
|
|
- [ ] Permalinks configurados (/%postname%/)
|
|
- [ ] Theme Options configurado correctamente
|
|
- [ ] System fonts activado (o fuentes optimizadas)
|
|
- [ ] Lazy loading activado
|
|
- [ ] Resource hints activados
|
|
- [ ] AdSense delay activado (si usas AdSense)
|
|
|
|
### SEO Setup (Una vez)
|
|
|
|
- [ ] Rank Math instalado y configurado
|
|
- [ ] Google Search Console conectado
|
|
- [ ] Sitemap enviado a Google
|
|
- [ ] Schema.org configurado
|
|
- [ ] Títulos y meta optimizados
|
|
- [ ] Google Analytics instalado
|
|
|
|
### Performance Setup (Una vez)
|
|
|
|
- [ ] Plugin de cache instalado (WP Rocket/Autoptimize)
|
|
- [ ] Plugin de optimización de imágenes (Smush/ShortPixel)
|
|
- [ ] WebP habilitado
|
|
- [ ] Database optimization
|
|
- [ ] .htaccess con compression y caching
|
|
- [ ] OPcache habilitado en servidor
|
|
|
|
### Mantenimiento Regular
|
|
|
|
#### Semanal
|
|
- [ ] Revisar PageSpeed Insights
|
|
- [ ] Revisar Google Search Console (errores)
|
|
- [ ] Backup completo del sitio
|
|
|
|
#### Mensual
|
|
- [ ] Database cleanup (revisar revisiones, borradores)
|
|
- [ ] Actualizar WordPress, plugins, tema
|
|
- [ ] Revisar broken links
|
|
- [ ] Regenerar minificación de cache
|
|
- [ ] Revisar Core Web Vitals trends
|
|
|
|
#### Trimestral
|
|
- [ ] Auditoría SEO completa
|
|
- [ ] Revisar content por actualizar
|
|
- [ ] Optimizar imágenes antiguas
|
|
- [ ] Revisar plugins instalados (borrar los no usados)
|
|
|
|
### Por Cada Post Nuevo
|
|
|
|
- [ ] Featured image optimizada (< 200 KB)
|
|
- [ ] Alt text en todas las imágenes
|
|
- [ ] Focus keyword en Rank Math
|
|
- [ ] Score de Rank Math > 80/100
|
|
- [ ] Links internos a otros posts (2-3 mínimo)
|
|
- [ ] Links externos (1-2 a fuentes confiables)
|
|
- [ ] Meta description escrita manualmente
|
|
- [ ] URL slug optimizada (corta, con keyword)
|
|
- [ ] Categoría asignada
|
|
- [ ] H2/H3 bien estructurados para TOC
|
|
|
|
---
|
|
|
|
## Solución de Problemas
|
|
|
|
### Performance Score Bajo
|
|
|
|
**Problema:** PageSpeed score < 80 en mobile
|
|
|
|
**Causas comunes:**
|
|
1. **Hosting lento:**
|
|
- Solución: Cambiar a hosting mejor (SiteGround, Cloudways)
|
|
|
|
2. **Imágenes no optimizadas:**
|
|
- Solución: Instalar Smush, optimizar todas las imágenes
|
|
|
|
3. **Sin cache:**
|
|
- Solución: Instalar WP Rocket
|
|
|
|
4. **Demasiados plugins:**
|
|
- Solución: Desactivar plugins no esenciales
|
|
|
|
5. **Fuentes externas:**
|
|
- Solución: Cambiar a system fonts en Theme Options
|
|
|
|
### LCP Pobre
|
|
|
|
**Problema:** LCP > 2.5 segundos
|
|
|
|
**Soluciones:**
|
|
1. Verifica que featured image tenga preload (el tema lo hace automáticamente)
|
|
2. Activa AdSense delay (Theme Options > Performance)
|
|
3. Usa CDN para imágenes
|
|
4. Optimiza featured image (< 200 KB)
|
|
5. Usa WebP
|
|
|
|
### CLS Alto
|
|
|
|
**Problema:** CLS > 0.1
|
|
|
|
**Causas comunes:**
|
|
1. **Imágenes sin dimensiones:**
|
|
- Asegúrate de que imágenes tengan width/height
|
|
|
|
2. **Fuentes web cargando:**
|
|
- Usa `font-display: swap` (el tema ya lo hace)
|
|
- O usa system fonts
|
|
|
|
3. **Anuncios sin espacio reservado:**
|
|
- Define contenedores con altura para AdSense
|
|
|
|
4. **Contenido dinámico:**
|
|
- Reserva espacio para content que carga async
|
|
|
|
### Sitemap No Se Ve en Google
|
|
|
|
**Problema:** Sitemap no aparece en Search Console
|
|
|
|
**Solución:**
|
|
1. Verifica que Rank Math esté activado
|
|
2. Ve a `Rank Math > Sitemap Settings`
|
|
3. Verifica que sitemap esté activado
|
|
4. Accede a `https://tudominio.com/sitemap_index.xml` en navegador
|
|
5. Si no carga, regenera permalinks (Ajustes > Enlaces permanentes > Guardar)
|
|
6. Envía manualmente en Search Console
|
|
|
|
### Posts No Se Indexan
|
|
|
|
**Problema:** Google no indexa nuevos posts
|
|
|
|
**Diagnóstico:**
|
|
1. Ve a Google Search Console > Coverage
|
|
2. Revisa "Excluded" y "Error" tabs
|
|
3. Identifica la razón
|
|
|
|
**Soluciones comunes:**
|
|
- **Robots.txt bloqueando:** Verifica `tudominio.com/robots.txt`
|
|
- **Noindex activado:** Revisa Rank Math meta box del post
|
|
- **Content duplicado:** Escribe contenido único
|
|
- **Sitemap no actualizado:** Rank Math lo hace automáticamente, pero verifica
|
|
|
|
---
|
|
|
|
## Recursos Adicionales
|
|
|
|
### Documentación Oficial
|
|
|
|
- **WordPress Performance:** https://developer.wordpress.org/advanced-administration/performance/optimization/
|
|
- **Google Core Web Vitals:** https://web.dev/vitals/
|
|
- **Rank Math KB:** https://rankmath.com/kb/
|
|
- **Bootstrap Performance:** https://getbootstrap.com/docs/5.3/customize/optimize/
|
|
|
|
### Herramientas Online
|
|
|
|
- **PageSpeed Insights:** https://pagespeed.web.dev/
|
|
- **GTmetrix:** https://gtmetrix.com/
|
|
- **WebPageTest:** https://www.webpagetest.org/
|
|
- **Schema Validator:** https://validator.schema.org/
|
|
- **Rich Results Test:** https://search.google.com/test/rich-results
|
|
|
|
### Comunidad y Soporte
|
|
|
|
- **WordPress Support:** https://wordpress.org/support/
|
|
- **Rank Math Support:** https://rankmath.com/support/
|
|
- **WP Rocket Support:** https://docs.wp-rocket.me/
|
|
|
|
---
|
|
|
|
**¡Tu sitio está listo para volar!** 🚀
|
|
|
|
Con el tema Apus correctamente configurado y siguiendo esta guía, deberías lograr scores de performance excelentes y un SEO sólido.
|