Posted by Veronica Rebagliatte
on August 24, 2011
80% of the end-user response time is spent on the front-end. (YSlow Team)
By following these best practices we can have a great impact over the performance of our sites and applications.
In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.
In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.
Posted by Juan Pablo
on October 15, 2010
I want to share with you a compilation of topics you should know if you are planning on developing a successful web application. This list is just a collection of the best suggestions I read from this discussion on Stack Overflow. All credit goes to all the people who contributed on that thread, I’m just picking the best topics from there.
All the practices mentioned fall into the following categories: Security, Performance, Interface, SEO, Maintenance and Productivity.
This is my favorite topic, if you ask me what is my best advice about security this is it: Never trust user input (that means cookies too!)
Other advices mentioned were…
Techniques on making our site lighter and faster.
- Optimize images – don’t use a 20 KB image for a repeating background
- Learn how to gzip/deflate content
- Combine/concatenate multiple stylesheets or multiple script files to reduce number of browser connections and improve gzip ability to compress duplications between files
- Take a look at the Yahoo Exceptional Performance site, lots of great guidelines including improving front-end performance and their YSlow tool. Google page speed is another tool for performance profiling. Both require Firebug installed.
- Use CSS Image Sprites for small related images like toolbars (see the “minimize http requests” point)
- Busy web sites should consider splitting components across domains.
- Static content (ie, images, CSS, JavaScript, and generally content that doesn’t need access to cookies) should go in a separate domain that does not use cookies, because all cookies for a domain and it’s subdomains are sent with every request to the domain and its subdomains. One good option here is to use a Content Delivery Network (CDN).
- Utilize Google Closure Compiler for JavaScript and other minification tools
Interface
- Be aware that browsers implement standards inconsistently and make sure your site works reasonably well across all major browsers. At a minimum test against a recent Gecko engine (Firefox), a Webkit engine (Safari, Chrome, and some mobile browsers), your supported IE browsers (take advantage of the Application Compatibility VPC Images), and Opera. Also consider how browsers render your site in different operating systems.
- Staging: How to deploy updates without affecting your users.
- Don’t display unfriendly errors directly to the user
- Don’t put users’ email addresses in plain text as they will get spammed.
- Build well-considered limits into your site
- Learn how to do progressive enhancement
- Always redirect after a POST.
SEO
- Consider URLs, a URL design with REST in mind could make exposing APIs easier in the future. Definitely much easier to get your URLs right the first time then to change them in the future and deal with the SEO consequences.
- Avoid links that say “click here”.
- Use “search engine friendly” URL’s, i.e. use example.com/pages/45-article-title instead of example.com/index.php?page=45
- Have an XML sitemap
- Use <link rel=”canonical” … /> when you have multiple URLs that point to the same content
- Use Google Webmaster Tools and Yahoo Site Explorer
- Install Google Analytics right at the start
- Know how robots.txt and search engine spiders work
- Redirect requests (using 301 Moved Permanently) asking for www.example.com to example.com (or the other way round) to prevent splitting the google ranking between both sites
- Know that there can be bad behaving spiders out there
Manteinance and Productivity
- Understand you’ll spend 20% of the time coding and 80% of it maintaining
- Set up a good error reporting solution
- Have some system for people to contact you with suggestions and criticism.
- Document how the application works for future support staff and people performing maintenance
- Make frequent backups! (And make sure those backups are functional)
- Don’t forget to do your Unit Testing.
- Get it looking correct in Firefox first, then Internet Explorer.
- Code from the beginning with maintainability in mind
I hope you learn something new from this list the same way I did.
Thanks to all the people from Stack Overflow community that contributed in such a rich discussion of web development practices.
We will focus on some of those topics in upcoming posts.
Posted by Pablo Ifran
on April 08, 2009
Reducing the number of request made to the server improves the performance of a web application in about 80%.
There are many techniques that allow us to reduce the amount of requests that are made on a page, among them are: the sprites, put the stylesheets on top of the page, javascripts compress, among others.
But what’s offered by Rails to improve the performance of our web application?
It offers a great plugin called bundle_fu (http://code.google.com/p/bundle-fu/)
It allows us with a single request obtain all the javascripts and with another request all the stylesheets (it also offers the possibility of compress javascripts).
Using this plugin is really easy but it’s very powerfull
<% bundle do -%>
<%= javascript_include_tag :default -%>
<%= javascript_include_tag "javascript1" -%>
<%= javascript_include_tag "javascript2" -%>
<%= javascript_include_tag "javascript3" -%>
<%= stylesheet_link_tag "style1" -%>
<%= stylesheet_link_tag "style2" -%>
<%= stylesheet_link_tag "style3" -%>
...
<% end %>
All these javascripts and stylesheets are converted in only two files when the request is processed.
