5 conseils HTML pour créer un site Web gratuit à chargement rapide

Publicité

ma HyperText MArkup LLes compétences en langage (HTML) sont rouillées à coup sûr, mais cela me qualifie peut-être pour cet article. Retour dans le jour où copains était toujours à la télévision et AOL envoyait des sous-verres et des mini-frisbees gratuits tous les jours, je créais des sites Web à charger sur des modems commutés. Au fil du temps, j'ai eu le culot de penser qu'il y avait encore beaucoup de gens avec des connexions non haut débit (dial-up) et j'ai continué à concevoir des sites Web en fonction de cela.

Enfin, j'ai abandonné conception et développement web Vous voulez apprendre la conception Web? 7 chaînes YouTube pour vous aider à démarrerYouTube a des milliers de vidéos et de chaînes pour les débutants en conception Web. Ici, nous examinons certains des meilleurs pour commencer. Lire la suite lorsque la qualité du contenu a commencé à être mise de côté par la quantité de contenu. Sites Flash, beaucoup d'images, pop-ups, pop-under, curseurs, etc. Faites confiance à votre contenu de qualité et vous n'avez pas besoin de ce fluff. Faites confiance à votre contenu et vous pouvez rendre votre site Web incroyablement rapide.

Avec un site Web hébergé sur un service gratuit, il est plus rapide absolument meilleur. Pourquoi? Parce que "gratuit" a tendance à attirer beaucoup de gens et le serveur doit diffuser votre page ainsi que des milliers de pages d'autres personnes qui ne sont pas optimisées. C’est comme essayer de passer un convoi de grumes de Kenworth avec les porcs de Jimmy haulin. Mais si vous avez une petite Porsche, cela devient beaucoup plus facile à faire.

Voici quelques conseils pour couper la graisse, sans ordre particulier.

1. Utilisez les tableaux avec parcimonie

Les tableaux sont un catch-22. Au début, ils étaient utilisés pour mettre en page la conception ainsi que pour mettre le contenu sous forme de tableau. Au fur et à mesure que les dispositions de conception devenaient plus complexes, les tables devenaient plus grandes et plus profondes, ce qui signifie toujours un ralentissement du temps de chargement.

Cascendant Style Sles feuilles (CSS) sont venues et ont vraiment aidé le problème de l'utilisation des tableaux pour la mise en page. Malheureusement, les fabricants de navigateurs ne pouvaient pas sembler envelopper leur idée des normes - et ne le peuvent toujours pas. Ce qui avait l'air génial en CSS dans Firefox ressemblait à un petit-déjeuner de chien dans IE et n'était peut-être même pas rendu dans Safari. Ne me lancez pas IE5 sur un Mac. Je suis toujours en thérapie pour ça.

Veuillez uniquement utiliser des tableaux pour mettre en page le contenu qui doit être dans un format tabulaire Tableizer: générer un tableau HTML à partir d'une feuille de calcul Excel Lire la suite - comme une liste de prix ou des statistiques de hockey. Cela réduit le nombre de tables et la profondeur d'imbrication, ce qui signifie des temps de chargement plus rapides. Apprendre le CSS Les 5 meilleurs sites pour apprendre le CSS en ligne Lire la suite fera une grande différence, si vous devez avoir une mise en page de fantaisie.

2. Utilisez HTML pour créer de la couleur

Oui, je suis Canadien, donc c'est la couleur avec un «u» pour moi. Je sais que HTML est centré sur l'Amérique, donc l'attribut est «couleur». Apprenez votre codes couleurs hexidécimaux et utilisez-les pour animer du contenu au lieu d'images.

Essayez d'ajouter l'attribut color à vos éléments HTML pour le pimenter. Cela fonctionne particulièrement bien dans les tableaux ou la balise body, comme ceux-ci:

Si vous étiez un navigateur, seriez-vous plus rapide à charger un simple 7 caractères de #FF00FF ou une image 10 × 10 pixels de la couleur fuschia quelques milliers de fois? C’est une question rhétorique, vous au dernier rang. Baisse ta main.

3. Lien vers les scripts / feuilles de style

Si vous utilisez un certain JavaScript (JS) ou CSS à plusieurs reprises tout au long de votre site Web, pensez à créer leur propre fichier et à l'appeler, au lieu de le mettre sur chaque page. Étant donné qu'un navigateur a tendance à mettre en cache un fichier et à l'appeler avant de vérifier avec le serveur, votre navigateur aura déjà ce script ou CSS prêt à l'emploi. Cela signifie moins HyperText Transfer PRotocol (HTTP) appelle ce qui signifie une page de chargement plus rapide.

Comment appeler un JavaScript externe:

–>

Pourquoi ai-je mis ces balises de commentaire autour de l'appel pour le JavaScript? Parce que tous les navigateurs ne sont pas configurés pour lire les scripts. L'ajout des balises de commentaire fait que les navigateurs avec les scripts désactivés sautent simplement dessus, au lieu de donner des messages d'erreur ennuyeux.

Comment appeler une feuille de style en cascade externe:

C'est si simple. L'attribut href est l'endroit où vous définissez l'emplacement de votre feuille de style. Les autres attributs indiquent au navigateur ce qu'est ce fichier, il sait donc quoi en faire.

Certains développeurs peuvent utiliser le @importation pour appeler une feuille de style. Dans Internet Explorer, cela revient à avoir votre tag en bas de votre fichier, ce qui provoque le chargement de la page entière et ALORS rendre les styles sur elle. Pas bon.

4. Combinez vos scripts couramment utilisés dans un seul fichier

De nombreux développeurs Web utiliseront les mêmes scripts encore et encore. Peut-être y a-t-il un script d'horloge et un script de calendrier et peut-être une sorte de script d'effet spécial qu'ils utiliseront sur chaque page. Au lieu d'avoir 3 fichiers distincts, avec 3 appels HTTP distincts, placez les scripts dans un fichier et appelez-le une fois. Cela réduit vos appels HTTP de 66% et il est également mis en cache. Vous accélérez le démon, vous! Avant de lever à nouveau la main, oui, vous pouvez faire la même chose avec les fichiers CSS.

5. N'utilisez pas HTML pour modifier la taille de vos images

Si vous souhaitez utiliser une image de 1 000 × 1 000 pixels sur votre page Web, mais que vous souhaitez qu'elle ne soit que de 250 × 250 pixels, modifiez-la dans un éditeur d'images. Certaines personnes "rétréciront" l'image en utilisant du HTML comme celui-ci:

Si cette image de 1 000 × 1 000 pixels a une taille de fichier de 2 Mo, le redimensionner avec HTML ne réduit pas la taille du fichier! En fait, cela peut prendre plus de temps à charger, car le navigateur doit maintenant mettre 10 livres de merde dans un sac de 2 livres, pour ainsi dire. Pas une tâche facile.

J'espère que ces conseils vous aideront. Donnez-moi un shoutback dans les commentaires si vous les utilisez ou si vous avez d'autres idées d'optimisation HTML à partager.