Construyendo un sitio web realmente rápido desde cero

Me encanta construir herramientas para ayudar a resolver problemas. También me encanta programar. Gracias a la Web, las herramientas que construyo pueden estar disponibles para todos . Aún mejor, es fácil construir un sitio web que sea la herramienta. No se requiere descarga.

En este artículo, exploro la creación de un sitio web desde cero considerando UX, speed, mobile, SEO y AMP.

El problema a resolver

Cuando escribo en francés, a menudo tropiezo con la conjugación de un verbo. A diferencia del inglés, el francés tiene reglas funky. ¿Termina con una "s" o una "t"? Hay algunas reglas gramaticales que uno olvida. Por ejemplo, el verbo "finir" terminará con una "s" o "t" en tiempo presente, pero sin en tiempo pasado.

Mi instinto natural es googlear "conjugaison finir" para encontrar la gramática correcta. Hay muchos sitios web que le dan la respuesta. Sin embargo, están llenos de anuncios. Por ejemplo, nouvelobs.com incluso termina poniendo un gran anuncio de video que empuja la respuesta debajo de la tapa. ¡Que frustrante!

Por supuesto, hay soluciones para esto. Podría instalar un corrector gramatical. Sin embargo, cambio constantemente de francés a inglés. Las damas se confunden con eso todo el tiempo corrigiendo el idioma equivocado. Por lo tanto, los evito.

Al estar en el navegador, es bastante rápido abrir una nueva pestaña y googlear "conjugaison finir". Si tan solo hubiera un sitio web limpio, súper rápido y libre de anuncios para darme la respuesta.

Después de vivir con este dilema durante algunos años, decidí crear mi propio sitio web con conjugación de verbos en francés. También quería resolver problemas que vi en sitios web existentes. Estos fueron los requisitos que establecí para el sitio:

  1. Diseño eficiente sin anuncios ni funciones superfluas
  2. Nombre de dominio fácil de recordar
  3. Rápido. Realmente, muy rápido. Por debajo de 1 segundo de carga de página.
  4. Búsqueda integrada
  5. Móvil amigable
  6. Rápido de encontrar en Google

Este artículo documenta mi viaje de construcción conjugaison.xyz . Vi esto como un buen ejercicio para construir un sitio web desde cero.

Elegir un nombre de dominio

Elegir un dominio siempre es complicado. Lo primero y más importante es la marca y que sea fácil de recordar. Al final, quería que mi nombre de dominio incluyera la palabra clave que buscaría. En este caso "conjugaison". Luego agregaría el nombre del verbo en sí. Al buscar la conjugación del verbo "finir" se obtendría la consulta de búsqueda "conjugaison finir".

Lamentablemente, conjugaison.com ya se tomó (o se estacionó). También lo fueron las variantes lógicas laconjugaison.com o conjugaisonverbe.com . Tenía que salir del dominio punto com.

Durante mi investigación, GoDaddy sugirió una alternativa: conjugaison.xyz por solo 2 $ el primer año. Me gustó la extensión dot xyz . Tenía un buen sonido y era fácil de recordar. Y a $ 2 fue una ganga.

¿Qué hay de las consideraciones de SEO? Samuel Lavoie señala que desde 2012 Google no otorga puntos SEO adicionales a los sitios que contienen la palabra clave. De hecho, penalizan los sitios con coincidencia de dominio exacta (EDM para abreviar) si el contenido es pobre. EDM es un tema interesante. Brian Harnish escribió una guía bastante esclarecedora sobre EDM . En resumen, Samuel cree que hay 3 criterios que se utilizan para identificar un sitio de mala calidad: guión en el nombre de dominio, una coincidencia exacta de palabras clave y un nombre de dominio funky. Es una pena para mí ya que conjugaison.xyz pega 2 de esos 3 criterios. Google puede considerarlo de mala calidad y disminuirlo en los rankings.

En primer lugar, este sitio web es para mí. Entonces no me preocuparé por eso. Si algún día decido competir por tráfico de conjugación de verbos en francés, consideraré cambiar el nombre de dominio. Por ahora, sin embargo, conjugaison.xyz es muy fácil de recordar para los humanos. Cuando hablo con la gente sobre esto, lo recuerdan fácilmente.

Diseño simple y eficiente

La mayoría de estos sitios hacen más que conjugación. Cosas como la definición de la palabra, la palabra del día, las palabras más utilizadas, etc. En mi caso, eso no me importaba. Mi sitio web estaría allí para hacer solo una cosa y hacerlo bien: conjugación de un verbo. Con eso en mente, dibujé este marco de alambre con el mínimo indispensable.

Encabezamiento

El encabezado tiene un enlace a la marca que también sirve como un enlace a la página de inicio; la lista de todos los verbos. También hay un cuadro de búsqueda para encontrar rápidamente un verbo. En última instancia, me gustaría que este cuadro de búsqueda utilice la búsqueda de Google y conduzca a la página correcta. Pero ese es un tema aparte que trataré en el artículo de seguimiento.

Contenido

El contenido de la página contiene la conjugación del verbo en cuestión. Eso es. Sin barra lateral, sin anuncios, sin verbos del día o enlaces a otros verbos.

Pie de página

Rara vez alguien llega al pie de página. Es un lugar de práctica estándar para poner el autor (y el derecho de autor). Eso tiene sentido.

Diseño

Bootstrap es bastante omnipresente. Lo he estado utilizando durante muchos años y era el marco de CSS natural que debía usar. Decidí descargar solo los elementos esenciales. Bootstrap 3 tiene una herramienta personalizada incorporada para descargar lo que desee.

El último archivo CSS modificado fue de 57kb y otro de 24kb para el tema. Ok, no está mal. Además, el archivo CSS modificado no cambiará. Definitivamente podría impulsar esos activos a un CDN.

Aquí está el diseño final.

Cómo hacerlo rápido

La velocidad siempre debe considerarse una característica. Me esfuerzo por nunca comprometer la velocidad. Creo que un sitio web que tarda mucho en cargarse es un fracaso. Parece que no soy el único. Según un estudio de Akamai y gomez.com , las tasas de abandono aumentan dramáticamente para sitios web lentos. La mayoría de los usuarios esperan que un sitio se cargue en menos de 2 segundos. Trataré de hacerlo en menos de 1 segundo.

Cuando un desarrollador piensa en un sitio web rápido, diferentes tecnologías aparecen en sus mentes. Hay lenguajes de back-end: Java, python, nodo JS, C #, ruby, PHP. Hay bases de datos: MySQL, MS SQL, Mondo DB. Hay bibliotecas y marcos front-end: React, Angular, Vue, plain jQuery. Hay servidores bare metal, VPS (servidores privados virtuales) y contenedores docker. Finalmente, también se considera el uso de una CDN (red de entrega de contenido) para servir contenido estático como imágenes, archivos Javascript y CSS.

Back-end

Para conjugaison.xyz , un sitio web puramente estático, la tecnología de back-end es más una cuestión de preferencia y conocimiento personal. Ya sea Java, Node JS o PHP habrían hecho el trabajo. Elegí PHP porque ya tengo experiencia construyendo sitios web y aplicaciones usando LAMP (Linux Apache MySQL PHP).

En marzo de 2017 cambié de Rackspace a Amazon Lightsail. He estado muy satisfecho con la calidad y el precio de VPS. Tengo un servidor de RAM de 1 GB que me cuesta un promedio de 10 USD al mes en el que hospedo todos mis proyectos personales. Elegí una pila LAMP con tecnología de Bitnami. Bitnami LAMP es Ubuntu preconfigurado con Apache, MySQL y PHP. También tiene PageSpeed para almacenar en caché JS, CSS y activos de imágenes. También incluye marcos PHP populares como Codeigniter, Laravel o Zend. En general, Bitnami LAMP está bien documentado y es fácil de usar.

HTTPS es crucial hoy en día y gracias a Let's Encrypt, la instalación de un certificado SSL es fácil y completamente gratis. Bitnami proporciona una excelente guía de cómo encriptar Let's Encrypt .

Interfaz

En el front-end, decidí no usar nada, sin Javascript. Eso es correcto, has leído bien. NO JAVASCRIPT . conjugaison.xyz consiste en páginas web estáticas. Por lo tanto, decidí explorar qué tan lejos podía llegar sin cargar ningún Javascript.

En este punto, consideré si debería generar páginas web estáticas o construir las páginas sobre la marcha usando PHP.

Solución 1 – Páginas estáticas en CDN

Mi primer intento fue crear una página estática por verbo e insertarlas en un CDN. Eso son más de 2000 páginas web estáticas. A medida que experimenté con la construcción de páginas estáticas, llegué al problema de que cualquier cambio de diseño o cualquier corrección de errores requeriría regenerar las 2000 páginas estáticas y volver a presionarlas al CDN. Actualizar más de 2000 páginas en el CDN lleva tiempo. Incluso con buenas herramientas de CI (integración continua), no hay forma de superar el retraso de actualizar esas páginas.

La solución de página estática parecía realmente arcaica por dos razones. Primero, sería muy ineficiente. Me recordó los días en que solía enviar archivos al servidor FTP. Hoy en día, realizar un git pull en el servidor es mucho más eficiente, solo busca cambios.

En segundo lugar, con archivos estáticos, perdería el dinamismo de construir páginas sobre la marcha. Prefería esta opción mucho más que páginas estáticas.

Puede suponer que compilar páginas sobre la marcha es mucho más lento que servir páginas web estáticas. Bueno, la respuesta es sí y no, como muestro en la siguiente sección.

Solución 2: HTML generado por el servidor

Mi segundo intento fue usar PHP para generar dinámicamente el HTML. Mi hipótesis aquí fue que mi servidor podría renderizar el HTML y enviarlo lo suficientemente rápido. Mi público objetivo se concentra geográficamente en la costa este de América del Norte, en la provincia de Québec de habla francesa. Mi servidor Amazon Lightsail se encuentra en Ohio. Pensé que el sitio web se cargaría rápido. Sin duda, el tiempo suficiente para el primer byte (TTFB) fue de 40 ms. Eso es bastante rápido. En general, desde Montreal, el documento HTML entró en menos de 200ms, a veces mucho más rápido. Mi hipótesis fue comprobada.

No tener que preocuparme por CDN en este punto me dio la mayor ventaja de poder piratear en tiempo real en el sitio web de prod. ¡Hacer un cambio en el sitio web simplemente implicó la actualización de un archivo PHP en el servidor y voilà!

Como nota al margen, nada supera el dinamismo y la velocidad de implementación de un lenguaje interpretado. En mi caso, simplemente uso git como mi CI. En el servidor, ejecuto "git pull" y todo está actualizado. La simplicidad es felicidad.

Por supuesto, si mi servidor recibe miles de solicitudes por segundo, esa es otra historia. CDN proporciona la ventaja de no golpear el servidor. No creo que la conjugación del verbo francés sea tan popular. Entonces no me preocuparé por eso.

Búsqueda integrada y experiencia del usuario

No tener que descargar, analizar, interpretar y ejecutar Javascript hizo que la página fuera aún más rápida. Estamos tan acostumbrados a tener Javascript cargado en las páginas hoy en día. Con React, Vue o Angular, no hay forma de evitarlo. Afortunadamente, mi sitio web no requiere nada de eso. Es solo HTML. Algo muy satisfactorio volviendo a lo básico.

La única pregunta que tenía era sobre el formulario de búsqueda integrado.

 <form class = "search" action = "/ recherche" target = "_ top"> 
<input name = "term" type = "text" placeholder = "Trouver un verbe"
value = "<? = isset ($ term)? $ term: ''?> "/>
</ form>

Bueno, resulta que el envío de formularios está incorporado en HTML (tiendo a olvidarlo después de años de usar liberies de jQuery y Javascript). Presionando enter solo se envía al servidor. Y como mis páginas son tan livianas y cargan muy rápido, no hay necesidad de AJAX del lado del cliente. Cuando se realiza una búsqueda, el navegador agrega la cadena de consulta ?term=miner y carga la nueva página del servidor. Por ejemplo, escribir minero en el cuadro de búsqueda carga la página https://conjugaison.xyz/recherche?term=miner .

Mejorando la experiencia de usuario de búsqueda

La búsqueda implica dos cargas de página. La primera lista de resultados de búsqueda. El usuario luego hace clic en el verbo deseado para una segunda carga de página. ¿Podría ser esto más rápido? ¿Por qué no mostrar la conjugación completa del verbo más parecido que aparece debajo de los resultados de búsqueda? Modifiqué el sitio web para hacer exactamente eso. Ahora está garantizado que tendrá una conjugación de verbos después de cualquier búsqueda siempre que encontremos una coincidencia. Además, el término de búsqueda permanece cuando haces clic en otro verbo correspondiente.

En el back-end, la página de búsqueda /recherche simplemente hace una redirección a la página /verbe . En nuestro caso particular, esta es la redirección:

Llamando a https://conjugaison.xyz/recherche?term=miner .

Se redirige a https://conjugaison.xyz/verbe/miner?term=miner .

Me gusta esta solución. Es como una mezcla de Google. Me siento afortunado con los resultados de búsqueda directamente integrados en la página para evitar volver a la página del navegador. Muy eficiente.

Abrir búsqueda

Hace unos años, Chrome introdujo la búsqueda directamente en la barra de direcciones del navegador. Recuerdo ese día: ¡era un ah, ja! momento. Eliminó un cuadro de entrada mejorando así la experiencia del usuario. En un momento dado, también se agregó la función de autocompletar a la barra de direcciones que muestra las búsquedas anteriores y las direcciones de los sitios web visitados mientras escribía.

Recientemente, descubrí otra cosa interesante acerca de la barra de direcciones: búsqueda integrada en el sitio. Abra una nueva pestaña del navegador y escriba "conjugaison.xyz". Presione espacio y observe que aparece una barra vertical. Cualquier cosa que escriba luego llamará a la búsqueda integrada en mi sitio.

Búsqueda integrada del navegador a través de la búsqueda abierta

Esto es posible gracias a OpenSearch . OpenSearch "es una colección de tecnologías que permiten la publicación de resultados de búsqueda en un formato adecuado para sindicación y agregación" ( OpenSearch en Wikipedia ). Los canales RSS y Atom son parte de eso. Lo mismo ocurre con la búsqueda integrada en el navegador.

Para habilitar OpenSearch en su sitio web, debe crear un documento de descripción de OpenSearch ; un archivo XML que indica a los motores de búsqueda a qué URL llamar para realizar la búsqueda. Aquí está el archivo opensearch.xml en mi sitio web .

 <OpenSearchDescription xmlns = "http://a9.com/-/spec/opensearch/1.1/" xmlns: moz = "http://www.mozilla.org/2006/browser/search/"> 
<ShortName> conjugaison.xyz </ ShortName>
<Descripción> Conjugaison des verbes en français </ Description>
<InputEncoding> UTF-8 </ InputEncoding>
<Ancho de imagen = "16" alto = "16"
type = "image / x-icon">
https://conjugaison.xyz/favicon.ico </ Image>
<Url type = "text / html" method = "get"
template = "https://conjugaison.xyz/recherche?term={searchTerms}"> </ Url>
</ OpenSearchDescription>

La etiqueta Url le dice al navegador que busque con un HTTP GET usando la URL especificada. Dice que el resultado será un documento HTML.

Además de esto, debe agregar una meta enlace en su documento HTML para informar a los navegadores y permitir el autodescubrimiento de su complemento de búsqueda .

 <link rel = "search" type = "application / opensearchdescription + xml" href = "/ opensearch.xml"> 

Rápido y amigable en el móvil

Bootstrap responde de manera inmediata, por lo tanto, el sitio web ya era móvil. El cambio necesario impedía que la barra de navegación se colapsara en pantallas angostas. Con un poco de CSS, pude obtener los siguientes resultados receptivos en iPad y iPhone 4. En una pantalla muy estrecha, la línea de etiqueta está oculta en la barra de navegación. El cuadro de búsqueda cae debajo de la marca. También acorté el título para asegurarme de que el contenido importante esté en la mitad superior de la página.

¿Y el rendimiento en dispositivos móviles? Realicé más pruebas utilizando la Auditoría de rendimiento de Developer Tools. Mide el rendimiento como se experimentaría en un dispositivo móvil típico y una conexión 3G (el código emula el móvil al limitar la velocidad de conexión a 1.6Mbs , la velocidad promedio de conexión 3G).

Aquí está esa auditoría:

Con un puntaje de 98/100 y un tiempo de 2.100s para interactuar, es bastante bueno, pero el doble de mi objetivo establecido de 1 segundo. El análisis adicional apunta a una cosa que ralentiza la página: la fuente personalizada que estoy usando. Según la auditoría, perdemos 570ms cargando y pintando la fuente Courgette. Por lo tanto, realicé un experimento para eliminar la fuente personalizada. Volví a hacer la auditoría:

Con un puntaje perfecto de 100 y 790ms de tiempo para interactuar, ¡eso es bastante sustancial! ¡No cargar esa fuente personalizada reduce más de 1,200ms, el doble de lo que reportó la auditoría!

Espera, pongamos un contexto alrededor de eso …

Primero, la Auditoría de Desempeño emula un dispositivo móvil promedio que se ejecuta en 3G. Esto excluye a mi público objetivo en Québec que tienen conexiones recientes de iPhone y LTE. En segundo lugar, mide la primera carga y no tiene en cuenta las cargas posteriores por las que los activos se almacenan en caché.

Este punto es importante. El navegador guardará en caché la fuente personalizada. Aunque la primera carga puede tomar 2 segundos, las cargas posteriores deberían tomar menos de 1 segundo.

Al final, decidí que la fuente personalizada era importante para el diseño de conjugaison.xyz . Por lo tanto, decidí evitar que Calabacín sacrificara el primer tiempo de carga.

SEO

SEO o la optimización del motor de búsqueda es una gran bestia peluda. Por lo general, consta de dos partes: SEO en el sitio vs SEO fuera del sitio. El SEO en el sitio trata de hacer que un sitio web sea fácil de usar. Piensa como sitemaps, robots.txt, datos estructurados, metaetiquetas (título, descripción), palabras clave, etc.

El SEO fuera del sitio trata sobre la construcción de enlaces: hacer que otros sitios web apunten al suyo para generar autoridad, relevancia y confianza .

No cubriré SEO fuera del sitio en este artículo. Algún día puedo decidir competir por el tráfico, sin embargo, por el momento, conjugaison.xyz es para mí, ante todo.

Volviendo a mi lista de deseos, queda algo por ver: Búsqueda de Google. Quiero ser capaz de googlear "conjugaison finir" y encontrar mi sitio web rápidamente. Como mencioné, hay muchos sitios web establecidos que compiten por la palabra clave "conjugaison". Sin embargo, sé por experiencia que Google considerará que un nombre de dominio es bastante único. Por lo tanto, puedo cambiar mi consulta a "conjugaison.xyz finir" y espero que la página correcta de mi sitio web aparezca como primer resultado. Los siguientes son los aspectos relevantes de SEO en el sitio en los que trabajé para alcanzar mi objetivo.

Palabras clave

Los robots de los motores de búsqueda rastrean páginas web buscando palabras clave. El Indizador luego trata de determinar de qué se trata el sitio y las páginas. En mi caso, es bastante simple: conjugación de un verbo. Por lo tanto, cada una de las más de 2000 páginas que tengo siguen este patrón de título: "[verbo] – Conjugaison du verbe [verbo]". Además, construyo el esquema de URL de una manera lógica: conjugaison.xyz/verbe/[verbe].

Mapa del sitio

Es una buena práctica crear un archivo sitemap.xml que contenga una lista de sus páginas. Para conjugaison.xyz, escribí un script PHP para generar el sitemap.xml con más de 2000 páginas. El archivo sitemap.xml se encuentra en la raíz de mi sitio web.

Vínculos a sitios de búsqueda

¿Alguna vez ha notado que algunos sitios web tienen un cuadro de búsqueda integrado directamente en el resultado de búsqueda de Google? Se trata de algo llamado SearchLoins Searchbox y bastante fácil de implementar si su sitio web ya tiene un motor de búsqueda. Solo necesitaba proporcionar el marcado adecuado para indicar a la Búsqueda de Google:

 <script type = "application / ld + json"> 
{
" @context ": " http://schema.org ",
" @type ": "Sitio web",
"url": " https://conjugaison.xyz ",
"potencialAcción": {
" @type ": "SearchAction",
"objetivo": " https://conjugaison.xyz/recherche?term={search_term_string }",
"query-input": "required name = search_term_string"
}
}
</ script>

Tenga en cuenta que Google establece específicamente que el marcado de enlaces de sitio de búsqueda solo debe aparecer en una página . En mi caso, es la página de inicio, el índice de todos los verbos que contiene el sitio.

Google también proporciona una herramienta de prueba de datos estructurados para ayudarlo a validar el marcado.

Registrar mi sitio web con la Búsqueda de Google

Para aparecer en Google, Google debe saber que usted existe. Google proporciona una herramienta llamada Google Search Console (anteriormente conocida como Google Webmaster Tools). Puede agregar su propiedad web, proporcionar un mapa del sitio y pedirle a Google que indexe su sitio web. Google Search Console también evaluará su sitio, le mostrará estadísticas y le brindará sugerencias para optimizar su sitio web y hacerlo más amigable para los motores de búsqueda. Para obtener más información, Kissmetrics tiene un buen artículo que cubre la Búsqueda de Google .

Añadí conjugaison.xyz en Google Search Console, conseguí que Google indexara el sitio web y luego intenté buscar en Google "conjugaison.xyz". El sitio apareció en los resultados de búsqueda, ¡sí! Luego traté de buscar un verbo: "conjugaison.xyz finir". Mi sitio web no apareció en ninguna de las primeras páginas de resultados de búsqueda. Mierda.

Búsqueda específica del sitio

Luego descubrí que puedes forzar a Google a buscar solo en un sitio usando este patrón: "site: conjugaison.xyz finir". Se llama búsqueda específica del sitio . El resultado de la búsqueda me dio solo un resultado: el de la página de inicio que enumera todos los verbos. La página de conjugación parece que no estaba en el índice de Google.

En este punto, déjame decirte lo más importante sobre SEO. Su paciencia Verá que Google llevará tiempo para rastrear su sitio y agregarlo a sus resultados de búsqueda. Esperé 1, 2, 3 días y aún nada. La semana siguiente, solo aparecieron unos pocos verbos. Una semana más tarde sucedió la magia: Google fue capaz de darme resultados consistentes cuando estaba buscando un verbo en mi sitio web. La consulta de búsqueda "site: conjugaison.xyz finir" finalmente me dio esto:

Google incluso priorizó la página del verbo sobre la página de inicio como primer resultado. Bingo.

Terminando

Estoy muy satisfecho con conjugaison.xyz como una herramienta personal para ver la conjugación de verbos en francés. El sitio web es rápido y la experiencia del usuario para la búsqueda de verbos es muy eficiente en el navegador, en la Búsqueda de Google y en el sitio web. Creo que alcancé mi objetivo

Aún mejor es la característica asesina que descubrí: la búsqueda integrada en el navegador gracias a la búsqueda abierta . Para buscar un verbo, simplemente tengo que abrir una nueva pestaña, escribir "conjugaison.xyz" y espacio para ingresar al modo de búsqueda. Como se muestra en el siguiente video, me lleva 5 segundos buscar un verbo. La mayoría de ese tiempo soy yo escribiendo y moviendo el mouse. La búsqueda y la carga del sitio web demoran menos de 1 segundo.

Un agradecimiento especial a Daniel Tousignant-Brodeur , Pierre-Luc Maheu , Alexis Philippe y Samuel Lavoie por leer borradores y proporcionar comentarios.