10 Best Practices to Speed Up Your Site These 10 best practices will ensure that your site is running at full speed.
1. Caching
If someone put a gun to my head and gave me one way to improve a site’s performance it would be caching. Caching buffers your pages in the server’s memory and so avoids database/server roundtrips, resulting in faster response times and reduced server loads (and thus reduced hosting charges). If your site gets less than 1000 pageviews per day you probably wont see much speed improvement from caching. Your CMS should support caching (if not you should move on ASAP) and you should turn it on. For WordPress, WP Super Cache is the standard and still the best caching plugin.
Still not convinced? Take a look at the response times for a site where I was turning caching on and off, all the spikes in the graph are when I had caching turned off.
2.Use a Content Delivery Network (CDN)
CDN’s were previously very expensive to use with high monthly minimum’s but several new entrants (notably AWS CloudFront and RackSpace Cloud Files) have made it affordable for smaller sites to use CDNs. CDN’s work by caching files at different geographical (‘edge’) locations and therefore reducing the lag users who are geographically far away from the server experience. The larger the files, the greater the benefit of using a CDN, video files are a must but you should also consider hosting images and even css/js files on a CDN.
3. Place Scripts at The Bottom of the Page
Html pages load sequentially, so a reference to an external javascript files placed above the body tag will need to be loaded before the page’s content. This can make the page loading appear sluggish.
Even scripts such as javascript files for AJAX operations used on the page can be placed below the content. This will mean users cannot interact with the site content when it is first displayed, but research by Facebook showed that users prefer to see content as soon as possible even if it cannot be interacted with.
Scripts such as Google Analytics code should always be placed at the bottom of pages.
4. Use External CSS Files
Pages which are heavy with Html load a lot slower than pages which reference CSS for styles, positioning etc. For starters CSS is more compact than Html for positioning and styling page elements, furthermore if it is placed in an external file it will be cached on the user’s browser so that it will not need to be loaded for subsequent page loads in the same session.
You should always review the outputted source code (ie view the rendered page and then look at the source code by right clicking and selecting View Source or similar command) to look for Html which can be replaced by CSS.
5. Host Files on a Separate Domain
A quirk of most browsers is that they can only make a two simultaneous requests to a domain. If your page has several images and external files (such as CSS or javascript files) these must be queued and requested two at a time. Hosting images or files on a separate domain (or a subdomain) allows the browser to make most simultaneous requests and render the page quicker. This is also an additional reason to use a CDN as the files will always be on a separate domain.
6. Minimize Hits to the Database
Why is caching so effective? It reduces requests to both the server for processing and to the database for data. Database operations are very expensive in terms of resources and so you should review your code to minimize hits to the database. COnsider the following:
- Ensure that you minimize the number of connections opened to a database in a visit. Once a database connection is opened, try to perform as many database operations as possible and then close the connection. Do not open and close connections several times unless this is necessary.
- Open database connections as late as possible and close them as early as possible – ie don’t do additional processing that isnt necessary whilst the connection is open, grab the data, close the connection and then do additional processing.
- Review your SQL code to ensure it is efficient – several SQL operations can be performed in one operation and it is not always necessary to execute separate insert and select statements. Ensure you don’t use Select * in your queries – always select just the columns you need.
7. Optimize Images
Maybe it is just my perception, but I always remember this being first on the list of a site optimization checklist and now it hardly even features in a top twenty. I guess there are more interesting things to talk about, but optimizing images is still a major factor in reducing page loads. Use GIF where-ever possible, screenshots and logos are normally a must for GIF. GIF’s max colors in a file is 256 but you can normally reduce this without compromising quality and reduce the filesize. JPGs should be examined even more closely as they are normally larger files, you can set quality anywhere between 1-100 and normally around 65 is an acceptable compromise between quality and size. Similarly you should optimize PNG files for size vs quality. Photoshop’s Save For Devices tool is invaluable for this purpose.
Also, always use the height and width attributes of the <img> tag as this speed up loading, but do not scale and image using these attributes – these should be the actual image size.
8. GZip Everything
Gzip is a popular compression protocol and about 95% of all web traffic is on browsers that support Gzip decompression. Therefore it is safe to say the all your Http traffic delivered to the user’s browser should be Gzip compressed. Putting Accept-Encoding: gzip, deflate in your http header informs Apache that the content is Gzip compressed and it will direct that to the user’s browser with an appropriate header to instruct the browser of the content type and to decompress it. Most site’s will Gzip http pages but css and js files should also be Gzip compressed.
9. Reduce the Number of Http Requests
Http requests are expensive as they require round trips to the web server, consider the following to minimize the number of requests:
- Combine files – dont have several .css or .js files unless this is strictly necessary, just combine these into a single large file.
- Combine images – if you have several images for your site’s design consider combining the images into a single image file and then selecting a segment by using the CSS and properties. The CSS Sprites tutorial on A List Apart is a good tutorial.
10. Examine Your Final Page
This isnt really a separate best practice in itself, but it is probably the most effective way to find page bloat. Too often the optimization is done by reviewing all the sever-side files but when a page is generated there are often new items added to the header which werent noticed or were added by a script that was installed. Starting at the optimization at the final generated page is the best technique. This will also identify html bloat, such as empty tag (empty <span> and <div> tags are infamous for populating pages).
Trung tâm đào tạo Lập Trình Việt
Khóa học lập trình Căn BảnKhóa học lập trình PHP
Khóa học lập trình C#
Khóa học lập trình Java
