The loading speed of the site is one of the most important indicators when creating a website or Internet applications.
According to the research of various analysts from Google, people usually watch less than the first 25 seconds of the video, and some even less than 10 seconds
, proceeding from this, it would be expedient for you to make the content download as fast as possible, so that users can make a decision, use it further or not.
1. Image optimization
2. Optimizing CSS and scripts
3. General recommendations for site acceleration
Maybe this is a superficial judgment, but people judge sites by the speed of their downloading, it happens often, and we should take this state of affairs for granted.
Optimizing the work of the site, you need to pay special attention to the speed of its download. Fortunately, in WordPress and other engines there are many good plugins that help us in this. However, this article will take into account that your site can be on a different platform than WordPress, so we’ll tell you about several effective ways to optimize the site, regardless of where it is located. Before you start accelerating the site, use the services in the article about online checking your blog’s upload rate to measure the results before and after optimization.
Accelerating the site by image optimization
Optimizing the size of images can be a challenge, and its solution has many options, which can be chosen. It can be file formats, various image optimization tools, better examples of using code and CSS, which will help you save images and interact with them in the best possible way.
Consider an example showing why this is so important. Recently, iOS developers and application developers have discovered that drawing a finished drawing on Retina displays takes 2-4 times more time and space on the mobile phone’s disk space than it was in previous versions with a simple download and launch of the application.
This is not so important for web developers and designers, but it shows how important it is to display images on different platforms. Below are some of the most important, in my opinion, recommendations that must be taken into account when optimizing images for the Internet.
Image formatting is the most important topic, and is so because everyone knows that different formats affect the speed of image loading. However, there is a formed view on this matter, which we can use de facto as a standard. JPEG for photos, GIF for flat images containing a small number of colors, and PNG for all others. Most web designers and developers I know use PNG for almost everything except monochrome and two-color buttons, where they use GIF.
Now you can play with the given specifications, but always remember about the existence of standards while saving small easy pictures and large and heavy. If you are working on a site on a photo, and your images are downloaded longer than on other sites, then try the methods below.
The worst thing we can do and adversely affect the speed of image loading is to allow the code to automatically set the image size. Well, you can say: “Let’s make the code ___ for us.” In this case, they usually say: “You can do better – do it yourself”, and this is really correct. Using indicators such as width = ’60px’ height = ’50px’, you can really reduce the load on the server and the time it takes the image, because the server reads the information about the page and sees the tasks assigned to it. Therefore, make sure that you are on the right track and do so with all your images.
Image optimization tools
Tools are always useful. Well, in most cases … Sometimes they interfere and distract attention, but in this case they really will be very useful. If you manage to find a wonderful tool for image optimization, first of all, please write about it in the comments, as we are always looking for the best. The next few tools are my favorites. I like ImageOptim for Mac and Riot for Windows. They are very different from each other, but they perform one task.
You can put an image in them, and they will find a method for optimizing it, and after that they will give the final result for saving in the same format in which it was downloaded. The tools are really very good and work well. In addition, they have an image analysis function that will indicate which format will be best for it. You can easily say that this is one of the most necessary tools, except for a text and graphic editor, of course.
If you can do this in CSS, then do it in CSS
We often forget that we have such a wonderful tool and, I would say, the CSS system is the most remarkable that a web designer has. Also would add that designers too quickly transfer work in Photoshop (but this is their work and we will not condemn them for this). When designing, you should consider the fact that in addition to the graphical editor, your browser can also help you if you use CSS3. Use all its advantages! Having an instrument where layouts can be performed really quickly, you will no longer need to use HTML to build them later. I’m sure that you can implement everything with CSS!
Reduce, reduce, reduce!
Say In-line “no-no”
If possible, reduce the DOM. For example, you often use jQuery, which creates a lot of DOM elements or reads everything through DOM – all this significantly slows down your site. There is one proverb that I like and it can be used in this case: “If you do it because it’s the only sure way, then there are more sure ways.” You can also say, “If you do it because it’s the only sure way that you know, then you’re doing it wrong,” but this version is a bit harsh.
Search and find what you are looking for. If you work with div elements in HTML just because they are necessary for some small tasks, and only know this single way of working, then it may not be the best way. Now, of course, I understand that the use of div tags is necessary for CSS, but you can find other ways of using them, other than styling.
Just recently, I myself came to this, because I was working on a project on Ruby on Rails. A little earlier this week I did what I wanted for a long time: I translated about 5 div elements into HAML one by one (moved the folder to the folder and then again to the folder). I did it just because I did not know the best way, and as a result, I got some kind of muck that I had to remodel. This work was much more complicated, but I learned a lot of useful things from it, it made me learn a new way to solve similar problems in the future. Move on and get new knowledge! The truth is very close.
The main work to increase the speed of site load
This is such an extensive topic for conversation that it just does not fit into the framework of this article, however, I think deserves special attention. In fact, some of the following important things can be used to speed up the operation of your website or web application.
Slash in links
This is extremely important. When a user opens a link without a slash on a remote server from the site, he must figure out what kind of file or page the specified address will be. The server will be forced to add slashes alone, and it will take milliseconds, and all of them will be summed up. I often meet webmasters who do not think about it, and their unoptimized code does not carry any load, however, in the end, it does matter. If ten years to save quarters, in the end you will have a lot of money, just here, only in a smaller or larger amount, in the end you will encounter traffic problems of your site.
Browsers always look for favicon.ico files in the root directory of your server, so you can safely go ahead and add a favicon. Even if you did something temporary, you need to create a favicon. If favicon is not present, the browser for itself produces an error and only caches such an error in its favicon.ico section, which increases the download time.
Reducing the size of cookies
Cookies mean that the information can be cached on your computer, this allows you to reduce the download speed, but often they are useful when an authorized user session or when tracking you around the Internet (as Google and Facebook does). If you have to work with cookies, make sure they are small and used appropriately. If necessary, make the data shorter in order to shorten the download time.
This topic is very extensive, and, unfortunately, I am not a good expert in it. However, the whole point of caching is simple enough. This is the storage of files (usually with HTML / CSS code) from sites that are frequently visited by your computer and therefore do not need to download them every time.
This technology is really very useful and over the past few years has been widely used by most web applications. There are many solutions for caching, but probably the most common is Memcached. Its job is to save the browser files from the web applications that are open on the computer.
For example, if you have different profiles, it saves the profile image on your computer, and in the next phase all the delights of Memcached work. Your encoded data can be viewed (pulling them out and databases) on the Memcached server and checking the cached version of the files.
And if this file does not exist, then you can insert it into the database so that later it finds itself in the cache. This is a wonderful example of caching large amounts of information and over the past two years it has allowed hundreds of companies to improve the performance of their servers and databases.
Let’s summarize the preliminary results. These are not all ways to improve the speed of downloading sites, but a good start for further searching and improving your work.