Incomedia Website X5

Incomedia WebSite X5 speed optimization (tutorial part 16)

 

 

In this video tutorial, we will test the speed of the site and increase it. To begin, I recommend to read this article «How to speed up a website in 2019: technical checklist».

Video lesson

 

Videos look better with 720 HD quality. This and other video tutorials can be found on YouTube and Vimeo.

Testing

Let's start with testing. I use several services. Here are some of them:

  1. Google PageSpeed Insights.
  2. GTmetrix.
  3. Pingdom Website Speed Test.
  4. Webpagetest.

There are many more tools, but these will be enough. In most cases, only Google PageSpeed Insights will be sufficient.

In video tutorial you see WebSite X5 2019.2.7 Pro (64 bit). In the picture below you see the main page of the test site. This is a modified page of my site from video lessons. We will work with it. But remember that speed optimization requires working with all pages. Some of the actions will affect the entire site as a whole. Some actions have to be done for each page separately.

WebSite X5
WebSite X5

Tests will help to understand the main reasons for the slow loading of the site page. If you do not understand any values or recommendations regarding the speed of the site, then look for the answer in the help system or on the forum of the service in which you tested the site.

Note that test results depend on various factors. For example, they depend on the load on your server at the time of testing.

My site:

  • WebSite X5 2019.2.7 Pro.
  • PHP – 5.6.
  • Caching static content – disabled.
  • Images – not optimized.
  • PageSpeed Module – disabled.
  • OPcache – disabled.
  • HTTP/2 – enabled.
  • Data compression – enabled.

Below you can see my page test results before optimization.

Google Pagespeed Insights (Mobile) before optimization
Google Pagespeed Insights (Mobile) before optimization
Google Pagespeed Insights (Desktop) before optimization
Google Pagespeed Insights (Desktop) before optimization
Gtmetrix Pagespeed before optimization
Gtmetrix Pagespeed before optimization
Gtmetrix Yslow before optimization
Gtmetrix Yslow before optimization
Gtmetrix Timings before optimization
Gtmetrix Timings before optimization
Pingdom Website Speed Test before optimization
Pingdom Website Speed Test before optimization
Webpagetest before optimization
Webpagetest before optimization

You can also download GTmetrix detailed report under this article above the comments.

Speed optimization

To optimize the speed of the site, I suggest this "technique".

  1. Test site speed (save results).
  2. Make a complete copy of the project of your site and place it in a safe place. Also remember everything that you change on the hosting.
  3. Remove all unnecessary items from each page of the site.
  4. Optimize all images on each page.
  5. Upload web site to the Internet. Clear your browser's cache. Check out the site (if there are errors, correct them and repeat this step). Test site speed (save results).
  6. Enable PHP 7.x.
  7. Clear your browser's cache. Check out the site (if there are errors, correct them and repeat this step). Test site speed (save results).
  8. Enable caching of static files (Leverage browser caching).
  9. Enable data compression.
  10. Enable PageSpeed Module.
  11. Clear your browser's cache. Check out the site (if there are errors, correct them and repeat this step). Test site speed (save results).
  12. Enable other options to optimize site speed. For example OPcache, HTTP/2 and other «options».
  13. Clear your browser's cache. Check out the site (if there are errors, correct them and repeat this step). Test site speed (save results).

I will little bit explain some of these steps.

Why do I need to constantly test the site? It's simple. Changing PHP version or activating some PageSpeed Module options may break your site. If you do everything gradually, then it will be easier for you to understand what exactly broke your site.

Remove all unnecessary items from each page of the site. Take a close look at each page of the site from start to finish. Delete all unnecessary objects, pictures and other elements. This also applies to all third-party codes: counters, chats, and so on. Some  objects have lazy loading option. It is useful for speed. For example, Jssor Slider.

Optimize all images on each page. Before adding images into WebSite X5, prepare them. In article «How to Optimize Images for Web and Performance» you will find more information on this topic.

  • Make the image the same width and height as it will be on the site (in pixels).
  • Optimize image quality. The picture quality should be as good as possible, and the picture size in kilobytes should be as small as possible. You can use Adobe Photoshop, Gimp, Paint.NET and other similar tools. Plus, after these tools, I recommend using FileOptimizer.
  • Try not to use WebSite X5 Image Editor (figure below). It greatly increases the size of images.

Note that currently WebSite X5 converts images before uploading them to the site. In most cases, the size of images in kilobytes is significantly increased compared to optimized images. Very rarely, if I know that the site will not change for a long time, I upload pictures from the hosting to a computer and optimize them with FileOptimizer. After that, again upload to the hosting. This is very inconvenient, but can be used in certain situations.

Website X5 Image Editor
Website X5 Image Editor

Enable PHP 7.x. At the moment for sites made using WebSite X5 need hosting with PHP 5.6 – 7.3. PHP 7.0 and newer versions work faster than 5.6. Contact technical support of your hosting and ask how you can enable the new version of PHP?

Enable caching of static files (Leverage browser caching). Contact technical support of your hosting and ask how you can enable caching of static files (Leverage browser caching). Sometimes you just need to enable the option in the hosting control panel, and sometimes you need to add a special code to the file «.htaccess». Read more about this in the article «PageSpeed: Leverage browser caching». Below in the article I will show the code from my «.htaccess» file. It may not be suitable for your hosting.

Enable data compression. Contact technical support of your hosting and ask how you can enable data compression? Sometimes you just need to enable the option in the hosting control panel, and sometimes you need to add a special code to the file «.htaccess». Read more about this in the article «PageSpeed: Enable gzip compression». Below in the article I will show the code from my «.htaccess» file. It may not be suitable for your hosting.

Enable PageSpeed Module. Contact technical support of your hosting and ask them, do they have a PageSpeed Module on the hosting and how can it be configured? What is a PageSpeed Module you can read in this article. Here is the documentation for this module. Please note that not all hosting providers provide this feature. Some hosting providers provide this service for a fee.

Here these hostings which support PageSpeed Module (I worked with them):

  • Hosting Ukraine. Control panel in English, server in Australia, Germany, Poland, Russia, Singapore, USA, Ukraine, Finland, France. Support PHP 7.x, HTTP/2, data compression, Leverage browser caching, OPcache. OPcache – for extra charge.
  • Jino.

I’m not completely sure, but these hosting seem to support PageSpeed Module:

My hosting «Hosting Ukraine» supports PageSpeed Module and provides such tools.

  • Combine all JavaScript into one file. Combining all loadable on the page JavaScript files into one allows reducing page load time by reducing the necessary number of HTTP requests and improving the efficiency of compression.
  • Combine all CSS styles in one file. Combining all loadable on the page CSS styles into one allowes reducing page load time by reducing the necessary number of HTTP requests and improving the efficiency of compression.
  • Move CSS styles before JavaScript scripts. Correction of the order of CSS and JavaScript allows us to better parallelize their downloading and speed up rendering of the page by the browser.
  • Preliminary rezolving of DNS. It adds to a response instructions for modern browsers to perform conversion of DNS names for all external resources on the page. It is useful if the images, styles and scripts are connected to pages from other domains.
  • Minimize JavaScript. It accelerates page loading time by reducing the size of the JavaScript scripts by removing comments and unnecessary spaces.
  • Minimize CSS. It accelerates page loading time by reducing the size of the CSS styling by removing comments, extra spaces and reducing names of colours.
  • Optimize the CSS in style attribute. To produce all included optimizations of CSS also in style attributes (only if they contain pictures url).
  • Deferred loading of images. It allows you to speed up the initial page loading, delaying downloading of images as long as they are not visible. The images are loaded dynamically as you scroll the page.
  • Combine gaps. Combining multiple spaces and line breaks within the most tags (except the pre, textarea, script and style). It reduces the final page size and the time required to download it.
  • Move CSS to a head. Moving CSS styles in the head section allows you to visually accelerate the browser page rendering and avoid of the redrawing effect in some browsers if styles are prescribed after the announcement of the element itself.
  • Remove unnecessary quotation marks. Removing unnecessary quotes in tag attributes can significantly reduce the size of the page and improve the compression ratio.
  • Move small external CSS to HTML. Moving external CSS files up to 1 KB into HTML allows reducing the number of server requests needed to display the page.
  • Move small external JavaScript into HTML. Moving the external JavaScript files with the size up to 1 KB into HTML allows reducing the number of server requests needed to display the page.
  • Optimize URL in href and src attributes. It reduces the size of HTML page by converting absolute URL in href and src attribute to the relative ones. It may cause problems if your pages are embedded in other sites.
  • Coordinate META tags with HTTP headers. If the information in the http-equiv meta tags of the page does not match the data in the headers HTTP, the browser should re-parse the page. Enabling this option coordinates the headers with the contents of meta tags to avoid it.
  • Enable caching of images. Enables caching of images in a browser for a long time, allowing the developer to make changes without the need to rename the files.
  • Enable caching of JavaScript. Enables caching of JavaScript in a browser for a long time, allowing the developer to make changes without the need to rename the files.
  • Enable caching of CSS. Enables caching of CSS in a browser for a long time, allowing the developer to make changes without the need to rename the files.

Enable other options to optimize site speed. Contact technical support of your hosting and ask them what tools they have to optimize the speed of the site. Be prepared for the fact that some of these tools can be paid.

My «.htaccess» (it may not be suitable for your hosting):

# START GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

# START DEFLATE COMPRESSION
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE "application/atom+xml" \
"application/javascript" \
"application/json" \
"application/ld+json" \
"application/manifest+json" \
"application/rdf+xml" \
"application/rss+xml" \
"application/schema+json" \
"application/vnd.geo+json" \
"application/vnd.ms-fontobject" \
"application/x-font" \
"application/x-font-opentype" \
"application/x-font-otf" \
"application/x-font-truetype" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/otf" \
"font/ttf" \
"font/opentype" \
"image/bmp" \
"image/svg+xml" \
"image/vnd.microsoft.icon" \
"image/x-icon" \
"text/cache-manifest" \
"text/css" \
"text/html" \
"text/javascript" \
"text/plain" \
"text/vcard" \
"text/vnd.rim.location.xloc" \
"text/vtt" \
"text/x-component" \
"text/x-cross-domain-policy" \
"text/xml"
</IfModule>
# DEFLATE COMPRESSION

# START ENABLE KEEP ALIVE
<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>
# END ENABLE KEEP ALIVE

# START EXPIRES CACHING #
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/ogg "access plus 1 year"
ExpiresByType video/webm "access plus 1 year"
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType text/x-component "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresDefault "access 1 month"
</IfModule>
# END EXPIRES CACHING #

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\.(css|js)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=2592000, public, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers

# START – Disable server signature #
ServerSignature Off
# Disable server signature #

FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
</filesmatch>
</ifmodule>

<IfModule mod_setenvif.c>
BrowserMatch "MSIE" force-no-vary
BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary
</IfModule>

<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>

Optimization results

I did not delete anything from the page of my site. I did not find any problems after optimization.

My site:

  • WebSite X5 2019.2.7 Pro.
  • PHP – 7.3.
  • Caching static content – enabled.
  • Images – optimized.
  • PageSpeed Module – enabled.
  • OPcache – enabled.
  • HTTP/2 – enabled.
  • Data compression – enabled.

Below you can see my page test results after optimization.

Google Pagespeed Insights (Mobile) after optimization
Google Pagespeed Insights (Mobile) after optimization
Google Pagespeed Insights (Desktop) after optimization
Google Pagespeed Insights (Desktop) after optimization
Gtmetrix Pagespeed after optimization
Gtmetrix Pagespeed after optimization
Gtmetrix Yslow after optimization
Gtmetrix Yslow after optimization
Gtmetrix Timings after optimization
Gtmetrix Timings after optimization
Pingdom Website Speed Test after optimization
Pingdom Website Speed Test after optimization
Webpagetest after optimization
Webpagetest after optimization

You can also download GTmetrix detailed report under this article above the comments. Let's look at the main indicators of speed before and after optimization.

 

Before

After

Google PageSpeed Insights (mobile)

Overall rating (more is better)

49

79

First Contentful Paint (s)

3,3

2,3

Speed Index (s)

7,2

4,1

Time to Interactive (s)

8,7

5,8

First Meaningful Paint (s)

3,3

2,3

First CPU Idle (s)

4,5

4,1

Max Potential First Input Delay (ms)

350

280

Google PageSpeed Insights (desktop)

Overall rating (more is better)

75

95

First Contentful Paint (s)

1

0,7

Speed Index (s)

2,8

1,5

Time to Interactive (s)

2,8

1,7

First Meaningful Paint (s)

1

0,7

First CPU Idle (s)

1

1

Max Potential First Input Delay (ms)

80

60

GTmetrix

PageSpeed Score (more is better) (%)

76

90

YSlow Score (more is better) (%)

62

81

Fully Loaded Time (s)

2,1

1,6

Total Page Size (mb)

1,4

1,15

Requests

56

50

TTFB (ms)

212

500

First paint (s)

1,5

1

Contentful paint (s)

1,5

1

Pingdom Website Speed Test

Performance grade (more is better)

74

85

Load time (ms)

828

691

Page size (mb)

1,5

12

Requests

53

47

Webpagetest

Load Time (s)

2,613

1,892

First Byte (s)

0,294

0,247

Start Render (s)

0,8

0,7

Speed Index (s)

2,731

2,179

Last Painted Hero (s)

2,9

2,3

Fully Loaded – Time (s)

3,245

1,892

Fully Loaded – Requests

57

52

Keep-alive Enabled (score, A is the best result)

A

A

Compress Transfer (score, A is the best result)

A

A

Compress Images (score, A is the best result)

A

A

Cache static content (score, A is the best result)

F

A

Effective use of CDN (score, A is the best result)

-

-

 

As you can see, in most cases, I managed to improve the result.

In my case, the list of the most effective actions looks like this (first most effective):

  1. PageSpeed Module.
  2. Image Optimization.
  3. Caching static content
  4. PHP 7.3.
  5. OPcache.

Links from the lesson

In the following video lessons, we will look at other useful objects that will help you during site creation.

If you have any questions, you can ask them in the comments. I will try to answer as quickly as possible.

Article author – Aleksej Khoroshevskij

Aleksej Khoroshevskij Since about 2008 to the present day, I have been developing websites on Joomla and WebSite X5. I also provide services in their modernization, SEO promotion, PPC advertising (Ads), protection against hacking and website speed up.

I defended the dissertation (PhD) in speciality of «Information Technology».

Here you will find my contacts and information about me. And here you will find my portfolio, as well as my services and prices.

Similar articles

 

Useful links:

Title Description
pdf Performance Report (before optimization) WebSite X5 2019.2.7 Pro (64 bit)
pdf Performance Report (after optimization) WebSite X5 2019.2.7 Pro (64 bit)