10 tips to optimize the speed of your site
The speed and performance of sites is very important for users. If your site is too slow, you will not only lose visitors, but also potential customers. Search engines such as Google take into account the speed of a website in the search ranking, therefore, optimizing the speed of your website, you should take everything into account. Every millisecond is counted. Here are just a few basic and general suggestions in order to improve site performance.
Ajax allows us to build web pages that can be asynchronously updated at any time. This means that instead of reloading the entire page when the user performs an action, we can simply update part of this page.
')
We can use the image gallery as an example. Image files are large and heavy; they can slow down web page loading speed. Instead of loading all the images when the user first visits the web page, we can only show miniature
images and then when the user clicks on them, we can asynchronously request complete images from the server and refresh the page. If the user wants to see several images, he does not have to wait until all the images are loaded. This design pattern is called lazy loading.
Ajax / web development libraries such as jQuery, Prototype, and MooTools can make delayed downloads of content much easier.
When a user first loads your webpage, the browser caches external resources, such as JavaScript and CSS files. Thus, it is better to place such files outside the pages.
Using embedded CSS also increases the rendering time of a web page; By defining everything in your main CSS file, you allow the browser to do less work while rendering the page, as it already knows all the style rules it needs to apply.
As a bonus, using separate JavaScript and CSS files makes site maintenance easier, since you only need to change the global files instead of looking for everything in the code scattered across several pages.
If you think your site is connecting to a database, each time to create the same content, it's time to start using a caching system. With a caching system, your website will only need to create content once, instead of creating it each time,
when the page is visited by users. Don't worry, caching systems periodically update their caches depending on how you configure them - so even constantly changing web pages (like a blog post with comments) can be cached.
Popular content management systems such as WordPress and Drupal have static caching, which converts dynamically generated pages to static HTML files to reduce unnecessary processing by the server. For WordPress, try WP Super Cache . Drupal has a page caching feature in the kernel itself.
There are also database caching systems and server scripts that you can install on your web server (if you have the opportunity to do this). For example, PHP has extensions called PHP accelerators ( PHP accelerators ) that optimize performance through caching and various other methods; One example PHP accelerator is APC . Database caching improves the performance and scalability of your web applications by reducing the work associated with the database's read / write / access processes; memcached , for example, caches the most frequently used database queries.
If the image is originally 1280x900 px, but you need to have 400x280 px, you must resize and re-save the image using an image editor, such as Photoshop, instead of using the width and height attributes in HTML
(i.e. <img width = "400" height = "280" src = "myimage.jpg" />).
This is because, naturally, a large image will always have a larger file size. Instead of resizing an image using HTML, resize it in a graphics editor and then save it as a new file.
This not only makes the text in the image inaccessible for screen readers and completely useless for SEO, but also increases the loading time of your page, because the more images on the page, the harder it is.
If you need to use a lot of your fonts on a website, learn about CSS @ font-face to show text with custom fonts more effectively. It is obvious that the processing of font files is more optimal than the processing of images.
By choosing the correct image format, you can optimize file sizes without losing image quality. For example, if you do not need an image transparency (alpha layer) that offers PNG format, the JPG format often provides images using a smaller file size.
To learn more about how to choose between JPG, PNG, and GIF, read the following guides:
In addition, there are many tools you can use to further reduce the file weights of your images. Check out this list of tools for optimizing your images .
View your source code. Do you really need all the tags you use, or can you use CSS to display on the screen? For example, instead of using <h1> <em> your heading </ em> </ h1>, you can easily use CSS to make the heading italic using the font-style property. Writing effective code not only reduces the size of your HTML and CSS documents, but also makes them easier to maintain.
It would be better if your scripts are loaded at the end of the page, and not at the beginning. This allows the browser to render everything before it starts loading JavaScript. Because of this, your pages will be more responsive, because the way Javascript works is that it blocks everything until it finishes loading. If possible, refer to Javascript right after the closing </ body> tag of your HTML document.
To learn more, read about delayed javascript loading .
The speed of your site is strongly influenced by the position of users relative to the position of the web server. The farther they are, the greater the distance the transmitted data must travel. Having cached content in several, strategically located geographic locations allows you to take care of this problem. A CDN will often make your running costs a little higher, but you will definitely get a speed bonus on your site. Check MaxCDN or Amazon Simple Storage Service (Amazon S3).
Along with using caching systems, you must create websites that use web caching as soon as possible. Web caching is that the files are cached by the browser for later use. The browser caches CSS files, Javascript and images. In addition to the basics, such as putting CSS and JavaScript code that is used on several pages into external files, there are many ways to make sure that you are caching your files in the most efficient way possible.
For example, you can set HTTP response headers , such as Expires and Last-Modified, to reduce the need to re-load certain files when the user returns to your site. To learn more, read about caching in HTTP and
enhancing browser caching .
To set up Expires headers in Apache, read the instructions for adding titles that will expire in the future.
1. Postpone loading content when available.
Ajax allows us to build web pages that can be asynchronously updated at any time. This means that instead of reloading the entire page when the user performs an action, we can simply update part of this page.
')
We can use the image gallery as an example. Image files are large and heavy; they can slow down web page loading speed. Instead of loading all the images when the user first visits the web page, we can only show miniature
images and then when the user clicks on them, we can asynchronously request complete images from the server and refresh the page. If the user wants to see several images, he does not have to wait until all the images are loaded. This design pattern is called lazy loading.
Ajax / web development libraries such as jQuery, Prototype, and MooTools can make delayed downloads of content much easier.
2. Use separate JS and CSS files
When a user first loads your webpage, the browser caches external resources, such as JavaScript and CSS files. Thus, it is better to place such files outside the pages.
Using embedded CSS also increases the rendering time of a web page; By defining everything in your main CSS file, you allow the browser to do less work while rendering the page, as it already knows all the style rules it needs to apply.
As a bonus, using separate JavaScript and CSS files makes site maintenance easier, since you only need to change the global files instead of looking for everything in the code scattered across several pages.
3. Use caching systems
If you think your site is connecting to a database, each time to create the same content, it's time to start using a caching system. With a caching system, your website will only need to create content once, instead of creating it each time,
when the page is visited by users. Don't worry, caching systems periodically update their caches depending on how you configure them - so even constantly changing web pages (like a blog post with comments) can be cached.
Popular content management systems such as WordPress and Drupal have static caching, which converts dynamically generated pages to static HTML files to reduce unnecessary processing by the server. For WordPress, try WP Super Cache . Drupal has a page caching feature in the kernel itself.
There are also database caching systems and server scripts that you can install on your web server (if you have the opportunity to do this). For example, PHP has extensions called PHP accelerators ( PHP accelerators ) that optimize performance through caching and various other methods; One example PHP accelerator is APC . Database caching improves the performance and scalability of your web applications by reducing the work associated with the database's read / write / access processes; memcached , for example, caches the most frequently used database queries.
4. Avoid resizing images in HTML
If the image is originally 1280x900 px, but you need to have 400x280 px, you must resize and re-save the image using an image editor, such as Photoshop, instead of using the width and height attributes in HTML
(i.e. <img width = "400" height = "280" src = "myimage.jpg" />).
This is because, naturally, a large image will always have a larger file size. Instead of resizing an image using HTML, resize it in a graphics editor and then save it as a new file.
5. Do not use images to display text.
This not only makes the text in the image inaccessible for screen readers and completely useless for SEO, but also increases the loading time of your page, because the more images on the page, the harder it is.
If you need to use a lot of your fonts on a website, learn about CSS @ font-face to show text with custom fonts more effectively. It is obvious that the processing of font files is more optimal than the processing of images.
6. Optimize image sizes by using the correct file format.
By choosing the correct image format, you can optimize file sizes without losing image quality. For example, if you do not need an image transparency (alpha layer) that offers PNG format, the JPG format often provides images using a smaller file size.
To learn more about how to choose between JPG, PNG, and GIF, read the following guides:
- The Comprehensive Guide for Saving Images for the Web
- Web Designer's Guide to PNG Image Format
- JPEG 101: A Crash Course Guide on JPEG
In addition, there are many tools you can use to further reduce the file weights of your images. Check out this list of tools for optimizing your images .
7. Optimize your code writing method.
View your source code. Do you really need all the tags you use, or can you use CSS to display on the screen? For example, instead of using <h1> <em> your heading </ em> </ h1>, you can easily use CSS to make the heading italic using the font-style property. Writing effective code not only reduces the size of your HTML and CSS documents, but also makes them easier to maintain.
8. Download JavaScript at the end of the document.
It would be better if your scripts are loaded at the end of the page, and not at the beginning. This allows the browser to render everything before it starts loading JavaScript. Because of this, your pages will be more responsive, because the way Javascript works is that it blocks everything until it finishes loading. If possible, refer to Javascript right after the closing </ body> tag of your HTML document.
To learn more, read about delayed javascript loading .
9. Use Content Delivery Network (CDN)
The speed of your site is strongly influenced by the position of users relative to the position of the web server. The farther they are, the greater the distance the transmitted data must travel. Having cached content in several, strategically located geographic locations allows you to take care of this problem. A CDN will often make your running costs a little higher, but you will definitely get a speed bonus on your site. Check MaxCDN or Amazon Simple Storage Service (Amazon S3).
10. Optimize web caching
Along with using caching systems, you must create websites that use web caching as soon as possible. Web caching is that the files are cached by the browser for later use. The browser caches CSS files, Javascript and images. In addition to the basics, such as putting CSS and JavaScript code that is used on several pages into external files, there are many ways to make sure that you are caching your files in the most efficient way possible.
For example, you can set HTTP response headers , such as Expires and Last-Modified, to reduce the need to re-load certain files when the user returns to your site. To learn more, read about caching in HTTP and
enhancing browser caching .
To set up Expires headers in Apache, read the instructions for adding titles that will expire in the future.
Source: https://habr.com/ru/post/112720/
All Articles