Webdev » Blog Archive » CSS Spriting Tips. One of the most effective ways of speeding up a website’s render time is to reduce the number of HTTP requests required to fetch content. An effective method to achieve this is via CSS sprites, which is combining multiple images into one large image and using CSS to only display parts of it. Here’s an example sprite: The purpose of this post is not to show how it makes a site faster, but cover some best practices when creating a CSS sprite. Don’t wait until you are done slicing to begin spriting. The problem with waiting until you’ve built the site is all your CSS and images have already been created. Arrange images opposite of how they will be displayed This tip is a little confusing and I didn’t learn this until I was halfway through creating a large sprite. Put that image to the right of the sprite (see sprite image from above). Avoid ‘bottom’ or ‘right’ in CSS when positioning Give each image plenty of space Here’s an example: Each list item has a graphical number as a background image.
Domainz Search. Cappuccino Web Framework - Build Desktop Class Applications in O. Mockingbird - Untitled. Using YSlow, Apache and Passenger to make your site Faster – Sta. Stage 1. Adding an Expires header to Static Pages with Apache and Phusion Passenger Yslow is a great tool to check how your site compares on several factors relating to speed. I ran a check on Dynamic50.com and I got 76%. I want 100%, so lets get started! Firstly YSlow recommends I add an expires header to my website. Make sure you have all the extras apache has to offer: sudo apt-get install apache2-mpm-prefork apache2-utils libexpat1 ssl-cert apache2-prefork-dev Now lets make sure the required module is enabled: sudo a2enmod expires Now I am going to set the expires header for all assets on this site.
<filesMatch "\. Now what happens if the image changes? Firstly make sure you have rewrite on: sudo a2enmod rewrite Now add the following rewrite rule to your virtualhost: RewriteEngine On RewriteRule (.*)-cb\d+\.(.*)$ $1.$2 [L] And restart apache2: sudo apachectl graceful Hey presto its done! Website Maintenance Tips for Front-End Developers - Smashing Mag. One of the biggest advantages of online media over print is the ability to change, update, and enhance online media at virtually anytime, with virtually no negative side effects.
In fact, if a website or web application does not continually offer its users an ever-evolving and growing experience, that site or application would soon become insecure, unusable, and out of date. Have you beautified your code, validated your markup, and made your XHTML more semantic? Have you implemented basic SEO best practices, spell-checked content, and removed legacy code? Have you ensured JavaScript is unobtrusive, applied the principle of graceful degradation, and minimized the use of Flash? In this article, we will discuss ways that web designers and front-end coders can keep their websites relevant, timely, and accessible long after a site’s launch. 1. After your website has accumulated dozens, maybe even hundreds of pages, content can become old and outdated . 2. Checking Broken Links: Not Just URLs.