Hello World

Page Speed Optimization: PSO Is The New SEO

Page speed optimization (PSO) is the new SEO: Miami App Developer WebFL.US Meets Web Marketing Needs with Responsive Design, Standards, Semantics and SPEED. As of 1 January 2014 all websites and mobile apps designed, developed or re-engineered by Miami app development firm WebFL.US will be validated against 14 objective tests of Internet technology standards compliance and ...

Source: http://web3.0designmiami.com/

My View on PSO

How to deliver content quickly ? How to optimize Your site for fast load ? How to make load revolution ? bit OVERLOAD ? Qubit ?

Page load is very important aspect of web design. Speed is the new way of the next generation web3.0 concept.

I want help You to find the best solution for this problem! I work on UI and UX concepts and trying to find the speedest way for content delivery. Some of methods for PSO are page caching and compressing content ... Optimizing images and other media is good way to bring load to minimum ... Implemented API's hosted on CDN's are good trick for rich site and page load ... SVG is better way for animated content and behavior...

I will show you some combined technics, cookbook for high speed load and minimum resource balancing. My gold combination is: nginx, apache2, php5, javascript, xml, svg, html5, css3 ... Put it all together and I'll show You the Magic!!!

Nginx

up

Nginx (pronounced engine-x) is a free, open-source, high-performance HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server. Igor Sysoev started development of Nginx in 2002, with the first public release in 2004. Nginx now hosts nearly 12.18% (22.2M) of active sites across all domains. Nginx is known for its high performance, stability, rich feature set, simple configuration, and low resource consumption.

Nginx is one of a handful of servers written to address the C10K problem. Unlike traditional servers, Nginx doesn't rely on threads to handle requests. Instead it uses a much more scalable event-driven (asynchronous) architecture. This architecture uses small, but more importantly, predictable amounts of memory under load. Even if you don't expect to handle thousands of simultaneous requests, you can still benefit from Nginx-s high-performance and small memory footprint. Nginx scales in all directions: from the smallest VPS all the way up to clusters of servers.

Setup

Let's rock ... n cores - n worker_processes

#/etc/nginx/nginx.conf
user www-data;
worker_processes 2;
pid /var/run/nginx.pid;
events {
        worker_connections 768;
        multi_accept on;
}
http {
        client_max_body_size 20M;
        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        server_tokens off;
        server_names_hash_bucket_size 64;
        server_name_in_redirect off;
        include /etc/nginx/mime.types;
        default_type application/octet-stream;
        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;
        gzip on;
        gzip_disable "msie6";
        gzip_vary on;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
	gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml 
	application/xml+rss text/javascript;
        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
}

#/etc/nginx/sites-available/default
server {
	listen   80; 
	listen   [::]:80 default_server ipv6only=on; 
	root /path/to/htdocs/;
	index index.php index.html index.htm;
        autoindex on; #off recomended     
	server_name localhost;
	location / {
		try_files $uri $uri/ /index.html;
	}
	# deny scripts inside writable dir
    	location ~* /(images|cache|media|logs|tmp)/.*.(php|pl|py|jsp|asp|sh|cgi)$ {
    		return 403;
    		error_page 403 /403_error.html;
    	}
	# deny hotlinking
	location ~ .(gif|png|jpe?g)$ {
     		valid_referers none blocked  localhost *.localhost;
     		if ($invalid_referer) {
        	return   403;
    		}
	}
	location ~ \.php$ {
      		fastcgi_pass 127.0.0.1:9000;
      		fastcgi_index index.php;
      		fastcgi_param SCRIPT_FILENAME /path/to/htdocs/scripts$fastcgi_script_name;
      		include fastcgi_params;
   	}
	location ~ .*\\.(py|sh|pl|cgi)$ {
      		proxy_pass         http://127.0.0.1:1337;
      		proxy_redirect     off;
      		proxy_set_header   Host             $host;
      		proxy_set_header   X-Real-IP        $remote_addr;
      		proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
      		client_max_body_size       10m;
      		client_body_buffer_size    128k;
      		proxy_connect_timeout      90;
      		proxy_send_timeout         90;
      		proxy_read_timeout         90;
      		proxy_buffer_size          4k;
      		proxy_buffers              4 32k;
      		proxy_busy_buffers_size    64k;
      		proxy_temp_file_write_size 64k;
  	}
	location ~ /\.ht {
		deny all;
	}
}

php-fpm socket nginx conf

apt-get install php5-fpm

#/etc/nginx/sites-available/default
server {
        listen   80;
        root /path/to/htdocs;
        index index.php index.html index.htm;
        server_name localhost;
        location / {
                try_files $uri $uri/ /index.html;
        }
        error_page 404 /404.html;
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
              root /path/to/htdocs;
        }
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        location ~ \.php$ {
                try_files $uri =404;
                fastcgi_pass unix:/var/run/php5-fpm.sock;
                fastcgi_index index.php;
                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                include fastcgi_params;
        }
}

Apache

up

The Apache Software Foundation provides support for the Apache community of open-source software projects, which provide software products for the public good.

The Apache projects are defined by collaborative consensus based processes, an open, pragmatic software license and a desire to create high quality software that leads the way in its field.

Set Apache Up on port 1337

Let's rock ...

#/etc/apache2/sites-available/default
<VirtualHost *:1337>
        ServerAdmin webmaster@localhost

        DocumentRoot /path/to/htdocs/1337
        <Directory />
                Options FollowSymLinks
                AllowOverride None
        </Directory>
        <Directory /path/to/htdocs/1337/>
                Options Indexes FollowSymLinks MultiViews
                AllowOverride None
                Order allow,deny
                allow from all
        </Directory>

        ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
        <Directory "/usr/lib/cgi-bin">
                AllowOverride None
                Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
                Order allow,deny
                Allow from all
        </Directory>
        
        ErrorLog ${APACHE_LOG_DIR}/error.log
        LogLevel warn
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

PHP

up

PHP is a popular general-purpose scripting language that is especially suited to web development.

Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world.

The code

Let's rock ... Set IT Up

<?php
//err dev mode != production
error_reporting(E_ALL);ini_set('display_errors', 1);   
//func cmprss
function compress($bffr) {
  $srch = array('/\>[^\S ]+/s', '/[^\S ]+\</s',  '/(\s)+/s');
  $chng = array('>', '<', '\\1');
  return preg_replace($srch, $chng, $bffr);
}
//pages - engine up class
class ng1np {
  public function render($script) {
	//ob_start();$this->_require($script);return ob_get_clean();
	if (@ini_set('zlib.output_compression',TRUE) || @ini_set('zlib.output_compression_level',2)) 
		{ob_start('compress');} else { ob_start('ob_gzhandler');}
        $this->_require($script);
	if(extension_loaded('zlib')) { ob_end_flush(); }
  }
  public function __get($key) {
	//engine: 1var <-> 1tpl 
    	return(isset($this->$key)?$this->$key:null);
    	}
  protected function _require() {
	//inc_fnc: including script
       	require_once func_get_arg(0);
    	}
}
$eng = new ng1np();
//variables
$eng->title = 'engine up';
$eng->author = 'hightech';
$eng->boost = '4';
$eng->js = 'no';
$eng->logo = 'media/logo.jpg';
$eng->footer = 'open source';
//render page
echo $eng->render('up/home.php');
?>	

.htaccess

up

.htaccess

tip

SetEnv TZ Europe/Belgrade
AddDefaultCharset utf-8

Options +FollowSymlinks
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} .
RewriteCond %{HTTP_HOST} !^www\.domen\.tld [NC]
RewriteRule (.*) http://www.domen.tld/$1 [R=301,L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)\.html$ index.php?q=$1 [L,QSA]

JavaScript

up

JavaScript is the scripting language of the Web. All modern HTML pages are using JavaScript.

JavaScript tips and tricks

JavaScript tips and tricks

function toggle(id) {
  'use strict';
  var e = document.getElementById(id);

  if (e.style.display == '')
    e.style.display = 'none';
  else
    e.style.display = '';
}
function toggle2(id, link) {
  'use strict';
  var e = document.getElementById(id);

  if (e.style.display == '') {
    e.style.display = 'none';
    link.innerHTML = 'dw';
  } else {
    e.style.display = '';
    link.innerHTML = 'up';
  }
}
function getSelect(s) {
  'use strict';
  return s.options[s.selectedIndex].value
}
document.createElement("article");
document.createElement("audio");
document.createElement("video");
document.createElement("header");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");

XML

up

Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. It is defined in the XML 1.0 Specification produced by the W3C, and several other related specifications, all free open standards.

xml tricks

xml tips and tricks

SVG

up

scalable vector graphic desc

svg tricks

svg tips and tricks

Html5

up

html5 desc

html5 tricks

audio tag - lol ...

video tag - GJ w3c ...

Download video: MP4 format | Ogg format | WebM format

Css3

up

css3 desc

css3 tricks

css3 tips and tricks

The Code

up

https://github.com/hightech007

Join The Project

up

Join project. Feedback to Us:
antistereotip [ at ] gmx [ dot ] com

YouTube

up

http://indoor-playgrounds.biz/