5 Ways to Make Your Website Easier and Faster by David Walsh
Offers readers "Habrahabr" translation referred to in daydzhete article "5 Ways to Make Your Site Smaller and Faster » from the blog of David Welch (David Walsh)
Confession: Once a week, I say that I am sincerely sorry that I was a child who spent his working day cutting grass and gardening. Why? Because at the end of the day, the hosts could say "the grass is trimmed, the work is completed." As web developers, can we never say this, or can we? A site can always be more efficient - there are always strategies for reducing the number of bytes. Is always. As long as we are internally aware of it, and constantly repeat - "the site is not good enough." To be a great developer every day, we are almost doomed to feel / feel that our work is not good enough - what a negative way to live our lives!
The good news is that there are several ways to get an incredible boost in performance and load time of site components. Here are five useful things you can complete in a few minutes to make your site faster for all users!
Image compression is the final free pass to improve site load time. Photoshop and other image editing applications are shamefully ineffective in compressing images, as a result - for each request there are many additional kilobytes downloaded. The good news is that there are many utilities to eliminate extra kilobytes! My favorite Mac utility is ImageOptim . ( Translator's note: analogues for the Windows world )
You can use gzipping as many times as you like, but extra kilobytes in the source image is a waste, so the optimization utility that you can use is the same valuable strategy as any others!
CloudFlare , a service that has a free starter pack, offers many enhancements:
This is not an ad - davidwalsh.name uses Cloudflare and has tried all of its features. My site saved gigabytes of data transfer thanks to CloudFlare. Even when my server was down, CloudFlare served web pages flawlessly. When you use CloudFlare, this is a complete victory.
Icon fonts have been popular for several years, now I will omit the list of reasons why we know that they are amazing. The problem is that we lazily loaded entire files with icon fonts while we used only single icons from them. And although we rarely think about it, font files are usually quite massive / heavy. In emotions, this is: :(. Fortunately, there are such utilities as Fontello .
Fontello allows you to select individual icons from various icon fonts and thereby make your file with icon fonts less by kilobytes.
We love our dynamic scripts, but why serve dynamic pages where static pages can handle them? This practice is common in WordPress - the content of the post / post usually does not change, but ads and comments can.
Answer? Search for key points when the page may change, and generate static content for these key points. Sweet WordPress utility Really Static which accomplishes this feat for the blog platform. Of course, your non-WordPress CMS system will require special / custom page generation, but the speed advantages will be worth it.
If you have content, such as ads or links to add current content, that you need to change in such static pages, then consider JavaScript and AJAX requests. The pages will be static, and in order to get this changing content / content, JavaScript will be presented through the CDN service - in this case, the AJAX request will depend only on the speed of CDN service!
A well-known symptom of the site is slowness, this is the number of requests generated by each page. In the past, we fixed this issue with CSS / sprite images , combining JavaScript and CSS resources, and using URIs for data . You can also use LazyLoad resources or simply embed them in a page:
The above example loads syntax highlighting only if elements on the page require highlighting. But what if CSS syntax highlighting is just a few lines? You can save the extra request and embed it in the page:
Or you could combine CSS highlighting together in your main CSS file for the site - is this not an advantage!
As you understand, these incredible lightness, speed and benefits can get your site, if you are ready to make efforts within a few minutes to implement these improvements. And when you think about the number of visitors that come to your site, and the number of page views, you will understand why these micro-optimizations are so important!
Upd.
glyph fonts replaced by the more established term icon fonts , thanks pepelsbey
Confession: Once a week, I say that I am sincerely sorry that I was a child who spent his working day cutting grass and gardening. Why? Because at the end of the day, the hosts could say "the grass is trimmed, the work is completed." As web developers, can we never say this, or can we? A site can always be more efficient - there are always strategies for reducing the number of bytes. Is always. As long as we are internally aware of it, and constantly repeat - "the site is not good enough." To be a great developer every day, we are almost doomed to feel / feel that our work is not good enough - what a negative way to live our lives!
The good news is that there are several ways to get an incredible boost in performance and load time of site components. Here are five useful things you can complete in a few minutes to make your site faster for all users!
1. Image Compression - ImageOptim
Image compression is the final free pass to improve site load time. Photoshop and other image editing applications are shamefully ineffective in compressing images, as a result - for each request there are many additional kilobytes downloaded. The good news is that there are many utilities to eliminate extra kilobytes! My favorite Mac utility is ImageOptim . ( Translator's note: analogues for the Windows world )
You can use gzipping as many times as you like, but extra kilobytes in the source image is a waste, so the optimization utility that you can use is the same valuable strategy as any others!
2. CloudFlare
CloudFlare , a service that has a free starter pack, offers many enhancements:
- CDN services
- JavaScript, CSS and HTML minimization
- Backup service during a forced outage
- DDOS Attack Prevention
- Superior Location Based Service
This is not an ad - davidwalsh.name uses Cloudflare and has tried all of its features. My site saved gigabytes of data transfer thanks to CloudFlare. Even when my server was down, CloudFlare served web pages flawlessly. When you use CloudFlare, this is a complete victory.
3. With Fontello we use less characters from icon libraries
Icon fonts have been popular for several years, now I will omit the list of reasons why we know that they are amazing. The problem is that we lazily loaded entire files with icon fonts while we used only single icons from them. And although we rarely think about it, font files are usually quite massive / heavy. In emotions, this is: :(. Fortunately, there are such utilities as Fontello .
Fontello allows you to select individual icons from various icon fonts and thereby make your file with icon fonts less by kilobytes.
4. Creating static files
We love our dynamic scripts, but why serve dynamic pages where static pages can handle them? This practice is common in WordPress - the content of the post / post usually does not change, but ads and comments can.
Answer? Search for key points when the page may change, and generate static content for these key points. Sweet WordPress utility Really Static which accomplishes this feat for the blog platform. Of course, your non-WordPress CMS system will require special / custom page generation, but the speed advantages will be worth it.
If you have content, such as ads or links to add current content, that you need to change in such static pages, then consider JavaScript and AJAX requests. The pages will be static, and in order to get this changing content / content, JavaScript will be presented through the CDN service - in this case, the AJAX request will depend only on the speed of CDN service!
5. LazyLoad resources ... or built-in?
A well-known symptom of the site is slowness, this is the number of requests generated by each page. In the past, we fixed this issue with CSS / sprite images , combining JavaScript and CSS resources, and using URIs for data . You can also use LazyLoad resources or simply embed them in a page:
document.querySelectorAll('article pre').length && (function() {
var mediaPath = '/assets/';
var stylesheet = document.createElement('style');
stylesheet.setAttribute('type', 'text/css');
stylesheet.setAttribute('rel', 'stylesheet');
stylesheet.setAttribute('href', mediaPath + 'css/syntax.css');
document.head.appendChild(stylesheet);
var syntaxScript = document.createElement('script');
syntaxScript.async = 'true';
syntaxScript.src = mediaPath + 'js/syntax.js';
document.body.appendChild(syntaxScript);
})();The above example loads syntax highlighting only if elements on the page require highlighting. But what if CSS syntax highlighting is just a few lines? You can save the extra request and embed it in the page:
Or you could combine CSS highlighting together in your main CSS file for the site - is this not an advantage!
As you understand, these incredible lightness, speed and benefits can get your site, if you are ready to make efforts within a few minutes to implement these improvements. And when you think about the number of visitors that come to your site, and the number of page views, you will understand why these micro-optimizations are so important!
Upd.
glyph fonts replaced by the more established term icon fonts , thanks pepelsbey