It occurs in almost every usability pitfalls top 10 for; long waits are bad for the user experience.
Naturally, the underlying server also contributes to a site's performance, but much more often, “time” can be saved on the page itself. This is where 5 tips to make your website faster.
How do I make my website faster?
Tip 1. As few HTTP requests as possible
Anything with a URL attached to it is, so to speak, an HTTP request. If you have 2 JavaScript files and 3 images on your website, that is already 5 HTTP requests. Browsers—and now I must be careful—can only download 2 resources at a time, according to the HTTP 1.1 specifications. (Exceptions aside)
The HTML of your website is usually downloaded within 20% of the load time; the remainder is spent fetching all your assets: CSS, JavaScript, images, and other media.
Therefore, where possible, combine all your JavaScript files into one large (and compressed) file; do the same for your stylesheets. For images, you could use so-called “CSS sprites”. Do ensure that you retain the original versions and continue to make your changes in them.
Tip 2. Place CSS stylesheets at the top
Perhaps stating the obvious, but it still needs to be said. Placing your CSS in the <head> The tag is, besides the fact that this is the standard according to the W3C, the most optimal location. The browser retrieves this as one of the first and also renders it, which provides visual feedback for your end user. After all, it sees that the server iets is doing.
Tip 3. Put JavaScript at the bottom (or use lazy loading)
JavaScript is becoming increasingly popular and is therefore used more and more frequently on websites; however, they are often this files that hold everything up.
Unlike CSS, you place your JavaScript at the bottom or use the design pattern, for example. lazy-loading, an approach that ensures files or functions are only called up when you actually need them. After all, no one has scrollToTopWithThisCodeHeavyAnimation() needed when loading your website.
To work with tip 1, minify JavaScript files via, for example, JSLint.com or other JavaScript Compressors.
Tip: Not really a tip, but a golden rule to remember: Every character in your file is 1 byte. So even if you are a comment (/* This feature tastes like code spaghetti, yum! */If you have data in your files, this data has to be transmitted over the line, resulting in extra loading time. That is why you compress your files!
Tip 4. Avoid HTTP redirects
HTTP redirect codes such as 301 and 302 direct the browser to the new location of an existing URL that you have requested. This means that, in addition to the old request, the browser must now send a second request to retrieve the new URL. You won't encounter this problem often, but if, for example, you have a script that automatically adds a trailing slash to URLs, it is useful to pay attention to this.
To a browser, “best4u.nl/over-ons/” is a different URL than “best4u.nl/over-ons”, even though the end user sees the same thing.
Tip 5. Make your images slim
Images are also large files, but often essential for your website. Much editing software already has special functions for saving images specifically for the web, but even these can be more effective.
The program The web also contains many small tools., many of which are also free, but there is also a total solution that takes all the above tips into account..
Bonus tip!
Who doesn't love a bonus? To keep an eye on your site, you can, for example, download the YSlow add-on for Firefox, made by Yahoo, or the Page Speed add-on from Google; both require the Firebug add-on (highly recommended in any case!). If you use Chrome, there appears to be Speed Tracer as well, however, I have no experience with it. So please let me know how you like it if anyone uses it!
To return to the “slim images” story, the YSlow addon also checks the size of your images and uses the, acquired by Yahoo, website SmushIt.com to compress your images immediately.
So..
If you didn't catch any of it at all, remember this:
- Each character in your file is 1 byte, and every byte must be downloaded.
- Every file (or rather, every URL) must be retrieved by your browser.
- Reduce (compress/minify) all your files (JavaScript, CSS stylesheets, but also images or even your HTML)
- Combine as many files of the same type as possible into a single file, where possible
- Prevent fetching erroneous files (HTTP error 404, 302, or 301) and thus also empty files.
<img src="">tags!