Post on 27-Dec-2015
TAKE CARE ABOUT WEBSITE HEALTH
Presented By: Zulqarnain Abdul JabbarDate: 25th March 2013
OVERVIEW
• HTML / CSS Validation• Website Performance Optimization
HTML / CSS VALIDATION
Powered By: http://validator.w3.org/
HTML VALIDATION
1- Missing “alt” tag in “img” tag
• Recommended in W3C standards• Serves to display text when image src is
incorrect or image source is not found• Serves to display text when image takes time
to render due to slow internet connection• Use appropriate text to display
HTML VALIDATION2- end tag for "img" omitted, end tag for "input"
omitted, but OMITTAG NO was specified
• Use <img … /> instead of <img… >, <input … /> instead of <input … >
• In HTML the <img> tag has no end tag.• In XHTML the <img> tag must be properly closed.• In new websites doctype declaration is:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">So use XHTML recommended structure.• Pair tags: <div>…</div>, <b>…</b>, <tr>…</tr>• Stand-alone tags: <img … />, <input … />, <br/>
HTML VALIDATION
3- value of attribute "align" cannot be "absmiddle"; must be one of "top", "middle", "bottom", "left", "right"
•The <img> align attribute is not supported in HTML5. Use CSS instead e.g. vertical-align in CSS•The align attribute of <img> is deprecated in HTML 4.01.• Values which are deprecated or have no impact should not be used• We should follow new trends/specification.
HTML VALIDATION
4- required attribute "type" not specified in <script>
• Use <script type=“text/javascript”></script>• Use <style type=“text/css”></style>•type = “application/javascript” has also obsolete• Ajax file uploader uses <script> for some thing in asp.net
HTML VALIDATION
5-StartTag: invalid element name
if (noredirect.indexOf("no_redirect=true") < 0){
• Add // <![CDATA[ … // ]]> inside <script …>…</script>
• A CDATA section is "a section of element content that is marked for the parser to interpret as only character data, not markup"
HTML VALIDATION
6- duplicate specification of attribute
• Be careful while writing something
7- there is no attribute "displayText"
• We should not use non-existing attributes
HTML VALIDATION
8- end tag for "ul" which is not finished, - document type does not allow element
"ul" here; assuming missing "li" start-tag
• Add empt <li> in ul tag• change <ul>$text</ul> to $text
HTML VALIDATION
9- & throwing error in iframe url - character "&" is the first character of a
delimiter but occurred as data<option value="11" >Food & Water</option>
• In code use & in URL and then use urldecode(URL) or try to use just & without decoding
• Use & in iframe URL• Use html encoding / decoding for the values stored into
/ fetched from database or just do not use.
CSS VALIDATION
1- list-style-position none is not a list-style-position value
• Use existing values like ‘inside’, ‘outside’, ‘inherit’.
2- Property zoom doesn't exist
• It's not W3C valid• zoom is only supported by IE till IE8.• display: inline-block; does the same thing, but is
standard code.
CSS VALIDATION
3- 9999px is not a z-index value
• change z-index: 9999px; to z-index: 9999;
2- Unknown dimension 145px\9 - background #fafafa\9 is not a background-color - background repeat-x\000009 is not a background
• change width: 145px\9; to width: 145px;
CONCLUSION
These are all small things, but the validator shows a big number of errors for these small things and create a bad impact on client.
e.g. “alt” and ending tag is missing in img and there are 5 img tags on page then there will be 10 errors on page.
Some are word press generated issues, and some are developers generated issues. We can take care during development and can test website using validator.w3.org after development
WEBSITE PERFORMANCE OPTIMIZATION
Suggested By:- http://gtmetrix.com/- https://developers.google.com/speed/pagespeed/insi
ghts- http://www.webpagetest.org/ (for browser specific
testing)
SPEED MATTERS
Studies show that users leave a site if it hasn't loaded in 4 seconds; keep your users happy and engaged by providing a fast performing website!
Google Page speed and Yahoo YSlow are most widely used tools.
OVERVIEW
1- Images optimization 2- Combined images using CSS sprites3- Set images dimension4- Minify Java scripts 5- Setting Keep-Alive 'On' for HTTP connections6- Enable gzip compression7- Leverage Browser Caching
WEBSITE PERFORMANCE OPTIMIZATION1- Images optimization
• Photoshop and Illustrator creates images of very large size
• This is because, images hold data other than just the pixels we see on the screen.
• Optimizing means saving or compiling your images in a web friendly format
• Suggested Tool: GIMP• Online Tool
http://tools.dynamicdrive.com/imageoptimizer/
WEBSITE PERFORMANCE OPTIMIZATION2- Combined images using CSS sprites
• Downloading multiple images incurs additional round trips.
• A site that contains many images can combine them into fewer output files to reduce latency.
WEBSITE PERFORMANCE OPTIMIZATION3- Set images dimension
• Webpage begins to render a page even before images are downloaded
• If image dimensions are not specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded
• To prevent reflows, specify the width and height of all images, either in the HTML <img> tag, or in CSS.
WEBSITE PERFORMANCE OPTIMIZATION4- Minify Java scripts
• "Minifying" code refers to eliminating unnecessary bytes, such as extra spaces, line breaks, and indentation making files loading fast.
• CSS and HTML can also be minified• Suggested Tools: Closure Compiler,
JSMin, YUI Compressor.
WEBSITE PERFORMANCE OPTIMIZATION5- Setting Keep-Alive 'On' for HTTP
connections• The Keep-Alive extension to HTTP/1.0 and the persistent connection feature of HTTP/1.1 provide long-lived HTTP sessions which allow multiple requests to be sent over the same TCP connection. In some cases this has been shown to result in an almost 50% speedup in latency times for HTML documents with many images.• In http 1.1 servers Keep-Alive is by default ‘on’.
WEBSITE PERFORMANCE OPTIMIZATION5- Setting Keep-Alive 'On' for HTTP
connections• Configuration directives: (httpd.conf)
• KeepAlive On
• MaxKeepAliveRequests 100• KeepAliveTimeout 20
WEBSITE PERFORMANCE OPTIMIZATION6- Enable gzip compression
• Gzip compresses your webpages and style sheets before sending them over to the browser. This drastically reduces transfer time since the files are much smaller.• For IIS: follow http://technet.microsoft.com/en-us/library/cc771003%28WS.10%29.aspx
WEBSITE PERFORMANCE OPTIMIZATION6- Enable gzip compression• For Apache: (.htaccess)(check Mime Types using httpd.conf)# compress text, HTML, JavaScript, CSS, and XML AddOutputFilterByType DEFLATE text/plainAddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/xmlAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE application/xmlAddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xmlAddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE application/x-javascript
# remove browser bugsBrowserMatch ^Mozilla/4 gzip-only-text/htmlBrowserMatch ^Mozilla/4\.0[678] no-gzipBrowserMatch \bMSIE !no-gzip !gzip-only-text/htmlHeader append Vary User-Agent
WEBSITE PERFORMANCE OPTIMIZATION7- Leverage Browser Caching
• Every time a browser loads a webpage it has to download all the web files to properly display the page. This includes all the HTML, CSS, javascript and images.
• Each file makes a separate request to the server
• Browser caching can help by storing some of these files locally in the user's browser.
WEBSITE PERFORMANCE OPTIMIZATION• For Apache server (.htaccess)## EXPIRES CACHING ##ExpiresActive OnExpiresByType 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 text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month“ExpiresByType application/x-shockwave-flash "access plus 1 month“ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" ##EXPIRES CACHING ##
GTMETRIX FOR WORDPRESS
http://gtmetrix.com/wordpress-optimization-guide.html
A WordPress plugin that actively keeps track of your WP install and sends you alerts if your site falls below certain criteria
Run analyses, schedule reports on a daily, weekly or monthly basis, and receive alerts about the status of your site all from within your WordPress Admin!
GIMP
How to use GIMP
http://www.makeuseof.com/tag/optimize-images-web-gimp/
THANK YOU FOR YOUR TIME