80% of the time it takes for a web page to load is on the client side.
Using all the tips in this presentation should cut 25% to 50% off the load time of optimized page requests.
Drupal (6 or 7) can be used to, fairly easily, implement a whole bunch of these “front-end performance” upgrades, and knock a ton of errors off of the Yahoo! and Google speed-checker tools validation checklists.Get firebug first.
A web perf dashboard up & running in 90 minutes presentation
A Web Performance Dashboard can be set up and running in 90 minutes using freely available tools. The summary collects performance data from real users using boomerang.js and synthetic data from WebPagetest. The data is processed and stored using StatsD and Graphite. Finally, the dashboard is built by pulling the data into Piwik for visualization and monitoring.
HTML 5 is the latest version of the HTML standard. It includes several new elements and features to improve structure and behavior. Some key changes include new semantic elements like <article>, <aside>, <header>, and <footer>; built-in support for audio and video; the <canvas> element for drawing graphics; and forms with new input types. HTML 5 aims to simplify HTML and separate structure and presentation, making code cleaner and pages more accessible. It is developed jointly by the WHATWG and W3C organizations.
BaláZs Ree Introduction To Kss, Kinetic Style Sheets
KSS, Kinetic Style Sheets, is a framework that enables developers to create rich (AJAX) user interfaces without knowing javascript at all. KSS itself is by default included with Plone3 and is also usable with Zope3. In the future we plan to make it available for other pythonic and non-pythonic platforms as well. During the demonstration we give a step by step introduction to adding dynamic behaviour to your browser page by the KSS stylesheet and server side only python code. We also introduce the setup and debugging skills needed to add dynamicity to your application. The targeted audience for the demo are Plone developers and integrators, familiar with server side Plone scripting. A basic knowledge of HTML and CSS is also needed. As a result you will get an introduction to the usage of KSS. Knowledge of javascript is not needed for attending the demonstration.
The document discusses the importance of website performance and provides tips to build responsive websites. It notes that users expect pages to load within 2 seconds and will leave slow sites. The tips include reducing HTTP requests, gzipping and minifying components, optimizing images, delivering JavaScript and CSS efficiently, lazy loading images, and inlining critical CSS. Following these foundations and techniques can significantly improve load times and user experience.
RSVP Node.js class at www.nycdatascience.com
NYC data science academy's free workshop, given at NYC Open Data Meetup, http://www.meetup.com/NYC-Open-Data/events/163300552/
Godefroid Chapelle Ajax With Plone 3 Kss Development PatternsVincenzo Barone
This document discusses Kinetic Style Sheets (KSS), an Ajax framework that uses kinetic stylesheets for event binding and DOM manipulation on the client-side while keeping business logic on the server-side. It outlines the goals of ensuring accessibility and using minimal JavaScript. It describes the design of using kinetic stylesheets, a generic client-side engine for handling events and HTML snippets, and a simple server-side API. It also covers development and testing patterns for KSS.
This document discusses PageSpeed, a tool for just-in-time performance optimization of web pages. It provides automatic image compression and resizing, CSS and JavaScript minification, inline small files, caching, and deferring JavaScript among other optimizations. While most performance issues are well understood, not all websites are fast due to the tradeoff between speed and ease of maintenance. PageSpeed tools like mod_pagespeed can automate optimizations to improve performance without extra work from developers.
How to investigate and recover from a security breach in WordPressOtto Kekäläinen
This document summarizes Otto Kekäläinen's talk about investigating and recovering from a WordPress security breach at his company Seravo. On November 9th, 2018 four WordPress sites hosted by Seravo were compromised due to a vulnerability in the WP GDPR Compliance plugin. Seravo's security team launched an investigation that uncovered malicious user accounts, identified the vulnerable plugin as the entry point, and cleaned up the sites. The experience highlighted the importance of having an incident response plan even when security best practices are followed.
A web perf dashboard up & running in 90 minutes presentationJustin Dorfman
A Web Performance Dashboard can be set up and running in 90 minutes using freely available tools. The summary collects performance data from real users using boomerang.js and synthetic data from WebPagetest. The data is processed and stored using StatsD and Graphite. Finally, the dashboard is built by pulling the data into Piwik for visualization and monitoring.
HTML 5 is the latest version of the HTML standard. It includes several new elements and features to improve structure and behavior. Some key changes include new semantic elements like <article>, <aside>, <header>, and <footer>; built-in support for audio and video; the <canvas> element for drawing graphics; and forms with new input types. HTML 5 aims to simplify HTML and separate structure and presentation, making code cleaner and pages more accessible. It is developed jointly by the WHATWG and W3C organizations.
BaláZs Ree Introduction To Kss, Kinetic Style SheetsVincenzo Barone
KSS, Kinetic Style Sheets, is a framework that enables developers to create rich (AJAX) user interfaces without knowing javascript at all. KSS itself is by default included with Plone3 and is also usable with Zope3. In the future we plan to make it available for other pythonic and non-pythonic platforms as well. During the demonstration we give a step by step introduction to adding dynamic behaviour to your browser page by the KSS stylesheet and server side only python code. We also introduce the setup and debugging skills needed to add dynamicity to your application. The targeted audience for the demo are Plone developers and integrators, familiar with server side Plone scripting. A basic knowledge of HTML and CSS is also needed. As a result you will get an introduction to the usage of KSS. Knowledge of javascript is not needed for attending the demonstration.
The document discusses the importance of website performance and provides tips to build responsive websites. It notes that users expect pages to load within 2 seconds and will leave slow sites. The tips include reducing HTTP requests, gzipping and minifying components, optimizing images, delivering JavaScript and CSS efficiently, lazy loading images, and inlining critical CSS. Following these foundations and techniques can significantly improve load times and user experience.
RSVP Node.js class at www.nycdatascience.com
NYC data science academy's free workshop, given at NYC Open Data Meetup, http://www.meetup.com/NYC-Open-Data/events/163300552/
This document provides an overview of using WordPress and AJAX. It discusses loading scripts and styles properly, using JavaScript localization to capture dynamic PHP content, page detection techniques, the wp_ajax action for handling AJAX requests, and the WP_Ajax_Response class for returning XML responses from AJAX callbacks. It also provides an example of building an AJAX registration form plugin with classes for handling the form, scripts, and styles.
A look at how HTML5 aims to plug the holes that Flash has been filling in browsers for the last decade, looking at both HTML5 and non-HTML5 JavaScript APIs.
For Flash Brighton in Feb 2010.
The document discusses techniques for optimizing the performance of a Facebook like button, including:
1. Reducing the number of CSS and JavaScript files needed by combining them into single files and hosting on a single CDN.
2. Loading CSS styles inline initially and lazy loading remaining styles. Loading JavaScript asynchronously and lazily.
3. Addressing challenges like IE still downloading images in hidden elements and using CSS techniques like "nubs" for rounded corners.
It is actually possible to manage all of your WordPress tasks on plugins, themes, database, site migration, etc through command line interface using WP-CLI tool. Slides covers basic part on getting started with WP-CLI and letting you know how to manage each tasks easily and efficiently. This tool powers up your productivity and saves time that you spend on loading browser while doing your work.
AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...panagenda
Users don’t care where their data lives. They just want to get their work done quickly and efficiently. They would prefer to do their work without opening three different applications and five different browser tabs. That means your applications need to share data and work well with other applications. So what can you do? Use XPages and Java, of course!
Kathy and Julian will give you integration tips and examples of connecting your XPages apps to both IBM and non IBM technologies. Walk away with a head full of knowledge and a sample database full of working code. NOTE: this session is geared towards XPages and Java developers, beginners welcome!
A presentation from Julian Robichaux (panagenda) and Kathy Brown (PSC Group).
Slides from my talk discussing my experience rebuilding a video player I previously developed in Flash. I gave this talk on March 18th, at the Brisbane Web Design Meetup.
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
Slides apresentados no 16 EDTED, edição Rio de Janeiro, em 21 de Maio de 2011.
Aqui não tem vídeos, animações e códigos apresentados, mas tem os links. Logo passo o link completo.
This document provides an overview of how to optimize a Drupal site for performance and scalability. It discusses identifying scaling issues, introducing an optimization process through load testing and monitoring tools. Specific techniques covered include enabling the slow query log, using load testing tools like jMeter, reviewing slow query logs, optimizing queries, implementing caching at various levels, and ongoing monitoring with tools like Cacti. Additional measures discussed are database scaling, hardware changes, front-end optimizations like aggregation/compression, and using a content delivery network.
WebPageTest is a great tool for testing and analysing how quickly web pages load.
Many people just use it as a simple testing tool, but it has advanced scripting capabilities for multi-page testing, completing forms etc.
It also has an API so performance testing can be integrated into Continuous Integration processes, used for monitoring and analysing how the web is built.
These slides explore some of these capabilities in more detail.
There are bonus slides after the "Thank You" slide
This document discusses various technologies related to Ajax and web services, including:
1. Ajax started as an acronym for Asynchronous JavaScript and XML.
2. It describes common web service protocols like REST and SOAP. REST uses HTTP methods to perform CRUD operations on resources while SOAP uses an XML envelope.
3. It provides an example of using Ajax with a simple Perl script to retrieve the answer to "What is the meaning of life?" stored on a server and display it in the browser.
This document summarizes best practices for optimizing JavaScript performance. It discusses loading JavaScript asynchronously or lazily to avoid blocking page loads. It also recommends minimizing DOM manipulation, batching style changes, and caching references to reduce reflows and repaints. The document emphasizes measuring performance through tools like Benchmark.js and jsperf.com to avoid premature optimization. It cautions against unnecessary shims and polyfills and stresses optimizing for mobile environments.
Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...Strangeloop
One approach to performance is to accelerate the network; another is to optimize the application by reducing how much the network is needed and pushing content out towards the user. In this session, Hooman Beheshti reveals how technologies like Front-End Optimization and Content Delivery Networks work alongside the rest of the cloud computing stack to improve performance and increase user productivity.
Front end optimization is important because 80% of end-user response time is spent on the front-end and front-end optimization can cut page load times by 25-50%. Page load times significantly impact user experience and business metrics. Tools like Yslow and Google PageSpeed can help identify optimization opportunities. Image optimization, minimizing HTTP requests by combining files, and reducing payload sizes are some techniques that should be applied from the start of a project. Progressive page loading, splitting components across domains, browser caching, and preloading components can further improve performance.
Front-End Performance Optimization in WordPressdrywallbmb
Data from major Internet providers like Google, Amazon and Akamai has shown that how fast a website loads significantly affects user behavior. And because users don’t like slow sites, Google uses load time as a factor in computing PageRank results. In short: It pays to be fast.
There are a lot of factors that can affect your site’s performance. While some are dependent on your hosting environment, there are plenty of factors beyond server/internet speed (and the obvious sheer number of bits to be loaded) that affect your page load time, such as HTTP connections, DNS lookups, and asset load sequencing.
If you’re a front-end developer and you’re serious about building websites that load as fast as possible, come learn about techniques (such as non-blocking Javascript) you can use in your markup and themes — whether on WordPress or some other system — to help things load as quickly as possible. We’ll also review tools you can use to assess whether your site is doing all it can to load quickly.
This document discusses front-end optimization techniques to improve site response time, including setting up content delivery networks (CDNs), image optimization, minifying and combining CSS and JavaScript files, gzip compression, browser caching, and preloading resources. It provides results from testing these techniques on a Joomla site and analyzing the impact on page load times and number of HTTP requests in different locations.
Marrying CDNs with Front-End Optimization Strangeloop
Slide deck from Strangeloop president Joshua Bixby's presentation at the 2012 Content Delivery Summit.
Many content owners are already using a content delivery network (CDN) to cache content closer to their visitors, but CDNs don't reduce the number of requests required to render each page, and they have no impact on browser efficiency. Front-end optimization (FEO) picks up where CDNs leave off, transforming the content itself so that it renders as quickly as possible in the browser.
In this presentation, attendees will see real-world examples of how leading e-commerce sites have combined CDN and FEO forces to reach new levels of performance for content-rich pages. Get real numbers on how quickly content-rich sites loaded pre-acceleration, then with just a CDN, then with a combined CDN/FEO solution.
The document discusses various techniques for optimizing the front-end performance of websites, including minification, CSS sprites, domain sharding, image optimization, and HTTP caching. It provides examples and best practices for each technique to reduce file sizes, HTTP requests, and load times to improve user experience.
This document summarizes a presentation on image processing. It introduces image processing and discusses acquiring images in digital formats. It covers various aspects of image processing like enhancement, restoration, and geometry transformations. Image processing techniques discussed include histograms, compression, analysis, and computer-aided detection. Color imaging and different image types are also introduced. The document concludes with mentioning some common image processing software.
Drupal Frontend Performance and ScalabilityAshok Modi
This document discusses strategies for improving Drupal frontend performance. It introduces the presenters and their backgrounds working with Drupal. Then it outlines various tools for measuring performance, points of optimization like reducing requests and file sizes, optimizing caching, and techniques like lazy loading images and minifying files. Specific optimizations discussed include using CDNs, Gzip compression, and optimizing CSS/JS selectors. The goal is to define objectives, diagnose issues, and apply optimizations at various points to improve frontend load times and site performance.
This document discusses various techniques for improving the frontend performance of Drupal websites. It begins by introducing the speaker and describing the goals of the presentation. The bulk of the document then provides recommendations in three areas: backend server optimizations like caching, parallel downloads and gzip compression; tools for measuring performance; and frontend optimizations like minimizing requests, lazy loading images, and improving CSS and JavaScript. The document encourages proper performance diagnosis and defines goals before implementing solutions.
A complete guide of optimizing Magento performance systematically, including LAMP(Linux, Apache, MySQL, PHP) optimization, tuning inside Magento and useful tools.
This document provides instructions for setting up the folder structure and initial HTML page for a web development project. It walks through creating folders for the project files and then adding the basic HTML structure and tags for the first page, including the <DOCTYPE>, <html>, <head>, <title>, and <body> elements. It also introduces adding CSS and JavaScript files by linking and scripting them into the <head> of the page. The goal is to set up the initial structure and files needed to begin building out the first web page.
High Performance Web Pages - 20 new best practicesStoyan Stefanov
The document discusses best practices for improving web page performance. It begins by noting how slow pages negatively impact user experience and business metrics. It then outlines 14 best practices such as minimizing HTTP requests, using a content delivery network, gzipping components, optimizing images, and avoiding redirects. Additional best practices are also provided such as preloading components, minimizing DOM access, and keeping components under 25kb. Tools for measuring performance are also mentioned.
Presentation from June 2013, Surrey, BC, Drupal Group meetup.
- Some tips how to improve Drupal 7 performance.
- Get Drupal 7 working faster
- Optimize code in order to get proper responses
- Use cache (memcache, APC cache, entity cache, varnish)
- Scale Drupal horizontally in order to balance load
The document provides an overview of HTML5, CSS3, and LESS CSS. It describes new HTML5 elements like <canvas>, <audio>, <video>, and attributes for existing tags. CSS3 features covered include rounded corners, animations, and media queries. LESS CSS allows snippets to be reused through mixins and nested rules. The document recommends tools like Modernizr, polyfills, and Crunch to compile LESS into CSS.
Drupal Theme Development - DrupalCon Chicago 2011Ryan Price
This class is intended for people who know some HTML and CSS, and covers the fundamental principles of Drupal theming geared toward people who wish to take a static mockup of a site design and turn it into a Drupal theme. You will also learn about using base themes, grid-based layout and helper modules to streamline and customize your Drupal theme.
Trainer Ryan Price has built entertainment sites, social networks, and eCommerce sites for clients including Popular Science, Field and Stream and Outdoor Life magazines. With over 10 years of experience building sites with PHP and other technologies, Ryan began immersing himself in Drupal around 2006. Ryan often teaches and writes articles along with Mike Anello, and the duo is also known for producing the DrupalEasy Podcast with their host Andrew Riley.
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017 Evan Mullins
WP Dev/tools for beginners: ftp, git, svn, php, html, css, sass, js, jquery, IDEs, themes, child themes, the loop, hooks, APIs, CLI, agile, bootstrap, SEO, slack… etc.
We’ll discuss the language and various acronyms and buzzwords used by devs in this crash course introduction to the developer’s world. Overview of primary development processes and terms and what software is needed to play the game. We’ll cover what you need to go from zero to developer and hopefully how to have fun on the way.
Bootstrap is a popular front-end framework that provides responsive grid system, prebuilt components, and plugins for developing responsive mobile-first websites and web applications. It includes HTML and CSS templates for typography, forms, buttons, navigation and other interface components as well as optional JavaScript plugins. The document discusses Bootstrap's grid system which uses rows and columns to build layouts responsive across devices, and provides examples of basic grid structures for stacking columns horizontally and creating different layouts for mobile, tablet and desktop screens.
This document provides instructions and tips for customizing WordPress themes. It discusses preparing for theme customization by setting up a development site, then outlines the theme customization process including working with CSS, header images, backgrounds, fonts, and footer credits. It also provides links to additional resources and plugins to aid in customization.
The new static resources framework provides declarative resource management and optimization in Grails applications. The resources plugin allows resources like CSS, JavaScript, and images to be declared and then processed and optimized at runtime. This includes bundling, minification, caching, and more. The plugin uses a mapping pipeline to modify resources according to configurable mappers before delivery. This provides a major improvement over prior approaches by automating resource handling and optimization.
Installing And Configuration for your Wordpress blogigorgentry
The document discusses installing and customizing WordPress to create two different website designs - a simple "Jakob design" and a more complex "Fancy design". It provides step-by-step instructions on downloading, installing, and configuring WordPress, and describes modifications made to the theme's CSS file and use of images to achieve each design's look and feel. The focus is on making WordPress easy to use while delivering content in an accessible way.
Building Performance - ein Frontend-Build-Prozess für Java mit MavenOliver Ochs
Jan Weinschenker und Oliver Ochs (Holisticon AG)
In diesem Vortrag geht es um eine konkrete Website. Im ersten Teil des Vortrags stellen wir die wichtigsten Optimierungsmaßnahmen vor, die außerhalb eines Builds durchgeführt wurden. Für eine dauerhafte, nachhaltige Performance-Optimierung müssen die Maßnahmen automatisiert bzw. in den Build-Prozess integriert werden. Im zweiten Teil des Vortrags zeigen wir einen beispielhaften Build-Prozess für Java-Webanwendungen, der Teile der Optimierungsmaßnahmen durchführt. Andere Teile müssen durch eine geeignete Architektur sichergestellt werden, wofür wir ebenfalls Ideen liefern.
The document provides best practices for optimizing frontend performance by reducing page load time. It discusses ways to reduce the number of HTTP requests, DNS lookups, redirects and duplicate scripts. It also recommends techniques like minifying assets, leveraging caching, prioritizing critical components, optimizing images and using content delivery networks.
Bootstrap is a popular front-end framework that provides pre-built styles and components for faster web development. It uses HTML, CSS and JavaScript for a mobile-first approach. Originally developed by Twitter, Bootstrap has been released as open source. It provides basic styling for common elements like typography, forms, buttons, tables and a powerful grid system for responsive design. The document discusses these features of Bootstrap in detail.
The document discusses HTML5 Boilerplate, which is a popular front-end template that helps developers build fast, robust, and adaptable web apps or sites. It includes tools like Modernizr, which detects HTML5 and CSS3 browser support, and HTML5 Shiv, which allows styling of HTML5 elements in older IE browsers. Using HTML5 Boilerplate follows best practices for performance, like minifying code and setting the viewport.
Similar to Front end performance optimization (20)
Delegation Inheritance in Odoo 17 and Its Use CasesCeline George
There are 3 types of inheritance in odoo Classical, Extension, and Delegation. Delegation inheritance is used to sink other models to our custom model. And there is no change in the views. This slide will discuss delegation inheritance and its use cases in odoo 17.
Principles of Roods Approach!!!!!!!.pptxibtesaam huma
Principles of Rood’s Approach
Treatment technique used in physiotherapy for neurological patients which aids them to recover and improve quality of life
Facilitatory techniques
Inhibitory techniques
(T.L.E.) Agriculture: Essentials of GardeningMJDuyan
(𝐓𝐋𝐄 𝟏𝟎𝟎) (𝐋𝐞𝐬𝐬𝐨𝐧 𝟏.𝟎)-𝐅𝐢𝐧𝐚𝐥𝐬
Lesson Outcome:
-Students will understand the basics of gardening, including the importance of soil, water, and sunlight for plant growth. They will learn to identify and use essential gardening tools, plant seeds, and seedlings properly, and manage common garden pests using eco-friendly methods.
Views in Odoo - Advanced Views - Pivot View in Odoo 17Celine George
In Odoo, the pivot view is a graphical representation of data that allows users to analyze and summarize large datasets quickly. It's a powerful tool for generating insights from your business data.
The pivot view in Odoo is a valuable tool for analyzing and summarizing large datasets, helping you gain insights into your business operations.
How to Handle the Separate Discount Account on Invoice in Odoo 17Celine George
In Odoo, separate discount account can be set up to accurately track and manage discounts applied on various transaction and ensure precise financial reporting and analysis
How to Configure Time Off Types in Odoo 17Celine George
Now we can take look into how to configure time off types in odoo 17 through this slide. Time-off types are used to grant or request different types of leave. Only then the authorities will have a clear view or a clear understanding of what kind of leave the employee is taking.
How to Add Colour Kanban Records in Odoo 17 NotebookCeline George
In Odoo 17, you can enhance the visual appearance of your Kanban view by adding color-coded records using the Notebook feature. This allows you to categorize and distinguish between different types of records based on specific criteria. By adding colors, you can quickly identify and prioritize tasks or items, improving organization and efficiency within your workflow.
2. Introduction
The performance-enhancing concepts that guide
this presentation I first found outlined in these
two books:
High Performance Websites
http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309
Even Faster Websites
http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/
It’s best to use both the Google and Yahoo! Page Speed Validation
Tools -
And try to comply with all of the suggestions they give:
Google’s Resource on the subject:
http://code.google.com/speed/page-speed/docs/rules_intro.html
Yahoo’s! Resource on the subject:
http://developer.yahoo.com/performance/rules.html
Has anyone done any of this “Page Speed” stuff before? With
3. Overview
Make Fewer HTTP Requests
Combine CSS & JS into as few files as possible.
Enable Drupal options from performance page.
Create sprite images for layout elements and implement using CSS.
Enable Progressive Page Load and Remove Unused Markup
Put the $scripts at the bottom of the template, right above $closure.
Remove unused CSS and JavaScript being added by core modules.
Externalize, Minify, and What to Avoid
Make JavaScript and CSS External.
Minify JavaScript & CSS.
Avoid CSS Expressions.
Avoid bad requests or redirects.
Use a Content Delivery Network
Fake CDN using CDN module.
Setting up Cookie Domain
Defined in: sites/default/settings.php
Needs to be different from the sub-domains being used to serve static files through the CDN module.
Configure Headers and Compression
Add an Expires Header.
Gzip Components.
Configure ETags.
4. Overview
80% of the time it takes for a
web page to load is on the
client side.
Using all the tips in this
presentation should cut 25%
to 50% off the load time of
optimized page requests.
Drupal (6 or 7) can be used
to, fairly easily, implement a
whole bunch of these “front-
end performance” upgrades,
and knock a ton of errors off
of the Yahoo! and Google
speed-checker tools
validation checklists.
Get firebug first.
5. Make Fewer HTTP Requests
Combine CSS & JS into as few files as possible.
Enable Drupal options “Optimize CSS files” and “Optimize JS files” from performance page:
/admin/settings/performance – Then clear cache and check front end to check there are no errors
and/or all files have been combined. If you added external css/js calls to your template, move them
into your-theme.info so they will be aggregated with the rest of the internal resources.
Create sprite images for layout elements and
implement using CSS.
This means you will try to combine all your “layout images” into one file and modify the CSS to only
display the correct piece of the sprite in each element.
You should also make sure that from your CSS the sprite is only called one time, as a background
image, in a catch-all rule for all the elements that use it.
Use this module to cheat (pass the validation checks in the tools without doing much work):
http://drupal.org/project/css_emimage
6. Remove extra CSS & put JS at the bottom
Remove Unused CSS
Lots of CSS is added by core modules, you can strip it out by finding/adding this function in your themes template.php file:
phptemplate_preprocess_page
The needed code: http://drupalbin.com/19830
Test to make sure each file excluded is not one needed for some layout element or whatever to display.
Disable “Optimize CSS files” option on the performance page and run the Google tool. Look at the very bottom, it will show you “unused
CSS” and point you to each file. This allows cherry picking the required CSS over into a “theme style sheet”, so the original file can be
excluded from template.php, and our page will still be just as pretty as ever:)
CSS at the Top and JS at the Bottom - Progressive Page Loading
In most themes this means moving: <?php print $scripts; ?> to the bottom, of the template file. right above: <?php print $closure; ?>.
If a module is printing its own JS in the head: find “drupal_add_js” in that module directory and change it’s scope to “footer”:
drupal_add_js($data = NULL, $type = 'module', $scope = ‘footer', $defer = FALSE, $cache = TRUE, $preprocess = TRUE);
This breaks some JavaScripts!
For an idea of how to re-make document-write’s (so they work when loading last) take a look at the “DOM element replace” post-
doc write scripts - at the bottom of this document.
Move it to the bottom, save, clear your cache, then make sure that all your JavaScript is still working correctly and no errors are being
produced.
If nothing breaks, you have enabled progressive page loading!
As soon as an element is read by the browser: it is rendered, styled, to the user, element by element, down the page.
If JavaScript is left at the top nothing can download or render on the page until all of the JS in the head is finished being processed, lame.
7. More CSS & JS Cleanup
Avoid CSS Expressions
Yahoo! Says it best: CSS expressions are a powerful (and dangerous) way to set CSS properties
dynamically. They were supported in Internet Explorer starting with version 5, but were deprecated
starting with IE8. As an example, the background color could be set to alternate every hour using
CSS expressions:
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
Make JavaScript and CSS External
This way they don’t need to be loaded with the HTML on every page. Once the document is
cached on the client side it will not need to reload and won’t be getting sent out with every request
like it would if it were embedded.
Minify JavaScript.
This module can be used in D6 to minify JavaScript using JSMin:
http://drupal.org/project/javascript_aggregator I cannot find a working D7 solution, and it’s not in core.
There is something similar for CSS Gzip:
http://drupal.org/project/css_gzip D7 has this in core.
If your using private downloads:
Gzipping of js & css can be achieved with the Boost module.
Fix bad Requests and/or Redirects
Make sure external resources being used on the page (js, css, images, flash, ect.) are not
missing and are not being redirected to other resources to load. So, you don’t want your
image: www.mysite.com/image.jpg redirecting to static.mysite.com/image.jpg before loading, you
want to just link the img src to: static.mysite.com/image.jpg in the first place.
8. Use a Content Delivery Network
If your site is not big enough to require an actual content delivery network:
This is how to set up a fake one to allow resources to download in parallel off of sub-
domains.
Most browsers, by default, only download two resources from one domain at a time
(only one at a time for JS). Spreading static resources (like images, CSS, and JS)
across couple of sub-domains will allow browsers to download things, 2 at a time, from
each domain simultaneously.
I recommend starting by adding only one sub-domain for this (most sites do not
require separate ones for css, js, and images) I used this one on my site:
http://static.plattdaddy.com
Create the sub-domain pointing to the root of your existing website.
Once this is finished you should be able to access your exact site through either domain: static. = www.
As long as there’s nothing in .htaccess trying to redirect you back to www or something.
Install the CDN Module: http://drupal.org/project/cdn
In D6 you’ll have to patch core (possibly twice) just like it says in the readme.txt.
Configure the “Fake CDN”: /admin/settings/cdn/details
Add rule: http://static.yourwebsite.com|.jpg .jpeg .gif .png .ico .png .js .css
Enable the “Fake CDN”: /admin/settings/cdn
Leave the default “mode” selected: Origin Pull.
Make sure to add some redirect rules like this to your .htaccess file so you don’t create a
ton of nasty duplicate content and canonical domain confusion issues in the search
engines.
9. Setting up cookie domain
A domain that sets a cookie is considered a “cookie enabled domain” by whatever requests it. The
goal here is to separate static resources onto a domain that dose not set any cookies first we’ll
need to set which domain we want Drupal to use for setting cookies, usually this will be www.
If you must have your cookie domain set to the root of your site, like this: http://plattdaddy.com,
then you should serve static resources from a separate domain, like yimg.com for Yahoo and
ytimg.com for Youtube.
You’ll need something like this cookie viewer add-on for FireFox (right click any page, click “more
info” then click the cookies tab), so you can see, really clearly, what cookies have been loaded, and
from what domain. I also recommend using the clear cache button add-on while testing your cookie
domain setup.
In settings.php uncomment this line and put your domain in like this:
$cookie_domain = 'www.yourwebsite.com';
If you use Google Analytics
The cookies that provides is via *.example.com – so, as per their tutorial page, you’ll *have to* use a separate
domain name for static files if you want to keep it cookie-free (at least pre-asynchronous tracking anyway).
The way, I found, around this one is to add this to the analytics code:
_gaq.push(["_setDomainName", "www.plattdaddy.com"]);
If your using the GA module:
Go to: admin/settings/googleanalytics and just add the above snippet to the “Custom JavaScript code” area on the
admin page.
If you have enabled the CDN
The static resources will already be getting served off one or more custom sub-domains.
So, now, your site should pass either tools validation tests for serving static content off of cookie-
less domains and parallelizing downloads across hostnames.
10. Configure Headers and Compression
Expires Header
Make sure the expires apache module us loaded. If not, uncomment this in httpd.conf (then restart
apache):
LoadModule expires_module modules/mod_expires.so
Gzip Components
Make sure the deflate apache module us loaded. If not, uncomment this in httpd.conf (then restart
apache):
LoadModule deflate_module modules/mod_deflate.so
Configure E-tags
If mod_expires is on: add FileETag MTime Size inside of:
<IfModule mod_expires.c>
Copy all of the needed customizations from this example: http://drupalbin.com/19839
You’ll need to transfer to your sites .htaccess file:
The second and third: <FilesMatch></FilesMatch>’s
Place these directly below the default one, like I have it in the example.
The entire: <IfModule mod_expires.c></IfModule>