Εκφράζοντας IT

Βελτιστοποίηση Εικόνων

Βελτιστοποίηση σημαίνει απλά κρατώντας το μέγεθος της μικρής εικόνας διατηρώντας την ποιότητα της εικόνας στο απαιτούμενο επίπεδο. Υπάρχουν φορτία των διαδικασιών που κάποτε μπορεί να πραγματοποιήσει τη βελτιστοποίηση εικόνων πριν να φορτωθούν στο διακομιστή για την παράδοση. Τα εργαλεία που χρησιμοποιούμε για τη δημιουργία αυτών των εικόνων (Photoshop, πυροτεχνήματα κ.λπ.) έχουν συνήθως τα εργαλεία που επιτρέπουν στους χρήστες να βελτιστοποιήσουν την εικόνα για χρήση ιστοσελίδων.
• Ελέγξτε το GIF για να δείτε αν χρησιμοποιείτε ένα μέγεθος παλέτα που αντιστοιχεί στον αριθμό των χρωμάτων στην εικόνα. Όταν μια εικόνα με 4 χρώματα και μια παλέτα χρωμάτων 256, τότε η εικόνα θα μπορούσε να είναι περαιτέρω βελτιωμένη

• Μετατροπή GIF είναι να PNG, όπου είναι δυνατό και δείτε αν υπάρχει εξοικονόμηση. Πιο συχνά από ό, τι δεν υπάρχει. Μην διστάσετε να χρησιμοποιήσετε από το PNG, όπως αυτές υποστηρίζονται πλήρως από τα περισσότερα από τα πιο συνηθισμένα προγράμματα περιήγησης. Αναμείνετε τις δυνατότητες κίνησης PNG μπορεί να κάνει ό, τι κάνει ένα GIF, συμπεριλαμβανομένης της διαφάνειας.

• Για τις εικόνες που χρησιμοποιούνται σε CSS sprites, τακτοποιήστε τις εικόνες στο ξωτικό οριζόντια και κάθετα αντίθετοι σε οδηγεί συνήθως σε ένα μικρότερο μέγεθος αρχείου. Επίσης, συνδυάζουν εικόνες με παρόμοια χρώματα σε ένα ξωτικό. Αυτό σας βοηθά να κρατήσετε το χαμηλό αριθμό χρωμάτων, ιδανικά κάτω από 256 χρώματα, ώστε να χωρέσει σε ένα PNG8.

• Εάν χρησιμοποιείτε ένα favicon.ico, κρατήστε το μικρό, κατά προτίμηση υπό 1K.

Χρησιμοποιήστε κλιμακώνονται σωστά / αλλαγή μεγέθους της εικόνας.

Πάντα προσπαθώ και να χρησιμοποιήσετε τις εικόνες αλλάζουν μέγεθος, δηλαδή, δεν χρησιμοποιούν μια μεγαλύτερη εικόνα από ό, τι χρειάζεστε μόνο και μόνο επειδή μπορείτε να ορίσετε το πλάτος και το ύψος σε HTML. Εάν θέλετε να εμφανίσετε ένα 100px X 100px εικόνα στη σελίδα, τότε δεν χρησιμοποιούν κλίμακα κάτω 200x200px εικόνα.

Χρησιμοποιήστε Προοδευτική Εικόνες

Ο web browser καθιστά ήδη Εικόνες σταδιακά. Για να γίνει ακόμα καλύτερη, με εξαίρεση απλά GIF ή PNG εικόνες με το "πλέγμα" επιλογή, ή JPEG φωτογραφίες σας με την «προοδευτική» επιλογή.

Υπάρχει μία διαρκής συζήτηση μεταξύ των χρηστών του ιστού ως προς το εάν η χρήση της προοδευτικής εικόνα είναι μια ευλογία ή ένα εμπόδιο. Επίσης, μια προοδευτική εικόνα ζυγίζει περίπου 20% περισσότερο από ό, τι μη προοδευτική ομόλογό του. Έτσι, Αν νομίζετε ότι διάταξη χρησιμοποιεί εικόνες που δεν θα εμποδίζουν την εμπειρία χρήστη από το να είναι προοδευτικό, να αισθάνονται ελεύθεροι να το πράξουν.

Συμπεριλάβετε το JavaScript στο κάτω μέρος του εγγράφου HTML

Αν δεν έχετε document.write (ή οποιαδήποτε δυναμική γενιά των περιεχομένων της σελίδας με javascripts) για να εισάγετε μέρος του περιεχομένου της σελίδας στα προγράμματά σας, μετακινήστε το σενάριο περιλαμβάνει δήλωση στο κάτω μέρος της σελίδας, πριν από το τέλος του tag body.
Η HTTP/1.1 προδιαγραφή προτείνει ότι οι browsers κατεβάσετε όχι περισσότερο από δύο συστατικά παράλληλα ανά όνομα. Αν σας εξυπηρετήσουμε τις εικόνες σας από πολλαπλά hostnames, μπορείτε να πάρετε περισσότερες από δύο λήψεις να εκδηλωθούν παράλληλα. Ενώ ένα σενάριο είναι το κατέβασμα, ωστόσο, ο browser δεν θα ξεκινήσει οποιαδήποτε άλλα λήψεις, ακόμη και σε διαφορετικά ονόματα εξυπηρετητών.
Υπάρχουν επίσης τρόποι για να δημιουργήσετε δυναμικά κόμβους SCRIPT και να φορτώσετε απομακρυσμένα σενάρια μετά φορτώνεται η σελίδα χρησιμοποιώντας AJAX.

Εξωτερικούς σας για το JavaScript

Χρήση εξωτερικών αρχεία JavaScript θα οδηγήσει σε ταχύτερη φόρτωση των σελίδων, επειδή τα αρχεία αποθηκεύονται προσωρινά το JavaScript από τον browser. «Inline JavaScript σε HTML έγγραφα πάρει κατεβάσει κάθε φορά που το έγγραφο HTML ζητείται. Αυτό ενδέχεται να μειώσει ουσιαστικά τον αριθμό των αιτήσεων HTTP έκανε, αλλά στη συνέχεια αυξάνει το μέγεθος του εγγράφου HTML. Εξωτερικά το JavaScript είναι αποθηκευτεί προσωρινά από το πρόγραμμα περιήγησης? Το μέγεθος του εγγράφου HTML, χωρίς να μειώνεται η αύξηση του αριθμού των αιτήσεων HTTP.
Σημειώστε ότι, εάν οι χρήστες στο site σας έχει πολλαπλές προβολές σελίδων ανά συνεδρία και πολλές από τις σελίδες σας επαναχρησιμοποιήσει τα ίδια scripts και των stylesheets, υπάρχει μια μεγαλύτερη δυνατότητα να επωφεληθούν από εξωτερικά αρχεία αποθηκεύονται προσωρινά.

Πακέτο JavaScript αρχεία σας

Στην περίπτωση των JavaScripts, σε αντίθεση με CSS, τα αρχεία θα μπορούσε να ανησυχείτε χρησιμοποιώντας κάποια πρότυπο αλγορίθμων που θα έδινε μια μείωση του μεγέθους του αρχείου από την απλή αφαίρεση χώρους ή καρτέλες. Ένα παράδειγμα javascript συσκευαστή μπορεί να βρεθεί εδώ http://dean.edwards.name/packer/

Ξεφορτωθείτε Κάθε αντίγραφο Σενάρια

Είναι πολύ ασυνήθιστο ότι ολόκληρο σενάρια μπορεί να αντιγραφεί, αλλά μια ανασκόπηση από τις δέκα κορυφαίες αμερικανικές ιστοσελίδες δείχνει ότι δύο από αυτούς περιέχουν διπλές σενάριο. Διπλότυπο γραφές, αλλά προφανώς μειώνει την απόδοση, με τη δημιουργία άσκοπων αιτήσεων HTTP και σπατάλη εκτέλεση JavaScript.
Επίσης, σε πολλές περιπτώσεις, αν και τα ονόματα είναι διαφορετικά σενάρια, υπάρχει μια πιθανότητα των διπλών δεσμών ενεργειών εντός της ίδιας σελίδας, λόγω του μεγέθους της ομάδας και τον αριθμό των σεναρίων.

Ελαχιστοποιήστε την πρόσβαση DOM στοιχεία όπου αυτό είναι δυνατό

Πρόσβαση σε στοιχεία DOM με JavaScript είναι τόσο αργή, ώστε να έχουν μια πιο αποτελεσματική τη σελίδα, θα πρέπει:
• Cache αναφορές για πρόσβαση σε στοιχεία
• Ενημέρωση των κόμβων "συνδεδεμένος" και στη συνέχεια προσθέστε τα στο δέντρο
• Αποφύγετε τον καθορισμό διάταξη με JavaScript

Ξεχωριστή Συμπεριφορά Περιεχόμενο και παρουσίαση

Ακριβώς όπως ξεχωριστή παρουσίαση (CSS / XSLT) από Περιεχομένου (XHTML / XML), θα πρέπει επίσης να χωρίσουμε Συμπεριφορά (Javascript). Αυτό ονομάζεται διακριτικό Javascript. Ακριβώς όπως έχουμε συνδεθεί με εξωτερικά αρχεία CSS, θα πρέπει να συνδεθεί με εξωτερικά αρχεία javascript.

Αντί της σκληρής συμπεριφοράς κωδικοποίησης στο περιεχόμενο (π.χ. onmouseover, onclick, κλπ.), η συμπεριφορά θα πρέπει να προστεθεί δυναμικά στοιχεία, κατηγορίες, και μοναδικά στοιχεία (ταυτότητες), χρησιμοποιώντας το DOM. Το θεμελιώδες έγγραφο, το περιεχόμενο, πρέπει να περιέχει μόνο έγκυρο XHTML / XML και δεν javascript.
Η Javascript πρέπει να αυξάνουν το περιεχόμενο με την προσθήκη συμπεριφορά. Το περιεχόμενο θα πρέπει να παραμείνει χρήσιμο και αξιοποιήσιμο χωρίς javascript (ή χωρίς την πλήρη υποστήριξη javascript).

Έχω αποθηκεύσει αυτό το άρθρο ηλικίες πίσω, έτσι Συγνώμη! Ι dont θυμάμαι την πηγή ... αλλά φάνηκε χρήσιμο, για εμάς που πρέπει να γνωρίζουν σχετικά με το κοινό για τους οποίους έχουμε αναπτύξει το site για ... Εδώ, λοιπόν, είναι

Βάρος σελίδων μπορεί να χρησιμοποιηθεί για τον προσδιορισμό του χρόνου λήψης για μια συγκεκριμένη σελίδα σε διάφορες ταχύτητες σύνδεσης στο Internet. Ως παράδειγμα, ο ακόλουθος πίνακας δείχνει τα download φορές για τρεις διαφορετικές σελίδες σε μια σειρά από δημοφιλείς ταχύτητες σύνδεσης.

Οφέλη από τη μείωση του βάρους της σελίδας;

Η θετική επίδραση της μείωσης των παροχών βάρος σελίδα δύο ιδιοκτήτες της ιστοσελίδας και των καταναλωτών. Δυνητικά οφέλη περιλαμβάνουν:

1. Σελίδες φορτώνονται πιο γρήγορα. Η πιο προφανής επίπτωση από τη μείωση του βάρους της σελίδας είναι ότι οι σελίδες της ιστοσελίδας σας θα φορτώσει γρήγορα για τους επισκέπτες, ανεξάρτητα από την ταχύτητα σύνδεσης τους.
2. Κάτω χρόνοι φόρτωσης της σελίδας δημιουργήσουν πιο άνετα οι επισκέπτες. Οι επισκέπτες είναι λιγότερο πιθανό να απογοητευτείτε και να πάνε αλλού εάν οι σελίδες σας φορτώνουν γρήγορα. Από την άλλη πλευρά, αργή φόρτωση σελίδων είναι ένας από τους πιο σίγουρους τρόπους για να χάσετε τους επισκέπτες και τους πιθανούς πελάτες.
3. Ταχύτερη φορτίο φορές θα συμβάλει στην αύξηση της μετατροπής. Περισσότεροι επισκέπτες θα μείνουν στο δικτυακό σας τόπο πλέον. Περισσότερα από αυτά θα καταλήγουν να κάνουν αγορές, να υπογράψει επάνω για το ενημερωτικό δελτίο σας, ή το βιβλίο-σήμανση site σας.
4. Το εμπορικό σήμα σας αντίληψη θα ενισχυθεί. Επιστρέφοντας πελάτες και για πρώτη φορά τους επισκέπτες θα είναι περισσότερο διατεθειμένοι να περιγράψει το site σας (και επιχειρήσεις) ως "επαγγελματίας" εάν οι σελίδες σας φορτώνουν γρήγορα.
5. Σελίδες με καθαρό, στερεά κώδικας θα πρέπει να αναπροσαρμόζονται συχνά πιο αποτελεσματικά από φυσικές μηχανές αναζήτησης.
6. Σελίδες βελτιστοποιημένη για το βάρος μπορεί να σώσει πραγματικά έξοδα εύρος ζώνης υψηλής επισκεψιμότητας ιστοσελίδες. 100.000 σελίδες το καθένα ζυγίζει 150 Kb θα απαιτήσει διπλάσιο εύρος ζώνης από τον ISP σας από 100.000 σελίδες κάθε βάρος, 75 Kb. Για παρόχους που χρεώνουν για το εύρος που χρησιμοποιείται ή συνταξιούχοι, η μείωση αυτή μπορεί να δημιουργήσει σημαντική εξοικονόμηση στις δαπάνες του εύρους ζώνης.

Εξετάστε τα ακόλουθα στοιχεία, που δημοσιεύθηκαν σε μια έκθεση

Αν XML / XSL Μεταμορφώνει είναι Domian σας, τότε υπάρχουν φορές που θέλουμε ενός κομματιού της Δυναμικής κωδικό που πρέπει να τεκμήριο της βιβλιοθήκης (που πρέπει να γίνουν επαναχρησιμοποιήσιμα). Τι εννοώ, ίσως θα μπορούσε να γίνει πιο σαφές με αυτό το σενάριο παράδειγμα.

Φανταστείτε ότι η δημιουργία ενός δικτυακού τόπου (και χρησιμοποιώντας XML, XSL transfroms φυσικά) και οι περισσότερες από τις σελίδες θα έχει Ενότητα Σχόλια. Καλά! τότε είτε να αντιγράψετε ή να επικολλήσετε αυτόν τον κώδικα σε κάθε σελίδα προτύπου (που Ι dont έχουν πει, αλλά κάνει συντήρηση και να επαναλάβει έναν εφιάλτη) ή ακόμα καλύτερα, μπορείτε να δημιουργήσετε ένα περιλαμβάνει το αρχείο που θα μπορούσε να τραβηχτεί όπου ποτέ θέλετε στη σελίδα σας ( α) ...
Έτσι Πώς δημιουργούμε ένα XSL περιλαμβάνει το αρχείο και να το συμπεριλάβει μέσα σε ένα άλλο αρχείο XSL; Εδώ είναι το πώς ...

Ακριβώς για να κάνει τα πράγματα σαφή ... εδώ είναι γρήγορη λίστα των αρχείων που θα δημιουργηθούν ... εδώ θα είμαστε, συμπεριλαμβανομένων πληροφοριών σχετικά με τα φρούτα και τα λαχανικά σε μια σελίδα που ονομάζεται μητρική τροφίμων.

1. food.xml - xml αρχείο δεδομένων επί των οποίων η μετατροπή θα πρέπει να εφαρμοστεί
2. food.xsl - κύριο αρχείο XSL, η οποία θα μετατρέψει food.xml μας
3. inc_fruits.xsl - XSL περιλαμβάνει αρχείο που θα καταστήσει τα φρούτα δεδομένα
4. inc_vegtables.xsl - XSL περιλαμβάνει αρχείο που θα καθιστούν τα δεδομένα vetetables

Ι dont ότι έχω εξηγήσει και πολύ, οι κωδικοί για τις παραπάνω στοιχεία, θα είναι αυτονόητα ...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ Body>
</ Html>
</ Xsl: template>
</ Xsl: stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Κατεβάστε όλα τα παραπάνω αρχεία εδώ (252 λήψεις)