„CSS -Gradient“ + „Background-Image“ = Problem in Chrome

Falls jemand in der aktuellen Version von Chrome (v32) auch folgenden Fehler hat, kommt hier die Lösung …

 

Problem:

background: url('../images/sprites.png') right -204px no-repeat, linear-gradient(to bottom,#d3d3d3 0%,#ffffff 100%);

 


See the Pen HcjCo by Lars Moelleken (@voku) on CodePen.
1

 

fixed:

background-image: url('../images/sprites.png'), linear-gradient(to bottom, #ffffff 0%,#d3d3d3 100%); 
background-repeat: no-repeat;
background-position: right -204px, 0 0;

 


See the Pen gDGFl by Lars Moelleken (@voku) on CodePen.
1

 

nginx + google-pagespeed

ngx_pagespeed

Google hat „pagespeed“ für nginx veröffentliche, die nginx Äquivalent vom „mod_pagespeed“ für Apache. Dieses Modul kann die Performance von Webseiten optimieren, indem z.B. die zugehörigen Assets (CSS, JavaScript, Bilder) verkleiner bzw. kombiniert werden, um die Ladezeiten zu reduzieren. Dieses Tutorial erklärt wie nginx + pagespeed auf Debian kompiliert/installiert werden kann.

 

Bevor wie starten können müssen wir ggf. einige Pakete nachinstallieren und „deb-src“ in der „/etc/apt/sources.list“ einfügen / auskommentieren.

apt-get update
apt-get install dpkg-dev build-essential zlib1g-dev libpcre3 libpcre3-dev
cd /usr/src/
apt-get source nginx
apt-get build-dep nginx
cd nginx-*/debian/modules/
git clone https://github.com/pagespeed/ngx_pagespeed.git
cd ngx_pagespeed
wget https://dl.google.com/dl/page-speed/psol/1.7.30.1.tar.gz
tar -xzvf 1.7.30.1.tar.gz
cd /usr/src/nginx-*/
vim debian/rules

# und folgende Zeile in der config (config.status.full: config.env.full config.sub config.guess) hinzufügen …

--add-module=$(MODULESDIR)/ngx_pagespeed \

# anschließend können wir uns ein neues „*.dep“-Paket bauen

dpkg-buildpackage -b
dpkg --install ../nginx-full*.dep

# … check …

nginx -V

z.B.:

root@h1687374> nginx -V
nginx version: nginx/1.5.10
TLS SNI support enabled
configure arguments: –prefix=/etc/nginx –conf-path=/etc/nginx/nginx.conf –error-log-path=/var/log/nginx/error.log –http-client-body-temp-path=/var/lib/nginx/body –http-fastcgi-temp-path=/var/lib/nginx/fastcgi –http-log-path=/var/log/nginx/access.log –http-proxy-temp-path=/var/lib/nginx/proxy –http-scgi-temp-path=/var/lib/nginx/scgi –http-uwsgi-temp-path=/var/lib/nginx/uwsgi –lock-path=/var/lock/nginx.lock –pid-path=/var/run/nginx.pid –with-pcre-jit –with-debug –with-http_addition_module –with-http_auth_request_module –with-http_dav_module –with-http_geoip_module –with-http_gzip_static_module –with-http_image_filter_module –with-http_realip_module –with-http_stub_status_module –with-http_ssl_module –with-http_sub_module –with-http_xslt_module –with-http_spdy_module –with-ipv6 –with-mail –with-mail_ssl_module –with-openssl=/usr/src/nginx-1.5.10/debian/openssl-1.0.1f –add-module=/usr/src/nginx-1.5.10/debian/modules/nginx-auth-pam –add-module=/usr/src/nginx-1.5.10/debian/modules/nginx-echo –add-module=/usr/src/nginx-1.5.10/debian/modules/nginx-upstream-fair –add-module=/usr/src/nginx-1.5.10/debian/modules/nginx-dav-ext-module –add-module=/usr/src/nginx-1.5.10/debian/modules/nginx-cache-purge –add-module=/usr/src/nginx-1.5.10/debian/modules/ngx_pagespeed

vim /etc/nginx/nginx.conf

# … und folgende Zeilen über den vHosts einfügen …

pagespeed on;
pagespeed FileCachePath /var/ngx_pagespeed_cache;
mkdir /var/ngx_pagespeed_cache
chown -R www-data:www-data /var/ngx_pagespeed_cache
/etc/init.d/nginx restart
curl -I -p http://localhost | grep X-Page-Speed
apt-get install memcached

# aktiviere memcache  

vim /etc/default/memcached
/etc/init.d/memcached restart

# optional: Fehleranalyse

tail -f /var/log/nginx/error.log  

 

Beispiel-Seite:

http://moelleken.org

 

Beispiel-Konfig:

https://github.com/voku/CONFIG–nginx—php-fpm—mysql

 

Download: (alternativ kann man auch meine bereis kompilierte Version testen)

http://suckup.de/downloads/nginx-full_1.5.10_i386.deb

http://suckup.de/downloads/nginx-common_1.5.10_all.deb

http://suckup.de/downloads/nginx-1.5.10_all.deb

 

Links:

Google-Pagespeed-Doku: https://developers.google.com/speed/pagespeed/module/config_filters

Google_Pagespeed-HowTo: https://developers.google.com/speed/pagespeed/module/build_ngx_pagespeed_from_source

Filter-Übersicht: http://ngxpagespeed.com/ngx_pagespeed_example/