How to Make Your HTML Website Faster

1. Split Content

The chief purpose of responsive web design is to enhance web browsing experience on mobile devices without compromising on main contents of a website. But research findings reveal that around 80% people aren’t satisfied with mobile browsing experience, and slow performance of websites is a major reason of this disappointment. Clearly, responsive sites are facing performance issues which is chiefly because of too many HTML elements, excess loading time and extra content.

For seamless mobile browsing experience, it is very important to optimize websites so that their performance is accelerated. This is even more important for businesses because slow websites can have negative impact on marketing and promotion. Here are four actionable tips that will make responsive sites faster.

How to Make Your HTML Website Faster

A desktop website can afford to have many contents in a single webpage. But when responsive designing is used in it, then it is better to split its contents in separate web pages. This reduces HTML’s payload and avoids downloading of any associated dependencies. For example, when any product page of an ecommerce site is viewed on smaller screens, then the main product page should contain only generic information.

Keep separate web pages for ‘customer reviews’ and ‘new offers’ but, provide links for these pages within the main product page. Here, a single product page (for desktop website) splits into three different pages (when it becomes responsive). This will reduce HTTP requests as well as HTML size and will increase the site’s speed.

2. Optimize Images

High resolution images are great for desktop websites, but they are responsible for slowing down the performance of a responsive site. Images take the largest amount of KBs which is why websites with too many images tend to underperform on a mobile browser. Using CSS3 styling features like rounded corners and gradients fills will cut down HTTP requests and increase a site’s speed.

However, for images, one of the best techniques is using Adaptive Images. This software detects the screen size of a visitor’s device, and it automatically creates, caches and delivers an appropriate re-scaled version of embedded HTML images. There’s no need for mark-up changes.

3. Reduce JavaScript

JavaScript has significant effect on page speed. If your page has complex scripts, then mobile visitors of your website may have to spend few seconds in staring at blank page. This is because JavaScript increases a site’s loading time on tablet or smartphone. So reducing JavaScript can help your responsive site to perform better.

As a web designer, you must rethink using JavaScript and try to use it only when absolutely necessary. The best results can be achieved by placing scripts at the bottom of HTML. This prevents unnecessary blocking. However, if a script is absolutely necessary, then keep it inline and keep it small.

4. Use Conditional Loading

This is a very important and popular technique to enhance performance of responsive sites. Conditional loading prevents users to download site contents that make it slow. It can stop different kinds of content from downloading like maps, widgets and images. While implementing conditional loading, designers or developers should thoroughly test the site.

This should be done during optimization stages because it is easier to pick out flaws during that time. Further, it is easier to make corrections during optimization rather than doing so at the very end.

enter image description here

The Bottomline

Mobile users expect the same speed response while mobile browsing that they find in desktops and this expectation can be met only when responsive sites take minimum time to load. The above mentioned techniques can enhance speed of responsive sites by eliminating unnecessary contents and scripts. However, web designers must try to incorporate speed enhancing techniques during the build process of a website, and not as an afterthought.

Config Rails 3 with dalli(memcahed)

Config Rails 3 with dalli(memcahed)

To install dalli in your Rails 3 app, simply add the following to your Gemfile and run bundle install.

# Gemfile
gem "dalli", "~> 2.6.4",   :platforms => :ruby

To setup Rails to use the Dalli client for production, add the following to config/environments/production.rb:

# config/environments/production.rb
# Enable dalli (memcached) caching
config.cache_store = :dalli_store
config.action_controller.perform_caching = true

If you want to cache in any of your other environments, just add the same snippet to your environment of choice.

Dalli can also be used as rack middleware for session caching. To setup session caching with dalli, edit your config/initializers/session_store.rb to contain the following:

# config/initializers/session_store.rb
require 'action_dispatch/middleware/session/dalli_store'

Rails.application.config.session_store :dalli_store,
  :memcache_server => '127.0.0.1:11211',
  :namespace => 'sessions',
  :key => '_yourappname_session',
  :expire_after => 30.minutes

Now, whenever you use Rails’ built in caching or session storage, dalli will automatically interface with memcached.

# config/dalli.yml
# https://github.com/mperham/dalli#configuration
# parse the dalli.yml
# dalli_config = YAML.load_file(Rails.root.join('config/dalli.yml'))[Rails.env]
# memcached_hosts = dalli_config['servers']
# pass the servers to dalli setup
# config.cache_store = :dalli_store, *memcached_hosts, dalli_config["options"]
defaults: &defaults
  expires_in: 7 * 24 * 3600
  compress: true

development:
  options:
    <<: *defaults
    namespace: gxservice_development
  servers: 127.0.0.1:11211

test:
  options:
    <<: *defaults
    namespace: gxservice_test
  servers: 127.0.0.1:11211


staging:
  options:
    <<: *defaults
    namespace: gxservice_staging
  servers:
    - 127.0.0.1:11211

production:
  options:
    <<: *defaults
    namespace: gxservice_production
  servers:
    - cache01.mysite.org:11211
    - cache02.mysite.org:11211
    - cache03.mysite.org:11211

setup Rails use dalli with yaml file

# config/environments/production.rb
if defined?(Dalli)
  dalli_config = YAML.load_file(Rails.root.join('config/dalli.yml'))[Rails.env]
  memcached_hosts = dalli_config['servers']
  config.cache_store = :dalli_store, *memcached_hosts, dalli_config["options"]
end

migrate wordpress to heroku

WordPress Heroku

This project is a template for installing and running WordPress on Heroku. The repository comes bundled with PostgreSQL for WordPress and WP Read-Only.

Installation

Clone the repository from Github

$ git clone git://github.com/mhoofman/wordpress-heroku.git

With the Heroku gem, create your app

$ cd wordpress-heroku
$ heroku create
Creating strange-turtle-1234... done, stack is cedar
http://strange-turtle-1234.herokuapp.com/ | git@heroku.com:strange-turtle-1234.git
Git remote heroku added

Add a database to your app

$ heroku addons:add heroku-postgresql:dev
Adding heroku-postgresql:dev to strange-turtle-1234... done, v2 (free)
Attached as HEROKU_POSTGRESQL_COLOR
Database has been created and is available
Use `heroku addons:docs heroku-postgresql:dev` to view documentation

Promote the database (replace COLOR with the color name from the above output)

$ heroku pg:promote HEROKU_POSTGRESQL_COLOR
Promoting HEROKU_POSTGRESQL_COLOR to DATABASE_URL... done

Create a new branch for any configuration/setup changes needed

$ git checkout -b production

Copy the wp-config.php

$ cp wp-config-sample.php wp-config.php

Update unique keys and salts in wp-config.php on lines 48-55. WordPress can provide random values here.

define('AUTH_KEY',         'put your unique phrase here');
define('SECURE_AUTH_KEY',  'put your unique phrase here');
define('LOGGED_IN_KEY',    'put your unique phrase here');
define('NONCE_KEY',        'put your unique phrase here');
define('AUTH_SALT',        'put your unique phrase here');
define('SECURE_AUTH_SALT', 'put your unique phrase here');
define('LOGGED_IN_SALT',   'put your unique phrase here');
define('NONCE_SALT',       'put your unique phrase here');

Clear .gitignore and commit wp-config.php

$ >.gitignore
$ git add .
$ git commit -m "Initial WordPress commit"

Deploy to Heroku

$ git push heroku production:master
-----> Heroku receiving push
-----> PHP app detected
-----> Bundling Apache v2.2.22
-----> Bundling PHP v5.3.10
-----> Discovering process types
       Procfile declares types -> (none)
       Default types for PHP   -> web
-----> Compiled slug size is 13.8MB
-----> Launcing... done, v5
       http://strange-turtle-1234.herokuapp.com deployed to Heroku

To git@heroku:strange-turtle-1234.git
  * [new branch]    production -> master

After deployment WordPress has a few more steps to setup and thats it!

Usage

Because a file cannot be written to Heroku’s file system, updating and installing plugins or themes should be done locally and then pushed to Heroku.

Updating

Updating your WordPress version is just a matter of merging the updates into the branch created from the installation.

$ git pull # Get the latest

Using the same branch name from our installation:

$ git checkout production
$ git merge master # Merge latest
$ git push heroku production:master

WordPress needs to update the database. After push, navigate to:

http://your-app-url.herokuapp.com/wp-admin

WordPress will prompt for updating the database. After that you’ll be good to go.

Wiki

tips

heroku apps:rename jhjguxin --app evening-retreat-8008

plugin use by francis

├── plugins
│   ├── akismet
│   ├── google-analytics-for-wordpress
│   ├── hello.php
│   ├── index.php
│   ├── wordpress-importer
│   ├── wp-markdown
│   ├── wpro
│   └── xml-sitemap-feed
├── themes
│   ├── index.php
│   ├── twentyeleven
│   ├── twentythirteen
│   └── twentytwelve

tips:
plugin google-sitemap-generator need create ‘sitemap.xml’, ‘sitemap.xml.gz’ and permit CHMOD 666, can not do this on heroku, so use ‘xml-sitemap-feed’ instead it.

how to import from old wordpress

https://github.com/mhoofman/wordpress-heroku/issues/29

Same issue. Basically, since moving data from MySQL to PostgresSQL is such a huge pain, there is no way to transition from a classic wordpress install to wordpress since the importer is broken.

UPDATE: SOLVED!

To fix this issue: 1. Add the file you wish to import into your /wp-content/uploads/ directory structure and use the current year/month like “/wp-content/uploads/2013/01/blogname.wordpress.2013-01-10.xml_.txt (make sure to change the file extension) this is where wordpress would have uploaded the file). 2. Commit and push this new file to Heroku. 3. Disable the WordPress Read Only(WPRO) plugin. 4. Run the import like normal. 5. Re-enable the WPRO plugin

when throw ‘Error: The uploaded file exceeds the upload_max_filesize directive in php.ini

########
php_value upload_max_filesize 50M
php_value post_max_size 50M
php_value max_execution_time 500
php_value max_input_time 500
#########