• Bitrix how to install the compression module. Principles for increasing page loading speed. Free installation of the free Bitrix module from the archive

    This note will not directly concern the capabilities of Bitrix. I'll give you a few basic principles for increasing website speed: 1. It is necessary to reduce the number of HTTP requests.

    A website is not only an html page, but also images, javascript files, and style files. If we reduce the number of these files, we will increase the page loading speed.

    • style files can be combined into one file
    • javascript files can also be combined into one file
    • No matter how strange it may sound, pictures can also be combined into one file called a css sprite.

    On the first point, everything has already been done in the latest versions of the 1C-Bitrix engine. You can enable these checkboxes in the main module settings.

    This way, during development, you can have as many files with styles as you need, and when put into production, turn on the checkboxes and all css files will be merged into one.

    Regarding the second point, unfortunately, I did not find any ready-made solutions, although in essence the solution should be exactly the same as for CSS.

    To implement the third point, you must immediately make the layout based on one picture. Many articles have been written about the technology of creating CSS sprites.

    2. All CSS files must be placed at the beginning of the page

    If you use the standard Bitrix approach to integrating layout into design, then this will be the case for you.

    3. Minimizing the code of CSS files and JS files, reducing the size of pictures, GZIP compression of the page.

    To minimize the code of a CSS file, you just need to check the box “Create a compressed copy of the combined CSS file.” To minimize the code of javascript files, there are special solutions like http://yuilibrary.com/download/yuicompressor/.

    In order to enable GZIP compression in Bitrix, you just need to install the Compression module from the standard Bitrix package.

    4. Use Google Libraries to download large javascript libraries

    At least to the extent possible. Jquery should definitely be connected this way.



    //

    5. Be sure to use your browser cache.

    To do this, you need to install mod_expires for apache2 and configure it in such a way that static information is cached by the browser for a very long time. For example, like this:

    // file code.htaccess

    Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 0 minutes" ExpiresByType image/ico "access plus 1 years" ExpiresByType text/css "access plus 1 years" ExpiresByType text/javascript "access plus 1 years" ExpiresByType image/gif "access plus 1 years" ExpiresByType image/jpg "access plus 1 years" ExpiresByType image/jpeg "access plus 1 years" ExpiresByType image/bmp "access plus 1 years" ExpiresByType image/png "access plus 1 years"

    This concludes my brief overview of the basic principles of increasing page loading speed.

    The 1C-Bitrix system is considered one of the most popular not only in the Russian market, but also among foreign developers. It is distinguished by ease of website management and flexible settings.

    The 1C-Bitrix system runs websites of various complexity: news resources, business cards, social networks, online stores and the like. However, over time, website pages load more and more slowly.

    The problem in optimizing Bitrix images, which is not carried out using the CMS itself, is solved by third-party tools. In order for images to take up less space and load faster, you need to use a plugin for optimizing images in Bitrix. This plugin is the OptiPic solution.

    Optimizing site images on Bitrix via OptiPic allows you to speed up site loading by 2-3 times. Practice has already shown that resources actually load faster, which is noted by users themselves. This is especially critical for online stores and catalogs, because buyers may not wait for the page to load and go to a competitor’s resource.

    Image compression in Bitrix

    OptiPic - a Bitrix image compression plugin built on an algorithm that identifies technical data in an image file and removes it. This data does not affect the quality and appearance of the picture, but nevertheless affects its size. In some cases, technical data takes up up to 90% of the file size.

    Therefore, OptiPic is used to compress images in Bitrix. The average reduction in image size is 70%. In addition, it is enough to configure the plugin once and in the future it will work both with images that have already been uploaded to the server, and with images added to the site.

    Compression of website images on Bitrix occurs in the background and does not require large computing power. Nothing will happen for resource visitors except for faster page loading. Administrators will be able to see how, over time, the plugin frees up space on the server’s hard drive by reducing the size of images.

    Optimizing images in Bitrix will no longer require manual intervention from the administrator. Set up OptiPic and all necessary operations will be carried out automatically.

    What is image compression

    Image optimization is a special processing of a graphic file in order to minimize its size without losing visual quality.

    To carry out this procedure, there are a large number of quite complex algorithms. However, they are all based on the same basis - from the graphic file you need to remove all the service data located there (for example, the name of the program that stores this file, etc.), and also, using special programs, combine/smooth similar colors.

    As a result, we get the same image, which has not visually changed in any way. However, the volume (weight) of this file in bytes will be much less than the original. If this processing is done correctly, the image file can be reduced by up to 98% without losing image quality.

    This means that images on site pages will load many times faster after they are optimized.

    What does image optimization mean for your website?
    • Saving disk space.
    • Speed ​​up page loading.
    • Increased conversion.
    • Better website ranking in search results.

    It has been proven that website acceleration can improve behavioral factors, as well as increase website conversion (increase sales). The longer the site page takes to load, the fewer buyers will be able to perform certain targeted actions there. If your Internet site is not fast enough, you have every chance of missing out on your potential income. Speeding up the operation of an Internet resource will make it possible to improve conversion and thereby significantly increase revenue and attract more customers.

    Advantages of the OptiPic service
    • There are no monthly payments.
    • Full automation.
    • Providing free assistance with connection.
    • The Internet address (URL) of the compressed images does not change, they will continue to be stored on your website.
    • To connect and use the service you do not need to have special programming or administration skills.
    • There are no restrictions on image size in the system.
    • Technical support in Russian.
    How can image optimization speed up your website?

    A page of any website most often consists of:

    • images;
    • html code (text content, layout, markup);
    • video;
    • javascript scripts with logic executed from the browser side;
    • css files with page styles.

    Such an item as images takes up most of the total volume on the site pages and is the “heaviest” part of the pages. Reducing (optimizing) images will undoubtedly make loading any Internet resource significantly faster.

    Accordingly, if you change (to a lesser extent) the volume of images, all pages of the site will begin to load much faster.

    Compressing images on a website will make it possible to reduce their volume to 75-98% without losing their visual quality.

    How to connect OptiPic to 1C-Bitrix for image compression? Register and add your website to your personal account

    After registration, you will receive an email with a link to activate your account. Follow that link. Next, on our website, go to your personal account Profile > My Sites, click the Add site button, enter the URL of your site and click the Connect site button.

    Download and install the module on your website

    After adding the site to the system, go to the Download module tab.

    There you need to download the archive with the module. Unpack this archive and upload it to your website (in the root folder of the site). As a result, your site should have a site folder in the root of the site with the following structure:

    • website
      • config.php
      • help.php
      • index.php

    And after that the following page should be available on the site: http://your-domain..php.

    Select a tariff and top up your account

    After you upload the module to your site, you will need to activate site indexing in the site settings and wait for the first site indexing by the OptiPic system - it takes place within 24 hours. If you want to speed up the process, submit your site manually for indexing.

    After the first indexing is completed, the system will show how many images (how many gigabytes?) were found on your site. This can be done on the Compression Index and Statistics tab.

    Now that you know the volume of images on your site, purchase the package you need and enable compression in the site settings.

    Today we will learn how to correctly format header.php in Bitrix, how to correctly connect .css and .js in header.php, how to correctly connect jQuery in Bitrix and how to enable compression of .css and .js files in Bitrix.

    This is a very acute and pressing problem today. The most frequent requests for modules are related to errors in scripts when jQuery is not connected correctly in header.php, and very often several jQuery are connected, but only one jQuery library should be connected on all pages of the site and the very first one among all site template scripts.

    There was a record on one site, I counted 7 connected jQuery libraries, the person was simply tired of looking for errors and there was nowhere to go, when the problem was found and fixed, everything began to work correctly on the site.

    So, how should the file be formatted correctly? header.php website template in Bitrix:

  • There should be no spaces or hyphens before
  • The page encoding is set before
  • After the title all meta tags are listed
  • After the meta tags, the site's .css styles are included
  • And only after connecting .css styles are all .js scripts connected
  • If possible, IE comments should be placed at the very end before the closing tag.
  • Example header.php for HTML 5 DOCTYPE