Agregar estructura completa del tema APUS con Bootstrap 5 y optimizaciones de rendimiento
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>
This commit is contained in:
FrankZamora
987
wp-content/themes/apus-theme/docs/03-performance-seo.md
Normal file
987
wp-content/themes/apus-theme/docs/03-performance-seo.md
Normal file
@@ -0,0 +1,987 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user