5 Ways to Make Your Website Easier and Faster by David Walsh
I propose to the readers of "Habrakhabr" a translation of the article “5 Ways to Make Your Site Smaller and Faster” mentioned in the dyge from David Walsh’s blog.
Confession : Once a week I say that I sincerely wish I was a child who spent his working day cutting grass and doing gardening. Why? Because at the end of the day, the hosts could say "the grass is cut, the work is complete." As web developers, we can never say it, or we can? A website can always be more efficient - there are always strategies for decreasing the number of bytes. Is always. As long as we are inwardly aware of this and constantly repeat, “the site is not good enough.” In order to be a great developer every day, we are almost doomed to feel / feel that our work seems to be not good enough - what a negative way to live our lives!
The good news is that there are several ways to get an incredible increase in performance and load time components of the site. Here are five utilities that you can complete within minutes to make your site faster for all users!
')
Image compression is the final free pass to improve site loading times. Photoshop and other image editing applications are shamefully inefficient at compressing images, as a result - for each request there are a lot of additionally downloaded kilobytes. The good news is that there are many utilities for eliminating extra kilobytes! My favorite Mac utility is ImageOptim . (a comment of the translator: analogs for the world of Windows )
You can use gzipping as many times as you like, but the extra kilobytes in the original image is waste, so the optimization utility you can use is just as valuable as any other strategy!
CloudFlare , a service that has a free starter pack, offers many improvements:
This is not an advertisement - davidwalsh.name uses Cloudflare and tried all its features. My website saved gigabytes for data transfer thanks to CloudFlare. Even when my server was not working, CloudFlare served the web pages flawlessly. When you use CloudFlare, it's a complete victory.
Iconic fonts have been popular for several years, now I’ll omit the list of reasons why we know they are amazing. The problem is that we lazily loaded whole files with icon fonts while we used only single icons of them. And although we rarely think about it, font files are usually quite massive / heavy. In emotions this is: :(. Fortunately, there are utilities such as Fontello .
Fontello allows you to select individual icons from different icon fonts and thus make your file with icon fonts smaller per kilobyte.
We love our dynamic scripts, but why should we serve dynamic pages where static ones can be managed? This practice is often found in WordPress - the content of the post / post usually does not change, but advertising and comments can.
Answer? Finding key points when a page can change, and generating static content for those key points. A cute WordPress utility called Really Static that accomplishes this feat for a blogging platform. Of course, your non-WordPress CMS system will require special / custom page generation, but the speed benefits will be worth it.
If you have content such as ads or links to add to the current content that you need to change in such static pages, in this case, consider JavaScript and AJAX requests. The pages will be static, and in order to get this changing content / content, JavaScript will be presented via the CDN service - in this case, the AJAX request will depend only on the speed of the CDN service!
A well-known symptom of a site is slowness, the number of requests generated by each page. In the past, we fixed this problem with CSS / sprite images , javascript and css resource combinations, and using URIs for data . You can also use LazyLoad resources or simply embed them into the page:
The above example loads syntax highlighting only if elements on the page require highlighting. But what if the CSS syntax highlighting is just a few lines? You can save an extra query and embed it in the page:
Or you could combine CSS highlighting together in your main CSS file for the site - is that not an advantage!
As you understand, your site can get these incredible ease, speed and advantages if you are ready to make an effort in a few minutes to implement these improvements. And when you think about the number of visitors coming to your site, and the number of page views, you will understand why these micro-optimizations are so important!
Upd.
glyph fonts are replaced by the more well-established term iconic fonts , thanks pepelsbey
Confession : Once a week I say that I sincerely wish I was a child who spent his working day cutting grass and doing gardening. Why? Because at the end of the day, the hosts could say "the grass is cut, the work is complete." As web developers, we can never say it, or we can? A website can always be more efficient - there are always strategies for decreasing the number of bytes. Is always. As long as we are inwardly aware of this and constantly repeat, “the site is not good enough.” In order to be a great developer every day, we are almost doomed to feel / feel that our work seems to be not good enough - what a negative way to live our lives!
The good news is that there are several ways to get an incredible increase in performance and load time components of the site. Here are five utilities that you can complete within minutes to make your site faster for all users!
')
1. Image Compression - ImageOptim
Image compression is the final free pass to improve site loading times. Photoshop and other image editing applications are shamefully inefficient at compressing images, as a result - for each request there are a lot of additionally downloaded kilobytes. The good news is that there are many utilities for eliminating extra kilobytes! My favorite Mac utility is ImageOptim . (a comment of the translator: analogs for the world of Windows )
You can use gzipping as many times as you like, but the extra kilobytes in the original image is waste, so the optimization utility you can use is just as valuable as any other strategy!
2. CloudFlare
CloudFlare , a service that has a free starter pack, offers many improvements:
- CDN services
- JavaScript, CSS and HTML minimization
- Backup service during idle time
- DDOS Prevention
- Improved location based service
This is not an advertisement - davidwalsh.name uses Cloudflare and tried all its features. My website saved gigabytes for data transfer thanks to CloudFlare. Even when my server was not working, CloudFlare served the web pages flawlessly. When you use CloudFlare, it's a complete victory.
3. With Fontello we use fewer characters from icon libraries.
Iconic fonts have been popular for several years, now I’ll omit the list of reasons why we know they are amazing. The problem is that we lazily loaded whole files with icon fonts while we used only single icons of them. And although we rarely think about it, font files are usually quite massive / heavy. In emotions this is: :(. Fortunately, there are utilities such as Fontello .
Fontello allows you to select individual icons from different icon fonts and thus make your file with icon fonts smaller per kilobyte.
4. Creating static files
We love our dynamic scripts, but why should we serve dynamic pages where static ones can be managed? This practice is often found in WordPress - the content of the post / post usually does not change, but advertising and comments can.
Answer? Finding key points when a page can change, and generating static content for those key points. A cute WordPress utility called Really Static that accomplishes this feat for a blogging platform. Of course, your non-WordPress CMS system will require special / custom page generation, but the speed benefits will be worth it.
If you have content such as ads or links to add to the current content that you need to change in such static pages, in this case, consider JavaScript and AJAX requests. The pages will be static, and in order to get this changing content / content, JavaScript will be presented via the CDN service - in this case, the AJAX request will depend only on the speed of the CDN service!
5. LazyLoad resources ... or embedded?
A well-known symptom of a site is slowness, the number of requests generated by each page. In the past, we fixed this problem with CSS / sprite images , javascript and css resource combinations, and using URIs for data . You can also use LazyLoad resources or simply embed them into the 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 the CSS syntax highlighting is just a few lines? You can save an extra query and embed it in the page:
<style type="text/css"> <?php include('media/assets/highlight.css'); ?> </style> </head> Or you could combine CSS highlighting together in your main CSS file for the site - is that not an advantage!
As you understand, your site can get these incredible ease, speed and advantages if you are ready to make an effort in a few minutes to implement these improvements. And when you think about the number of visitors coming to your site, and the number of page views, you will understand why these micro-optimizations are so important!
Upd.
glyph fonts are replaced by the more well-established term iconic fonts , thanks pepelsbey
Source: https://habr.com/ru/post/250785/
All Articles