Fast enough? 9 tips for web page optimization

<p>The world is large, and the internet isn't fast everywhere. Web optimization needs to ride along with user needs. Don't waste your time with performance if it will not enhance user experience. Instead, try to study how users interact with your application. Ask yourself: what is the first thing a user needs to see on my page? Does (s)he see it? If it doesn't match, it is time to make some improvements.</p><p>So here are some optimizations to keep in mind:</p><h2 id="1-avoid-inline-js-css-files-">1. Avoid Inline JS/CSS Files:</h2><pre><code><h1 style="color:blue;margin-left:30px;">This is a heading.</h1> </code></pre><p>It's a bad practice to write inline code. Not only because code is more difficult to read and maintain, but also because of performance. Browsers can't cache inline JS/CSS. So every time users access your page, the content will be downloaded.</p><h2 id="2-avoid-unnecessary-plugins-">2. Avoid Unnecessary Plugins:</h2><p>Do you need this plugin? jQuery is crucial on this project? Analyze your plugins and try to remove what is not necessary. If you use a responsive front-end framework like <a href="http://getbootstrap.com/">Bootstrap</a> or <a href="http://foundation.zurb.com/">Foundation</a>, keep in mind that it has a lot of stuff. Download a customized version only with the main components you need.</p><h2 id="3-avoid-http-requests-concatenating-files-">3. Avoid HTTP Requests concatenating files:</h2><p>Always avoid unnecessary requests. See the example below:</p><pre><code>http://www.vinta.com.br/js/requests.js http://www.vinta.com.br/js/github.js http://www.vinta.com.br/js/slider.js </code></pre><p>Merge the files:</p><pre><code>http://www.vinta.com.br/js/custom-scripts.js </code></pre><p>Use concatenation tools to merge files and minification to reduce file sizes. A good way to integrate concatenation and minification in your projects is <a href="http://gruntjs.com/">Grunt</a>. It is a JavaScript task runner with literally hundreds of plugins to choose from. Specifically for concatenation and minification it has <a href="https://www.npmjs.com/package/grunt-contrib-concat">grunt-contrib-concat</a> (concatenation) and <a href="http://www.npmjs.com/package/grunt-contrib-uglify">grunt-contrib-uglify</a> (minification).</p><h2 id="4-javascript-only-at-the-end-">4. JavaScript Only at the End:</h2><p>JavaScript blocks additional resources from being downloaded. Putting it at the bottom of the document will let all other elements (like images and CSS) load, giving the perception of improved performance.</p><h2 id="5-async-vs-defer-attributes">5. async vs defer attributes</h2><p>The HTML <code><script></code> element allows you to define when the JavaScript code on your page should start executing.</p><p>The HTML file is rendered right after it has finished the download.</p><pre><code><script src="sample.js"></script> </code></pre><figure class="kg-card kg-image-card"><img src="https://vinta-cms.s3.amazonaws.com/media/filer_public/17/cb/17cb9a43-1b9e-46e7-a3af-226d1ad0e0b2/web-opt-script1.png" class="kg-image" alt="web-opt-script1.png"></figure><p><code>async</code> scripts will be executed asynchronously as soon as it is available. It will pause the HTML parser to execute it when it has finished downloading.</p><pre><code><script async src="sample.js"></script> </code></pre><figure class="kg-card kg-image-card"><img src="https://vinta-cms.s3.amazonaws.com/media/filer_public/53/b3/53b39842-521b-4ac0-ad84-fa1aec4d0f7a/web-opt-script2.png" class="kg-image" alt="web-opt-script2.png"></figure><p><code>defer</code> downloads the file during HTML parsing and will only execute it when the page has finished rendering.</p><pre><code><script defer src="sample.js"></script> </code></pre><figure class="kg-card kg-image-card"><img src="https://vinta-cms.s3.amazonaws.com/media/filer_public/05/02/0502cfb5-2a05-47f4-a94a-7710ed442df9/web-opt-script3.png" class="kg-image" alt="web-opt-script3.png"></figure><p><strong>If you need to support IE9</strong>, don't use <code>defer</code> in your project and include your scripts with no attribute if execution order is a concern.</p><h2 id="6-appropriate-images-for-each-device-">6. Appropriate images for each device:</h2><pre><code>//Lower-resolution images @media (max-width:440px) { .image { background-image: url(image-lower.jpg); } } //Hi-resolution images @media (min-width:441px) { .image { background-image: url(image-hi.jpg); } } </code></pre><p>The idea is to have users downloading only those images that are best suited for their devices. In the case of mobile devices, this would be lower-resolution images that can be quickly rendered.</p><h2 id="7-css3-instead-of-images-">7. CSS3 Instead of images:</h2><p>Programmers tend to use more images than necessary.</p><figure class="kg-card kg-image-card"><img src="https://vinta-cms.s3.amazonaws.com/media/filer_public/8d/47/8d476c0e-f37a-46d2-8a31-9ffacd780d2c/buttons-example.png" class="kg-image" alt="buttons-example"></figure><p>A lot of elements like buttons, rounded corners, shadows, gradient, etc., can be rendered by CSS3, reducing the number of HTTP requests and speeding uploading time.</p><h2 id="8-image-sprites">8. Image Sprites</h2><p>The idea behind sprites is to combine images into a single image file, reducing the number of HTTP requests.</p><figure class="kg-card kg-image-card"><img src="https://vinta-cms.s3.amazonaws.com/media/filer_public/d6/b1/d6b1c31d-b5f2-49ec-9d8e-1c9d67c47213/sprites.png" class="kg-image" alt="sprites"></figure><p>The image is displayed by using the CSS <code>background-position</code> property.</p><pre><code><ul> <li class="img-amazon"></li> <li class="img-meteor"></li> <li class="img-angular"></li> </ul> </code></pre><pre><code>//Defining image size. .ul .li { background-image: url("http://www.vinta.com.br/images/sprites.png"); width: 150px; height: 150px; } //Optional class. .img-amazon { background-position: 0; } .img-meteor { background-position: 150px 0; } .img-angular { background-position: 300px 0; } </code></pre><p>For more information about <code>background-position</code> access <a href="http://developer.mozilla.org/pt-BR/docs/Web/CSS/background-position">MDN</a>.</p><h2 id="9-testing-performance">9. Testing Performance</h2><p>Web optimization tools for reference:</p><ul><li><strong><a href="https://developers.google.com/speed/pagespeed/">PageSpeed:</a></strong><br>PageSpeed tools analyze and optimize your site following web best practices.</li><li><strong><a href="http://yslow.org/">Yahoo! YSlow:</a></strong><br>YSlow analyzes web pages and why they're slow based on Yahoo!'s rules for high-performance web sites</li></ul><p>Do you like to join the discussion? Please, leave your comments below.</p>

Fast enough? 9 tips for web page optimization

Join the Tech Forward newsletter

Related articles

Scaling Software: How to Manage Cache Consistency and Invalidation in Distributed Environments

DjangoCon US is back!

The case against over-engineering