Site loading speed. 4 main factors.

Site loading speed. How to increase download speed? Main problems.

Recommended site loading speed Google - 2 seconds. (and now look at your speed)

(How to check website loading speed?The easiest and fastest way is to open developer tools CTRL+SHIFT+INext, select the “Network” tab, then refresh the page, to see the download speed you need to refresh the page, Refresh without cache: you need to press CTRL + F5 / CTRL + R. And below will be the download speed.)

Check site loading speed
using a service from Google: PageSpeed ​​Insights

(infographic taken from seoprofy ©2014)

The main points that affect the most:

1. Cache
2. css (styles)
3. JS (scripts)
4. Images (their weight, size - yes, exactly the HxW size, Meta data - yes, there is such a thing, this is their information such as: Date, title, topic, etc.)

In order not to paint a lot of unnecessary information about small moments that do not particularly affect or have a negligible effect, I will not write about them.

#1 CASH

caching (orcache) is a buffer (a place) where any data is stored. In our case, these are Pictures, code, styles, and more.

The easiest what you can do yourself is enable caching on hosting.
(If you have Ukraine.com.ua hosting, then you need to go to “site settings” -> “basic settings” and there will be an item “Caching” and there you select the required amount of time for which your site will be cached. From myself I recommend setting it to 2 weeks - with this caching period, google page speed insights adds a lot of points.)

other methods related to htaccess, browser tags, etc. can be found on the Internet for quite a few articles and I don’t see the point in repainting. You can read about the types of caching in the article on Habré.

#2 CSS (styles)

CSS - (Cascading Style Sheets - cascading style sheets).
What can be done with styles?
Well Firstly squeeze them.
Secondly reduce the number of files, i.e. merge as much as possible to reduce the number of calls to the server.
Thirdlyembed the main styles that affect the display of the visible part of the first screen directly into , and leave the rest in the file.

I also leave a couple of useful links:

• css compression services
• how to compress css files

#3 JS (scripts)

Here we also have several ways to optimize scripts.

1. Postpone script loading. Puff it as low as possible, put it behind or even lower sometimes it helps, sometimes it's not an option. But point number 2 comes to the rescue.
2. ASYNC – asynchronous script loading. This is done using the “async” parameter

   There are more details about async here.
   A little more information about JS and its influence.

3. Minor point.
   JS can also be compressed. Also merge into 1 file.

#4 Pictures

You can always do three things: Look at the fire, look at the water and optimize the pictures.

The topic is quite extensive, so I will try to give you only important information.

Optimize weight.

How? Through a program or service.

• Program for mass work with pictures Fast Stone Imagewith it you can
  Bulk resize images. How and what already google there is not difficult.
  Download Faststone Image.
  
• Service to reduce the size of images - Panda. Or rather TinyPNG & TinyJPG.
  The main advantage of ONLINE. Just upload the files and get back in a compressed version - The quality does not suffer at all (it's Magic).
  Links: tinypng.com & tinyjpg.com

Optimize Size.

The size as I wrote above can be changed using the program fast stone image.
The size is Height x Weight (Height by Width).

Example:

(If you want to know more about this, you can read Google's help on this topic. ARTICLE from Google, but I warn you it is nerdy to some extent)

For example we have 2 images:
1) Weight 100kb, Size 500x500
2) Weight 100kb, Size 2500x2500
It would seem that what difference does it make, they weigh the same, therefore, loading them should be equally complicated or simple, but it wasn’t there if you check it by google page speed insgiht, it will still swear at a higher resolution image.

Summarizing: Size matters. Weight too. (the rest is not so important, but according to the arguments of some experts it also has an impact, now I'm talking about Image Meta Data)

I didn’t really write anything about meta data, well, there’s nothing to write here ...
Just clear all the meta data for all images, according to the legend, you can reduce the size by 2 times. I found out recently (about the effect of file size, I thought it was quite insignificant).

Briefly about the release:

• most common website loading problems
• options to solve them
• what you need to pay attention to so that everything is fine

Let's go to the video:

P.S.
If you have any questions or disagree with something, write about it in the comments.