Optimizing site speed is always a priority, since there is a lot of competition between sites and you need to constantly improve your resource. Website speed optimization is taken care of by both website owners (bloggers) and large companies that are engaged in SEO promotion, as they understand that this is one of the basic parameters.
At the moment, there are a huge number of services for analyzing the speed of site loading and identifying problem areas, but despite this, most sites are still not optimized in a proper way.
In this article and the checklist, I will try not to be tied to a specific CMS, but to write in such a way that the solutions are suitable for any site.
I want to draw your attention: if you check your site only in the Google PageSpeed Insights service, then in the process of studying the checklist you will understand that a large number of parameters are hidden there and are not shown, despite the fact that it still affects the site’s loading speed.
Step 1. Determine # 34; frames # 34; optimization of site speed.
Under the concept # 34; Website speed optimization framework # 34; I understand this amount of CSS, JS, media and other files that are loaded on your site.
Having defined # 34; framework # 34 ;, we will know the final one to go to. And will help us find the data # 34; site speed optimization framework # 34; service created by Jonathan Fielding; www.performancebudget.io.
Watch a short video on working with this site, where I clearly showed what you need to choose in order to determine # 34; site speed optimization framework # 34 ;:
Stage 2. Find out the real speed of the site.
As I wrote above, Google PageSpeed Insights is a good tool for testing website speed optimization, but still it # 34; gives # 34; only superficial advice. You can first check with this tool, and then move on to more detailed statistics that the following services give:
Be careful when doing testing using these services, because loading times may differ due to the fact that the server of your site and the server on which the test is running are far from each other.
The WebPagetest service allows you to select a testing server and browser. This service shows in the form of diagrams which resources (CSS, JS) are the most in percentage on your site. What pleases the most is the detailed statistics on queries in the form of graphs. There is also information about which files GZIP compression is applied to and it becomes immediately clear whether everything was correctly specified in the .htaccess settings.
But the GTmetrix service allows you to see a graph of file downloads, and in addition, everything shows detailed tips for optimizing every nuance on the site. And here everything is broken down into more detailed optimization points.
Knowing the real information about your site, now you can compare this figure with the one where the framework for optimizing site speed was shown.
And only now you can use the checklist below in full measure. In this checklist, I consider only those optimization methods that do not require additional investments from you in terms of money, but only desire and a little perseverance are needed to go through and optimize each item.
(Checklist) Self-optimization of site speed.
1. Image optimization.
Use images of exactly the resolution you need on the page.
Often there are situations when images are used in which the resolution is large (for example, 800x600px), and only a thumbnail is used on the page (for example, 300x225px). This error is especially common when creating galleries. Use only the appropriate image resolution for your situation.
This will reduce the number of requests to the server. There are online solutions now: css.spritegen.com, iconizr. So are the solutions for collectors (for Gulp; gulp-svg-sprites, for Grunt; grunt-svg-sprite, for Webpack; Webpack SVG sprite loader).
There are both online solutions here: TinyPNG, Kraken.io. Likewise automated build solutions: Gulp; gulp-imagemin, gulp-pngquant; Grunt; grunt-contrib-imagemin; Webpack; imagemin-webpack-plugin.
2. Reduce the number of requests.
Use SVG sprites and PNG sprites.
I wrote about this in the block # 34; Image Optimization # 34; which is above.
As I said earlier; this will reduce the number of requests to the server. Build plugins (for Gulp; gulp-concat-css, for Grunt; grunt-concat-css, for Webpack; css-concat-loader).
Build plugins (for Gulp; gulp-concat-js, for Grunt; grunt-contrib-concat, for Webpack; webpack-uglify-js-plugin).
Anything that can be loaded without querying the database, download without using it; static. Since it takes time for requests and responses, it would be logical if we reduce this indicator as much as possible.
3. Optimizing CSS and JS.
Compress all CSS files.
Online solutions: CSS Compressor, CSS Minifier. Build plugins: Gulp; gulp-clean-css; Grunt; grunt-contrib-cssmin; Webpack; clean-css-loader.
Needed between tags lt; stylegt; and lt; / stylegt; insert the most important CSS properties. That is, exactly those who are responsible for displaying the first screen on the site. Because the user sees this part of the site at the very beginning. And then load the rest of the CSS from the file, and then after the JS.
These parameters are indicated in the address through the sign? V = 1.0.1 (question).
I hope you already understood that this was only part of the online checklist for self-optimizing the site and its loading speed. I decided to go into all the details in optimizing the download speed. If there are additions to the article, I will definitely supplement it, as well as prepare the next part of the checklist.
If you know an interesting solution that allows you to speed up page loading, please write about it in the comments, we will share useful materials together and together we will make the Internet even faster and more comfortable!