web-dev-qa-db-fra.com

Comment accélérer le chargement de ma page?

Duplicate possible:
Des idées pour améliorer la vitesse de chargement du site Web?

Ma page obtient un score de performance de 79 en yslow, ce qui n’est pas mauvais. Yslow dit que les parties sur lesquelles je peux travailler sont

1)

Note F sur Faire moins de requêtes HTTP

Il fait beaucoup de requêtes HTTP mais comment puis-je les réduire? La page utilise les API facebook et gmaps et quitter en utilisant ces fonctionnalités est un peu hors de question.

2)

Grade F sur Utiliser un réseau de diffusion de contenu (CDN)

Je suppose que je peux le faire, mais il me semble que j'ai besoin d'un autre fournisseur d'hébergement.

3)

Grade F sur les en-têtes Add Expires

J'ai essayé d'ajouter à l'en-tête app.yaml les en-têtes Expires, mais il semble que ce soient les composants d'autres sources qui n'ont pas d'en-têtes Expires.

4)

Grade F sur mettre JavaScript en bas

Encore une fois, je suis obligé de mettre du javascript au sommet car c'est la recommandation. Devrais-je faire quelque chose de spécial ici?

5)

Grade B sur Ne pas redimensionner les images en HTML

Je suppose que je pourrais faire les choses autrement que par des éléments de style intégrés.

6)

Grade B sur Eviter les expressions CSS

Je ne sais pas ce que c'est.

Donc, je veux le rendre encore meilleur. Avez-vous une idée de comment optimiser ce code?

{% spaceless %}{% load i18n %}<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
  <head><meta http-equiv="Cache-Control" content="no-cache" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{% trans "Jobs" %}, {% trans "Houses" %}, {% trans "Services" %}, {% trans "Cars" %}, {% trans "Commercial properties" %},</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="date" content="{% now "l, F jS Y" %}" />
<meta name="description" content="{% trans "VEHICLES" %},{% trans "Motorcycles" %},{% trans "Apartments" %},{% trans "Houses" %},{% trans "Cars" %},{% trans "Jobs" %},{% trans "Other vehicles" %},
{% trans "PROPERTIES" %},{% trans "Houses" %},{% trans "Commercial properties" %},{% trans "Land" %},{% trans "ELECTRONICS" %},
{% trans "TV/Audio/Video/Cameras" %},{% trans "Computers" %},{% trans "Home &amp; Garden" %},{% trans "Clothes/Watches/Accessories" %},
{% trans "For Children" %},{% trans "LEISURE/SPORTS/HOBBIES" %},{% trans "Hobby &amp; Collectables" %},{% trans "Music/Movies/Books"%},
{% trans "Pets" %},{% trans "BUSINESS TO BUSINESS" %},{% trans "Professional/Office equipment" %},{% trans "Business For sale" %},{% trans "Services" %}" />
<meta name="Keywords" content="{% trans "VEHICLES" %},{% trans "Motorcycles" %},{% trans "Apartments" %},{% trans "Houses" %},{% trans "Cars" %},{% trans "Jobs" %},{% trans "Other vehicles" %},
{% trans "PROPERTIES" %},{% trans "Houses" %},{% trans "Commercial properties" %},{% trans "Land" %},{% trans "ELECTRONICS" %},
{% trans "TV/Audio/Video/Cameras" %},{% trans "Computers" %},{% trans "Home &amp; Garden" %},{% trans "Clothes/Watches/Accessories" %},
{% trans "For Children" %},{% trans "LEISURE/SPORTS/HOBBIES" %},{% trans "Hobby &amp; Collectables" %},{% trans "Music/Movies/Books"%},
{% trans "Pets" %},{% trans "BUSINESS TO BUSINESS" %},{% trans "Professional/Office equipment" %},{% trans "Business For sale" %},{% trans "Services" %}" />   
<link rel="stylesheet" href="/static/css/style.css" />
</head>
<body onload="initialize()"><div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '164355773607006', // App ID
      channelURL : '//WWW.KOOLBUSINESS.COM/static/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      oauth      : true, // enable OAuth 2.0
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>
<div class="container_12">
    <div id="mainCol" class="grid_12">
        <div id="header">
        <div id="navbar"> 
<ul><li><a href="ai">{% trans "Add" %}</a></li>
    <li><a href="li">{% now "d M" %}</a></li>                   
{% if user %}<li><a href="{{ logout_url }}" class="logout">Logout Google</a></li>{% endif %}    
{% if current_user %}<li><a href="https://www.facebook.com/logout.php?next=http://{{Host}}&access_token={{current_user.access_token}}">Logout Facebook</a><li> {% endif %}
{% if not current_user and not user %}<li><a href="/login">{% trans "Log in" %}</a></li>{% endif %}
</ul>
</div>
        {% if user or current_user %}
            <div id="user-ident">
                <span>{% trans "Welcome," %} <b>{{ current_user.name }}{% if not current_user %}{{ user.nickname }}{% endif %}</span>
            </div>
            {% endif %}
            <div id="logo-wrap">
                <div id="logo-img"><a class="nobk" href="/ai"><img src="/_/img/kool_business.png" width="140" height="166" alt="Market Logo"/></a>
</script><g:plusone></g:plusone>
<div class="fb-like" data-href="{{Host}}" data-send="true" data-width="450" data-show-faces="true"></div></div>
                <div id="logo-text"><h1 style="display:none">Market</h1>
</div>
            </div>
        </div>
    </div>
</div>
<div class="clear"></div>
<div>       
    <div class="mapContainer"><center>
        <div id="gmap">&nbsp;</div></center>
    </div>
<div class="container_12">
    <div class="grid_6">
        <div class="title1">{% trans "Post a photo" %}</div>
        <div class="countries_list">            
            <form method="post" action="{{form_url}}" enctype="multipart/form-data"> <div>
            <input type="file" name="file" /><input type="submit" value="{% trans "Go" %}" /></div> </form>         
        </div>
    </div>
    <div class="grid_6">
        <div class="title1">{% trans "Information" %}</div><div> {% trans "You can post ads for free. You can search for classified advertisements from professionals as well as private individuals; such as: cars, property, employment, pieces of furniture, electronics and others." %}</div>
        <div class="link_to_profile">   </div>              
    </div>
</div>
<div class="clear"></div>
<div class="container_12">
    <div class="grid_12">
        <div id="footer">
        &copy;2011 <a href="http://koolbusiness.com" title="kool business">koolbusiness.com</a> 
        </div><iframe src="https://www.facebook.com/plugins/registration.php?
             client_id=164355773607006&
             redirect_uri=http://www.koolbusiness.com/
             fields=name,birthday,gender,location,email"
        scrolling="auto"
        frameborder="no"
        style="border:none"
        allowTransparency="true"
        width="100%"
        height="330">
</iframe>
    </div>
</div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=adsense"></script>
<script type="text/javascript" src="static/js/home.js"></script>
</body>
</html>{% endspaceless %}
javascriptpythonhtmlgoogle-app-engine
1
Niklas Rosencrantz

pour 1) fusionner tous les css sur fichier et fichiers javascript dans un fichier pour moins de requêtes HTTP. fusionner tous les fonds en un seul fichier image et utiliser css pour les séparer

2) changez d'hôte ou utilisez cloadfare.com

3) contactez votre développeur de script pour résoudre ce problème

4) simple: mettre JavaScript en bas: avant

5) aussi simple: ne pas redimensionner les images en HTML. redimensionner vos images dans un éditeur de photo pour une utilisation Web

6) compresser vos fichiers scc (également javascript).

et Idées: utilisez la mise en cache. dans la mémoire locale du serveur et sur les clients (fonctionnalité html5)

3
Towhid