1 / 30

TAKE CARE ABOUT WEBSITE HEALTH

TAKE CARE ABOUT WEBSITE HEALTH. Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013. HTML / CSS Validation Website Performance Optimization . Overview. HTML / CSS Validation. Powered By: http ://validator.w3.org/. 1- Missing “alt” tag in “ img ” tag. HTML Validation.

jett
Download Presentation

TAKE CARE ABOUT WEBSITE HEALTH

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TAKE CARE ABOUT WEBSITE HEALTH • Presented By: Zulqarnain Abdul Jabbar • Date: 25th March 2013

  2. HTML / CSS Validation • Website Performance Optimization Overview

  3. HTML / CSS Validation • Powered By: http://validator.w3.org/

  4. 1- Missing “alt” tag in “img” tag HTML Validation • 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

  5. 2- end tag for "img" omitted, end tag for "input" omitted, but OMITTAG NO was specified HTML Validation • 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/>

  6. 3- value of attribute "align" cannot be "absmiddle"; must be one of "top", "middle", "bottom", "left", "right" HTML Validation • 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.

  7. 4- required attribute "type" not specified in <script> HTML Validation • 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

  8. 5-StartTag: invalid element name if (noredirect.indexOf("no_redirect=true") < 0){ HTML Validation • 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"

  9. 6- duplicate specification of attribute HTML Validation • Be careful while writing something • 7- there is no attribute "displayText" • We should not use non-existing attributes

  10. 8- end tag for "ul" which is not finished, - document type does not allow element "ul" here; assuming missing "li" start-tag HTML Validation • Add empt <li> in ul tag • change <ul>$text</ul> to $text

  11. 9- & throwing error in iframeurl - character "&" is the first character of a delimiter but occurred as data <option value="11" >Food & Water</option> HTML Validation • In code use &amp; in URL and then use urldecode(URL) or try to use just &amp; without decoding • Use &amp; in iframe URL • Use html encoding / decoding for the values stored into / fetched from database or just do not use.

  12. 1- list-style-position none is not a list-style-position value CSS Validation • 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.

  13. 3- 9999px is not a z-index value CSS Validation • 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;

  14. 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 Conclusion

  15. Suggested By: • http://gtmetrix.com/ • https://developers.google.com/speed/pagespeed/insights • http://www.webpagetest.org/ (for browser specific testing) Website Performance Optimization

  16. 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. Speed Matters

  17. 1- Images optimization 2- Combined images using CSS sprites 3- Set images dimension 4- Minify Java scripts 5- Setting Keep-Alive 'On' for HTTP connections 6- Enable gzip compression 7- Leverage Browser Caching Overview

  18. 1- Images optimization Website Performance 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/

  19. 2- Combined images using CSS sprites Website Performance Optimization • Downloading multiple images incurs additional round trips. • A site that contains many images can combine them into fewer output files to reduce latency.

  20. 3- Set images dimension Website Performance Optimization • 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.

  21. 4- Minify Java scripts Website Performance Optimization • "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.

  22. 5- Setting Keep-Alive 'On' for HTTP connections Website Performance Optimization • 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’.

  23. 5- Setting Keep-Alive 'On' for HTTP connections Website Performance Optimization • Configuration directives: (httpd.conf) • KeepAlive On • MaxKeepAliveRequests 100 • KeepAliveTimeout 20

  24. 6- Enable gzip compression Website Performance Optimization • 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

  25. 6- Enable gzip compression Website Performance Optimization • For Apache: (.htaccess)(check Mime Types using httpd.conf) • # compress text, HTML, JavaScript, CSS, and XML • AddOutputFilterByType DEFLATE text/plain • AddOutputFilterByType DEFLATE text/html • AddOutputFilterByType DEFLATE text/xml • AddOutputFilterByType DEFLATE text/css • AddOutputFilterByType DEFLATE application/xml • AddOutputFilterByType DEFLATE application/xhtml+xmlAddOutputFilterByType DEFLATE application/rss+xml • AddOutputFilterByType DEFLATE text/javascriptAddOutputFilterByType DEFLATE application/x-javascript • # remove browser bugs • BrowserMatch ^Mozilla/4 gzip-only-text/html • BrowserMatch ^Mozilla/4\.0[678] no-gzip • BrowserMatch \bMSIE !no-gzip !gzip-only-text/html • Header append Vary User-Agent

  26. 7- Leverage Browser Caching Website Performance Optimization • 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.

  27. Website Performance Optimization • For Apache server (.htaccess) • ## EXPIRES CACHING ## • ExpiresActive On • ExpiresByType 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 ##

  28. http://gtmetrix.com/wordpress-optimization-guide.html A WordPressplugin 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! GTmetrix for WordPress

  29. How to use GIMP http://www.makeuseof.com/tag/optimize-images-web-gimp/ GIMP

  30. Thank You for your time

More Related