Improve pagespeed insights for mobile devices

[Adik]

I wonder how to improve the pagespeed results (mobile devices) on the default Thirtybees template.

 

At the moment I am using a VPS server, hosting hetzner.de, localization Nuremberg (Germany): 4 vCPU's, 16GB RAM, 80GB NVMe SSD.

 

Clean installation of TB 1.0.8 + sample products and categories.

 

Speed results: 98 points for computers, only 68 points for mobile devices.

 

Demo store on https://front.thirtybees.com/ gets 100 points for computers and 98 points for mobile dev.

 

My configuration:

Debian 9.8 
nginx/1.15.12
PHP 7.2.17-1
Memory limit: 128M
Max execution time: 30s

Smarty enabled + Force compilation + Type of caching: file system
CCC enabled (keycdn.com)
Memory cache enabled (APC)

Here is my nginx config:

server {
    listen *:80;
    listen *:443 ssl http2;

    ssl_certificate_key /etc/nginx/ssl/mysite.com.key;
    ssl_certificate /etc/nginx/ssl/mysite.com.pem;

    ssl_protocols TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDH+AESGCM:DH+AESGCM:ECDH+AES256:DH+AES256:ECDH+AES128:DH+AES:ECDH+3DES:DH+3DES:RSA+AESGCM:RSA+AES:RSA+3DES:!aNULL:!MD5:!DSS;

    ssl_dhparam /etc/nginx/ssl/dhparam.pem;

    server_name mysite.com www.mysite.com;

    root /var/www/mysite/public_html;
    access_log /var/www/mysite/logs/access.log;
    error_log /var/www/mysite/logs/error.log;

    index index.html index.htm index.php;

    client_max_body_size 60M;
    fastcgi_buffers 8 16k;
    fastcgi_buffer_size 32k;
    fastcgi_connect_timeout 600;
    fastcgi_send_timeout 600;
    fastcgi_read_timeout 600;

    rewrite ^/api/?(.*)$ /webservice/dispatcher.php?url=$1 last;
    rewrite ^/([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$1$2$3.jpg last;
    rewrite ^/([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$1$2$3$4.jpg last;
    rewrite ^/([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$1$2$3$4$5.jpg last;
    rewrite ^/([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$1$2$3$4$5$6.jpg last;
    rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.jpg last;
    rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.jpg last;
    rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.jpg last;
    rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.jpg last;
    rewrite ^/c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$ /img/c/$1$2$3.jpg last;
    rewrite ^/c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.jpg$ /img/c/$1$2.jpg last;
    rewrite ^/images_ie/?([^/]+)\.(jpe?g|png|gif)$ /js/jquery/plugins/fancybox/images/$1.$2 last;

    rewrite ^/([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$1$2$3.webp break;
    rewrite ^/([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$1$2$3$4.webp break;
    rewrite ^/([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$1$2$3$4$5.webp break;
    rewrite ^/([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$4/$1$2$3$4$5$6.webp break;
    rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.webp break;
    rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.webp break;
    rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.webp break;
    rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.webp break;
    rewrite ^/c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.webp$ /img/c/$1$2$3.webp break;
    rewrite ^/c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.webp$ /img/c/$1$2.webp break;

    try_files $uri $uri/ /index.php$is_args$args;

    add_header Strict-Transport-Security max-age=31536000;

    resolver 127.0.0.1;
    location ~* \.(eot|ttf|woff|eof|woff2|css|js|jsonp|jpg|jpeg|gif|png|ico|svg|webm|mp3|mp4|webp)$ {
        add_header Access-Control-Allow-Origin *;
        # ~ 10 Days
        expires 604800s;
    }

    location ~ \.tpl {
        deny all;
    }

#########
## PHP ##
#########

    location ~ [^/]\.php(/|$) {

        fastcgi_index index.php;
        include /etc/nginx/fastcgi_params;
        # depending on version, could be : include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

    }

 

Edited April 28, 2019 by Adik

[eikichiz]

Maybe adding PageSpeed module to Nginx might help a bit. 

https://developers.google.com/speed/pagespeed/module/?hl=es-419

Also, you could use ramdisk for cache files.

Edited April 28, 2019 by eikichiz

[Petter]

Fine tuned ngnix/pagespeed helps a lot.  compile latest nginx with pagespeed

bash <(curl -f -L -sS https://ngxpagespeed.com/install) \
     --nginx-version latest

https://www.modpagespeed.com/doc/build_ngx_pagespeed_from_source

Make a ramdisk for caching pagespeed files.   -  This makes even old prestashop 1.6.x  fly,,,

Edited May 6, 2019 by Petter
typo

[avabrooks]

I was installed thirtybees for my website https://www/sktthemes.org but the responsive mode is not working. what happens i don't know?

Edited June 6, 2019 by avabrooks

[dynambee]

Regarding @Adik's original question about performance, Thirty Bees uses Cloudflare as a CDN which should result in faster load times. Have you tried using Cloudflare or a different CDN? Cloudflare has a free tier that is quite good. Excellent, considering the cost. 🙂

Edited June 6, 2019 by dynambee

[dynambee]

[deleted double post]

Edited June 6, 2019 by dynambee

[dynambee]

25 minutes ago, avabrooks said:

I was installed thirtybees for my website https://www/sktthemes.org but the responsive mode is not working. what happens i don't know?

When you say "the responsive mode is not working", what do you mean? When I visit your site it seems to work okay, at least the front page does. Maybe clear the Thirty Bees caches in the back office and clear your browser cache & cookies?

Edit: BTW, you should create a new thread for your question rather than adding it to an already existing thread by a different user. Maybe @lesley can move this to a new thread?

[avabrooks]

Thank you, very much dynambee, It was the reason of Thirty Bees caches. When I clear Thirty Bees caches, the responsive mode is working fine. 

[elpak]

Do not just handle speed, load speed is important but there are a hundred more things in onsite SEO before 1 eshop is begin for work