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/
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 (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.
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;
}
}
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;
}
}
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.
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 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.
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
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 is the scripting language of the Web. All modern HTML pages are using JavaScript.
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");
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 tips and tricks
scalable vector graphic desc
svg tips and tricks
html5 desc
audio tag - lol ...
video tag - GJ w3c ...
Download video: MP4 format | Ogg format | WebM format
css3 desc
css3 tips and tricks
https://github.com/hightech007
Join project. Feedback to Us:
antistereotip [ at ] gmx [ dot ] com